我的子菜单有点问题,将鼠标悬停在父菜单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,这只会让您将鼠标悬停在列表区域内。

09-10 13:36
查看更多