我的子菜单有点问题,将鼠标悬停在父菜单li
上时应显示
但它也显示鼠标何时悬停在其区域上。
以下是第一个屏幕截图:它可以正常工作
下面是第二个。将鼠标悬停在子菜单上的列表项上时会显示子菜单
现在介绍html代码
<nav class="header-navigation">
<ul>
<li><a href="">Home</a></li>
<li>
<a href="">Blog Styles</a>
<ul>
<li><a href="">Image Post</a></li>
<li><a href="">audio post</a></li>
</ul>
</li>
<li>
<a href="">Level 1</a>
</li>
</ul>
</nav>
和CSS
nav.header-navigation ul > li > ul{
background: #fff;
box-shadow: 0px 2px 15px rgba(0,0,0,0.1);
position: absolute;
z-index: 999;
width: auto;
top: 21px;
white-space: nowrap;
padding: 15px 17px 13px;
margin-top: 18px;
left: 0;
visibility: hidden;
opacity: 0;
transform: translateY(10px);
-webkit-transform: translateY(10px);
-moz-transform: translateY(10px);
-ms-transform: translateY(10px);
-o-transform: translateY(10px);
transition: all .3s ease;
-moz-transition: all .3s ease;
-webkit-transition: all .3s ease;
-o-transition: all .3s ease;
-ms-transition: all .3s ease;
}
nav.header-navigation > ul > li:hover > ul{
visibility: visible;
opacity: 1;
transform: rotate(0deg) translateY(0px);
-webkit-transform: rotate(0deg) translateY(0px);
-moz-transform: rotate(0deg) translateY(0px);
-ms-transform: rotate(0deg) translateY(0px);
-o-transform: rotate(0deg) translateY(0px);
}
nav.header-navigation > ul > li > ul > li:hover > ul{
visibility: visible;
opacity: 1;
transform: rotate(0deg) translateY(0px);
-webkit-transform: rotate(0deg) translateY(0px);
-moz-transform: rotate(0deg) translateY(0px);
-ms-transform: rotate(0deg) translateY(0px);
-o-transform: rotate(0deg) translateY(0px);
}
最佳答案
如果我正确理解了该问题,则在将鼠标悬停在链接“博客样式”之外时会遇到麻烦,就像在相同的y坐标但在不同的x坐标中一样。这是因为元素“ li”当前具有屏幕的宽度,因此,只要y坐标相同,就可以将鼠标悬停在任何x坐标上。
您可以通过为您的“ li”元素设置一个宽度来解决此问题,该宽度将将悬停区域指定到较小的位置。例如 -
<ul>
<li><a href="">Home</a></li>
<li class = "test">
<a href="">Blog Styles</a>
<ul>
<li><a href="">Image Post</a></li>
<li><a href="">audio post</a></li>
</ul>
</li>
<li>
<a href="">Level 1</a>
</li>
</ul>
相同的CSS,但添加了带有宽度的类“ .test”-
.test {
width: 100px;
}
将类的宽度设置为100 px,这只会让您将鼠标悬停在列表区域内。