Question

我有一个下拉菜单，效果很好但是我注意到的问题是如果你将一个带有子元素的链接悬停，它会打开菜单，但链接会在下半部分的菜单上变得无法点击。< / p>

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

这是菜单的结构。子元素是主<ul>的子<li>，然后使用CSS隐藏，直到他们的父<li>悬停。

以下jFiddle将包含我正在使用的所有CSS以及我目前遇到的问题的工作示例：

https://jsfiddle.net/nrzfa49s/

Answer 1

您的.desktop_navigation ul li ul从其父padding-top: 30px（ul）继承.desktop_navigation ul，其中包含父链接（链接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。

通常在设置这样的菜单时，建议在设置菜单元素时使用>因为嵌套（即.desktop_navigation > ul这会阻止子ul继承填充）

Answer 2

花了一些时间，但问题在于：

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

Answer 3

您只希望padding-top的{{1}}位于父级/顶级菜单上。然后，如果从嵌套菜单中删除ul属性，它们将显示在顶级菜单中的链接之后。

top

.desktop_navigation a {
	color: #ccc;
	text-decoration: none;
	display: inline-block;
	padding: 12px;
	transition: all 0.5s ease;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
}

.desktop_navigation ul li:hover a {
	color: #fff;
	background: #444;
	text-decoration: none;
	display: inline-block;
	z-index: 1002;
	padding: 12px;
	transition: all 0.5s ease;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-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 {
	z-index: 1001;
	width: 100%;
	display: block;
	color: #444;
	background: #fff;
	transition: all 0.5s ease;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
}

.desktop_navigation ul li ul li a:hover {
	width: 100%;
	display: block;
	color: #111;
	z-index: 1002;
	background: #ccc;
	transition: all 0.5s ease;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
}

.desktop_navigation ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.desktop_navigation > ul {
  padding-top: 30px;
}

.desktop_navigation ul li {
	display: inline-block;
	position: relative;
	padding: 0;
	margin: 0;
	z-index: 1002;
}

.desktop_navigation ul li ul {
	list-style: none;
	display: none;
}

.desktop_navigation ul li:hover ul {
	display: block;
	position: absolute;
	z-index: 890;
}

.desktop_navigation ul li ul li {
	float: none; 
	position: relative;
	min-width: 180px;
	z-index: 890;
}

将鼠标悬停在它上面的css覆盖菜单中

3 个答案: