列表項與嵌套子菜單列表之間的空白會導致懸停狀態丟失

Question

我試圖創建一個純css3下拉菜單，使用僞元素:before和:after創建一個樣式化的工具提示箭頭，該箭頭顯示在嵌套0​​的「下拉」，當你懸停在頂層li。

我的問題是，只要我的鼠標離開li我菜單消失。它不會允許我移動鼠標並將鼠標懸停在嵌套的li上，我認爲這是因爲我在嵌套的li和頂層li之間存在差距，這個差距用於樣式化的僞元件工具提示箭頭。

我有一個我在做這個jfiddle的例子，它會給你更好的主意。

http://jsfiddle.net/46andtool/dS6G7/1/

HTML

<nav> 
    <ul id="ddmenu"> 
    <li><a href="index.html">Homepage</a></li> 
    <li><a href="#">About</a> 
     <ul> 
     <li><a href="#">Our Mission</a></li> 
     <li><a href="#">The Staff</a></li> 
     <li><a href="#">History</a></li> 

     </ul> 
    </li> 
    <li><a href="#">Services</a> 
     <ul> 
     <li><a href="#">Donations</a></li> 
     <li><a href="#">Volunteering</a></li> 
     <li><a href="#">Housing</a></li> 
     </ul> 
     </li> 

    <li><a href="#">International</a> 
     <ul> 
     <li><a href="#">China</a></li> 
     <li><a href="#">Japan</a></li> 
     <li><a href="#">Canada</a></li> 
     <li><a href="#">Australia</a></li> 
     <li><a href="#">South America</a></li> 
     </ul> 
    </li> 
    <li><a href="contact.php">Contact Us</a></li> 
    </ul> 
</nav> 

CSS

#ddmenu { 
    display: block; 
    width: 100%; 
    height: 80px; 
    margin: 0 auto; 
    padding: 0 2px; 
    padding-top: 0px; 
    background: #fff; 
    border-radius: 1px; 
    border: 1px solid rgba(0, 0, 0, 0.15); 
    border-left: 0px; 
    border-right: 0px; 
    box-shadow: 0 1px 1px rgba(20, 20, 20, 0.2); 
    cursor: pointer; 
    outline: none; 
    font-weight: bold; 
    color: #8aa8bd; 
} 

#ddmenu li { display: block; position: relative; float: left; font-size: 1.45em; text-shadow: 1px 1px 0 #fff; border-right: 1px solid #dae0e5; } 

#ddmenu li a { 
    display: block; 
    float: left; 
    padding: 0 12px; 
    line-height: 78px; 
    font-weight: bold; 
    text-decoration: none; 
    color: #FF0000; 
    -webkit-transition: all 0.2s linear; 
    -moz-transition: all 0.2s linear; 
    -o-transition: all 0.2s linear; 
    transition: all 0.2s linear; 
} 
#ddmenu li:hover > a { color: #565051; background: #C0C0C0; 



} 


#ddmenu li:hover ul { 

    display: block; 

} 


#ddmenu li a:hover ul { 

    display: block; 
} 

#ddmenu ul { 
    position: absolute; 
    top: 88px; 
    width: 130px; 
    background: #fff; 
    display: none; 
    margin: 0; 
    padding: 7px 0; 
    list-style: none; 
    border-radius: 3px; 
    border: 1px solid rgba(0, 0, 0, 0.2); 
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); 
} 


#ddmenu ul:after:hover ul { 
    display: block; 

} 


#ddmenu ul:before:hover ul { 

    display: block; 

} 
/* tooltip arrow */ 
#ddmenu ul:after { 
    content: ""; 
    width: 0; 
    height: 0; 
    position: absolute; 
    bottom: 100%; 
    left: 8px; 
    border-width: 1px 8px 8px 8px; 
    border-style: solid; 
    border-color: #fff transparent; 

} 


#ddmenu ul:before { 
    content: ""; 
    width: 0; 
    height: 0; 
    position: absolute; 
    bottom: 100%; 
    left: 4px; 
    border-width: 0 10px 10px 10px; 
    border-style: solid; 
    border-color: rgba(0, 0, 0, 0.1) transparent; 
} 

#ddmenu ul li { 
    display: block; 
    width: 100%; 
    font-size: 0.9em; 
    text-shadow: 1px 1px 0 #fff; 
} 

#ddmenu ul li a { 
    display: block; 
    width: 100%; 
    padding: 6px 7px; 
    line-height: 1.4em; 
    -webkit-transition: all 0.2s linear; 
    -moz-transition: all 0.2s linear; 
    -o-transition: all 0.2s linear; 
    transition: all 0.2s linear; 
} 
#ddmenu ul li a:hover { 


    background: #C0C0C0; 
} 

Answer 1

你必須填補了國內空白。

添加透明僞元素，例如第一級的李標籤的孩子的：

#ddmenu li:after { 
    content: " "; 
    position: absolute; 
    bottom: -12px; 
    left: 0; 
    width: 100%; 
    height: 12px; 
    background: transparent; 
} 

Here is the updated jsFiddle

Answer 2

我想這是因爲我有嵌套李時珍和頂層之間的間隙李的

的UL嵌套INT之間頂級LI，更確切地說，但是，這當然是問題所在。所以要解決它，你將不得不縮小差距。

在這種特定情況下做到這一點的一個簡單方法可能是給頂級LI a border-bottom:10px solid transparent。這樣一來，你的LI進一步拉伸，直到在絕對定位UL開始，所以沒有差距更多 - 並且因爲邊界是透明的，不存在視覺效果 ;-)

http://jsfiddle.net/dS6G7/3/

---

而這選擇

#ddmenu li a:hover ul { … } 

沒有任何意義順便說一句，因爲你不」您的UL嵌套在那些A元素中。