困難下拉菜單懸停效果

Question

每當我懸停我的鼠標下有下拉菜單，在下拉菜單中顯示的按鈕。我想做到這一點，只有當我將鼠標放在實際按鈕上時，下拉菜單纔會顯示。

FIDDLE CODE

HTML

<div id="navbar"> 
<ul> 
<li><a href="../HTML/home.html">Home</a></li> 
<li><a href="../HTML/cakes/cakes.html">Cakes</a> 
<ul> 
<li ><a href="#">Budget Cakes</a></li> 
<li><a href="#">Wedding</a></li> 
<li ><a href="#">Cakes to Go</a></li> 
<li ><a href="#">Cake Bonbons</a></li> 
<li ><a href="#">Holiday Cakes</a></li> 
<li ><a href="#">Cakes for Girls</a></li> 
<li ><a href="#">Cakes for Boys</a></li> 
<li ><a href="#">For Her</a></li> 
<li ><a href="#">For Him</a></li> 
<li ><a href="#">Cupcakes</a></li> 
</ul> 
</li> 
<li><a href="#">Classes</a></li> 

<li><a href="#">Flavors</a></li> 

<li><a href="#">Events</a> 
<ul>  
<li><a href="#">Beach Wedding</a></li> 
<li><a href="#">Baby Showers</a></li> 
<li><a href="#">Sweet 15-16</a></li> 
</ul> 
</li> 
<li><a href="#">Contact</a></li> 
<li><a href="#">Questions</a></li> 

</ul> 
</div><!--end of navbar--> 

CSS

#navbar ul li:hover > ul { 
height:auto !important; 
opacity:1; 
} 
#navbar ul li:hover > ul > li { 
height:50px !important; 
opacity:1; 
} 
#navbar ul { 
background: #efefef; 
background: linear-gradient(top, #efefef 0%, #bbbbbb 100%); 
background: moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%); 
background: webkit-linear-gradient(top, #efefef 0%, #bbbbbb 100%); 
box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.15); 
padding: 0 40px; 
border-radius:10px; 
-moz-border-radius:10px; 
-webkit-border-radius:10px; 
list-style:none; 
position:relative; 
display:inline-table; 
} 
#navbar ul:after { 
content:""; 
clear: both; 
display: block; 
} 
#navbar ul li { 
float:left; 
-webkit-transition:background 0.3s ease-in; 
-moz-transition:background 0.3s ease-in; 
-o-transition:background 0.3s ease-in; 
-ms-transition:background 0.3s ease-in; 
transition:background 0.3s ease-in; 
position:relative; 
} 
#navbar ul li:hover { 
background:#4b545f; 
} 
#navbar ul li:hover a { 
color:#fff; 
} 
#navbar ul li a { 
display:block; 
padding:25px 40px; 
color:#757575; 
text-decoration:none; 
} 
#navbar ul ul { 
background: #5f6975; 
border-radius:0px; 
-webkit-border-radius:0px; 
-moz-border-radius:0px; 
padding: 0; 
position:absolute; 
top:100%; 
left:0px; 
width:195px; 
z-index:1; 
-webkit-transition:all 0.4s ease-in-out; 
transition:all 0.4s ease-in-out; 
opacity:0; 
height:0px; 
} 
#navbar ul ul li { 
float:none; 
border-top:1px solid #6b727c; 
border-bottom: 1px solid #575f6a; 
position:relative; 
height:0px; 
-webkit-transition:all 0.4s ease-in-out; 
transition:all 0.4s ease-in-out; 
opacity:0; 
} 
#navbar ul ul li a { 
padding: 15px 40px; 
color:#fff; 
} 
#navbar ul ul li a:hover { 
background: #4b545f; 
} 
#navbar { 
text-align:center; 
} 
#navbar ul ul ul { 
position:absolute; 
left:100%; 
top:0; 
width:155px; 
} 

Answer 1

這是因爲你的嵌套<ul>仍然有高度，所以當你將鼠標懸停在它之後，瀏覽認爲，由於徘徊部分第一個<li>。

最簡單的解決方法是將subnav ul設置爲display: block和overflow: hidden。

#navbar ul ul { 
    ...(existing styles) 
    display: block; 
    overflow: hidden; 
} 

Demo

---

或者，您可以切換visibility: hidden。

#navbar ul ul { 
    ...(existing styles) 
    visibility: hidden; /* ADD */ 
} 

#navbar ul li:hover > ul { 
    ...(existing styles) 
    visibility: visible; /* ADD */ 
} 

Demo 2

Answer 2

添加以下CSS。

#navbar ul ul { 
    display: block; 
    overflow: hidden; 
}