在 li 悬停时显示另一个 div

Question

我有两个 div，第一个有完整的菜单 li 元素，第二个有子菜单。当我悬停菜单 li 时，它应该显示下一个 div 和 CSS

li:hover{
  //Display Submenu
}

Fiddle here

Answer 1

根据需要检查以下内容link。

Fiddle

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

Answer 2

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

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

Answer 3

.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;
}

<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>

Answer 4

https://jsfiddle.net/yv6pyk7a/

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

只需检查这个。希望能解决问题。

在 li 悬停时显示另一个 div

Show another div while li hover

css

mousehover