Question

我的子菜单有点问题。当它悬停在父菜单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);
}

Answer 1

如果我正确理解了问题，那么当您将鼠标悬停在链接之外时，您就会遇到麻烦＆＃34; Blog Styles＆＃34;在相同的y坐标但不同的x坐标中。那是因为元素＆＃34; li＆＃34;当前具有屏幕宽度，因此只要您的y坐标相同，就可以将鼠标悬停在任何x坐标上。

你可以通过提供你的＆＃34; li＆＃34;来解决这个问题。 element一个宽度，用于指定较小位置的悬停区域。例如 -

    <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，但添加了类＆＃34; .test＆＃34;宽度 -

.test {
   width: 100px;
}

将类的宽度设置为100 px，只允许您将鼠标悬停在列表区域内。

子菜单显示何时悬停在其区域css

和css

1 个答案: