在li盘旋时显示另一个div

Question

我有两个div，第一个有菜单li元素，第二个有子菜单。当我将鼠标悬停在菜单li上时，它应该显示带有CSS的下一个div

li:hover{
  //Display Submenu
}

Fiddle here

Answer 1

https://jsfiddle.net/yv6pyk7a/

.secondDiv:hover {
    display:block;  
}
.secondDiv > li:hover {
    background: #aaa;
    cursor: pointer;
}

请检查一下。希望它能解决问题。

Answer 2

请根据需要查看以下链接。

Fiddle

    .FirstDiv:hover + .secondDiv {
    display:block;  
}

Answer 3

https://jsfiddle.net/54f3owv4/7/

.FirstDiv:hover + .secondDiv {
    display:block;  
}
.secondDiv:hover {
    display:block;  
}

Answer 4

＆＃13;

＆＃13;

.FirstDiv{
    float:left;
 height: 200px;
 overflow-y:scroll;
 border: 1px solid;
 width:500px;
    position:relative;
 
}
.secondDiv{
    float:left;
    border: 1px solid;
     height: 200px;
    width:200px;
     background: #FF2200;
    display:none;
    position:absolute;
    left:100px;
    top:10px;
}
li{
    height:30px;
    color:#FFF;
    background-color: #000;
}

.menu:hover .secondDiv,
.menu:hover ~ .secondDiv {

    display:block;
}

＆＃13;

<div class="navigation">
<div class="FirstDiv">
    <ul>
    <li class="menu"> Menu 1 
        
        <div class="secondDiv">
    Second Div 1 <br/>
    Sub menus
</div>
        
        </li>
    <li class="menu"> Menu 2 
        <div class="secondDiv">
    Second Div 2<br/>
    Sub menus
</div>
        
        </li>
    <li class="menu"> Menu 3 
        <div class="secondDiv">
    Second Div 3 <br/>
    Sub menus
</div>
        </li>
    <li class="menu"> Menu 4
        <div class="secondDiv">
    Second Div 4<br/>
    Sub menus
</div>
        
        </li>
    </ul>
</div>
<d
</div>

＆＃13;

＆＃13;

＆＃13;