懸停在CSS覆蓋它上面的菜單

我有一個下拉菜單很好地工作，但我注意到的問題是，如果你懸停與子元素的鏈接，它打開菜單，但鏈接，然後變得不可點擊下半部分的菜單。懸停在CSS覆蓋它上面的菜單

<div class="desktop_navigation"> 
    <ul> 
     <li><a href="#">Link 1</a></li> 
     <li><a href="#">Link 2</a> 
      <ul> 
       <li><a href="#">Link 2 child</a></li> 
      </ul> 
     </li> 
     <li><a href="#">Link 3</a></li> 
    </ul> 
</div>

這對菜單結構。子元素是的子版本<li>，然後使用CSS隱藏，直到其父母<li>被徘徊。

以下jFiddle包括我使用所有的CSS和我目前遇到的問題的工作示例：

https://jsfiddle.net/nrzfa49s/

來源

2017-02-15 Kaboom

你.desktop_navigation ul li ul是繼承其父ul（.desktop_navigation ul）的padding-top: 30px這正在覆蓋父鏈接（鏈接2），使其無法點擊。

解決您的問題，更新這些樣式：

.desktop_navigation ul li ul { 
    list-style: none; 
    display: none; 
    padding-top: 0; /*remove the 30px padding*/ 
} 

.desktop_navigation ul li:hover ul { 
    display: block; 
    position: absolute; 
    top: 100%; /*set your top value to be more dynamic based on the height of the parent*/ 
    z-index: 890; 
}

這裏是一個fiddle demoing這一解決方案。

通常，當你風格的菜單這樣的建議造型因爲嵌套（即.desktop_navigation > ul這樣可以防止孩子ul繼承填充）

來源

2017-02-15 20:39:45 zgood

花了一些時間菜單元素時要使用的>，但問題就在這裏：

.desktop_navigation ul { 
    list-style: none; 
    padding: 0; 
    margin: 0; 
    padding-top: 30px; //remove this line 
}

來源

2017-02-15 20:40:43 Omnitored

你只想要padding-top爲ul的是父/頂級菜單上。然後，如果您從嵌套菜單中刪除top屬性，它們將顯示在頂層菜單中的鏈接之後。

.desktop_navigation a { 
 
\t color: #ccc; 
 
\t text-decoration: none; 
 
\t display: inline-block; 
 
\t padding: 12px; 
 
\t transition: all 0.5s ease; 
 
\t -webkit-transition: all 0.5s ease; 
 
\t -moz-transition: all 0.5s ease; 
 
\t -o-transition: all 0.5s ease; 
 
} 
 

 
.desktop_navigation ul li:hover a { 
 
\t color: #fff; 
 
\t background: #444; 
 
\t text-decoration: none; 
 
\t display: inline-block; 
 
\t z-index: 1002; 
 
\t padding: 12px; 
 
\t transition: all 0.5s ease; 
 
\t -webkit-transition: all 0.5s ease; 
 
\t -moz-transition: all 0.5s ease; 
 
\t -o-transition: all 0.5s ease; 
 
} 
 

 
.desktop_navigation ul li ul li a:link, 
 
.desktop_navigation ul li ul li a:visited, 
 
.desktop_navigation ul li ul li a:active { 
 
\t z-index: 1001; 
 
\t width: 100%; 
 
\t display: block; 
 
\t color: #444; 
 
\t background: #fff; 
 
\t transition: all 0.5s ease; 
 
\t -webkit-transition: all 0.5s ease; 
 
\t -moz-transition: all 0.5s ease; 
 
\t -o-transition: all 0.5s ease; 
 
} 
 

 
.desktop_navigation ul li ul li a:hover { 
 
\t width: 100%; 
 
\t display: block; 
 
\t color: #111; 
 
\t z-index: 1002; 
 
\t background: #ccc; 
 
\t transition: all 0.5s ease; 
 
\t -webkit-transition: all 0.5s ease; 
 
\t -moz-transition: all 0.5s ease; 
 
\t -o-transition: all 0.5s ease; 
 
} 
 

 
.desktop_navigation ul { 
 
\t list-style: none; 
 
\t padding: 0; 
 
\t margin: 0; 
 
} 
 

 
.desktop_navigation > ul { 
 
    padding-top: 30px; 
 
} 
 

 
.desktop_navigation ul li { 
 
\t display: inline-block; 
 
\t position: relative; 
 
\t padding: 0; 
 
\t margin: 0; 
 
\t z-index: 1002; 
 
} 
 

 
.desktop_navigation ul li ul { 
 
\t list-style: none; 
 
\t display: none; 
 
} 
 

 
.desktop_navigation ul li:hover ul { 
 
\t display: block; 
 
\t position: absolute; 
 
\t z-index: 890; 
 
} 
 

 
.desktop_navigation ul li ul li { 
 
\t float: none; 
 
\t position: relative; 
 
\t min-width: 180px; 
 
\t z-index: 890; 
 
}

\t \t \t \t \t <div class="desktop_navigation"> 
 
\t \t \t \t \t \t <ul> 
 
\t \t \t \t \t \t \t <li><a href="#">Link 1</a></li> 
 
\t \t \t \t \t \t \t <li> 
 
\t \t \t \t \t \t \t \t <a href="#">Link 2</a> 
 
\t \t \t \t \t \t \t \t <ul> 
 
\t \t \t \t \t \t \t \t \t <li><a href="#asdf">Link 2 child</a></li> 
 
\t \t \t \t \t \t \t \t </ul> 
 
\t \t \t \t \t \t \t </li> 
 
\t \t \t \t \t \t \t <li><a href="#">Link 3</a></li> 
 
\t \t \t \t \t \t </ul> 
 
\t \t \t \t \t </div>

來源

2017-02-15 20:42:15

懸停在CSS覆蓋它上面的菜單

回答

相關問題