Question

我有一个简单的垂直悬停菜单，即使我不将鼠标悬停在任何按钮上但光标位于其右侧，它会显示子菜单。当没有子菜单时，主菜单按钮开始闪烁。我不完全确定发生了什么以及为什么会发生这种情况。这是link以显示我的意思。

编辑：谢谢您的回复！现在我有一个不同/几乎相同的问题。菜单不再令人惊慌，但现在有一个栏杆伸出它，它仍然打开子菜单而不必将鼠标悬停在父菜单上。链接到图片here。

这是我的HTML

    <div id="divMenu">
<ul>
    <li><a href="#">Home1</a></li>
    <li><a href="#">Home2</a>
            <ul>
        <li><a href="#">Homed</a></li>
        <li><a href="#">Homee</a></li>
        <li><a href="#">Homef</a></li>
    </ul></li>
    <li><a href="#">Home3</a>
            <ul>
        <li><a href="#">Homeg</a></li>
        <li><a href="#">Homeh</a></li>
        <li><a href="#">Homei</a></li>
    </ul></li>
    <li><a href="#">Home4</a></li>
    <li><a href="#">Home5</a>
            <ul>
        <li><a href="#">Homej</a></li>
        <li><a href="#">Homek</a></li>
        <li><a href="#">Homel</a></li>
    </ul></li>
    <li><a href="#">Home6</a></li>
</ul>


</div>

我的CSS

<style type="text/css">

#divMenu {
    margin: 0px;
    padding: 0px;
}

#divMenu ul {
    margin: 0px;
    padding: 5px 15px;
}

#divMenu li {
    margin: 4px;
    padding: 4px;
}

#divMenu li li {
    margin: 0px;
    padding: 0px;
}

#divMenu {
    width: 150px;
    height: 27px;
}

#divMenu ul {
    line-height: 25px;
}

#divMenu li {
    list-style: none;
    position: relative;
    background: #000;
}

    #divMenu li li {
        list-style: none;
        position: relative;
        background: #000;
        left: 95px;
        top: -30px;
    }


#divMenu ul li a {
    width: 150px;
    height: 25px;
    padding: 5px 5px;
    display: inline-block;
    letter-spacing: 6px;
    text-decoration: none;
    text-align: left;
    font-family: Quicksand Light;
    color: #ffffff;
    border: 0px;
}

#divMenu ul ul {
    position: absolute;
    visibility: hidden;
    top: 27px;
}

#divMenu ul li:hover ul {
    visibility: visible;
}

#divMenu li:hover {
    background-color: #fff;
}

#divMenu ul li:hover > a {
    background-color: #fff;
    color: #000;
}

#divMenu a:hover {
    font-weight: normal;
    color: #000;
}
</style>

Answer 1

只需从您的风格中删除static和width:0px中的#divMenu ul li:hover > a。

Answer 2

块跳闸的问题是由于下面块中的宽度：

#divMenu ul li a {
width: 150px;
height: 25px;
padding: 5px 5px;
display: inline-block;
letter-spacing: 6px;
text-decoration: none;
text-align: left;
font-family: Quicksand Light;
color: #ffffff;
border: 0px;
}

只需删除该宽度即可。

Answer 3

由于您应用于链接的零宽度。你真的不需要那个。

#divMenu ul li:hover > a {
    /*width: 0px;*/
    background-color: #fff;
    color: #000;
}

#divMenu a:hover {
    /*width: 0px;*/
    font-weight: normal;
    color: #000;
}

＆＃13;

#divMenu {
    margin: 0px;
    padding: 0px;
}

#divMenu ul {
    margin: 0px;
    padding: 5px 15px;
}

#divMenu li {
    margin: 4px;
    padding: 4px;
}

#divMenu li li {
    margin: 0px;
    padding: 0px;
}

#divMenu {
    width: 150px;
    height: 27px;
}

#divMenu ul {
    line-height: 25px;
}

#divMenu li {
    list-style: none;
    position: relative;
    background: #000;
}

    #divMenu li li {
        list-style: none;
        position: relative;
        background: #000;
        left: 95px;
        top: -30px;
    }


#divMenu ul li a {
    width: 150px;
    height: 25px;
    padding: 5px 5px;
    display: inline-block;
    letter-spacing: 6px;
    text-decoration: none;
    text-align: left;
    font-family: Quicksand Light;
    color: #ffffff;
    border: 0px;
}

#divMenu ul ul {
    position: absolute;
    visibility: hidden;
    top: 27px;
}

#divMenu ul li:hover ul {
    visibility: visible;
}

#divMenu li:hover {
    background-color: #fff;
}

#divMenu ul li:hover > a {
    /*width: 0px;*/
    background-color: #fff;
    color: #000;
}

#divMenu a:hover {
    /*width: 0px;*/
    font-weight: normal;
    color: #000;
}

＆＃13;

<div id="divMenu">
<ul>
    <li><a href="#">Home1</a></li>
    <li><a href="#">Home2</a>
            <ul>
        <li><a href="#">Homed</a></li>
        <li><a href="#">Homee</a></li>
        <li><a href="#">Homef</a></li>
    </ul></li>
    <li><a href="#">Home3</a>
            <ul>
        <li><a href="#">Homeg</a></li>
        <li><a href="#">Homeh</a></li>
        <li><a href="#">Homei</a></li>
    </ul></li>
    <li><a href="#">Home4</a></li>
    <li><a href="#">Home5</a>
            <ul>
        <li><a href="#">Homej</a></li>
        <li><a href="#">Homek</a></li>
        <li><a href="#">Homel</a></li>
    </ul></li>
    <li><a href="#">Home6</a></li>
</ul>


</div>

＆＃13;

悬停菜单对子菜单无法正常工作

3 个答案: