悬停在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覆盖它上面的菜单

回答

相关问题