Question

我刚尝试为导航设计一个下拉菜单。不幸的是，当我将导航栏中的下拉按钮悬停时，他们整个导航和下拉列表现在都在闪烁。当我尝试点击它时，下拉菜单也会消失。

我无法向您提供我的代码，因为Stackoverflow将其直接转换为HTML（不知道为什么），所以我只能给您一个指向我的测试页的链接：http://keinkopf.de/designs/1/

编辑：

HTML

<nav>
<ul>
<li><a href="#" id="block1">Start</a></li>
<li><a href="#" id="block2">Themen</a>
<ul>
<br />
<li><a href="#">1</a></li><br />
<li><a href="#">2</a></li><br />
<li><a href="#">3</a></li><br />
<hr /><hr />
</ul>
</li>
<li><a href="#" id="block3">3s</a></li>
</ul>
</nav>

CSS

        ul li ul{
            display: none;

            background-color: #000000;
            width: 400px;
            margin-top: 40px;
            float: left;
        }

    ul li ul li{
            margin-left: 10px;
        }

        ul li:hover ul{
            display: block; /* display the dropdown */
        }

    ul {
        padding: 0;
        list-style: none;
    }

    ul li ul hr{
            border-color: #FFFFFF;
            border-width: thin;
            border-style: solid;
        }

li {
    display: inline;
    margin-right: -1px;


}



#block1 {
    background-color: #000000;
    padding-top: 3px;
    padding-bottom: 3px;
    padding-right: 30px;
    padding-left: 30px;

}

#block1:hover {
    background-color: #FFFFFF;
     padding-top: 2px;
    padding-bottom: 2px;
    padding-right: 29px;
    padding-left: 29px;
    color: #000000;
    border-color: #000000;
    border-style: solid;
    border-width: 1px;
}

#block2 {
    background-color: #FFFFFF;
     padding-top: 2px;
    padding-bottom: 2px;
    padding-right: 29px;
    padding-left: 29px;
    color: #000000;
    border-color: #000000;
    border-style: solid;
    border-width: 1px;

}

#block2:hover {
   background-color: #000000;
    color: #FFFFFF;
}

#block3 {
    background-color: #FFFFFF;
    padding-top: 2px;
    padding-bottom: 2px;
    padding-right: 29px;
    padding-left: 29px;
    color: #000000;
    border-color: #000000;
    border-style: solid;
    border-width: 1px;
}

#block3:hover {
    background-color: #000000;
    color: #FFFFFF;
}

nav a {
    text-decoration: none;
    color: #FFFFFF;
    font-family: 'Lato', Arial;
    font-size: 15pt;
}

nav {
    margin-top: 39px;


}

hr {

    border-color: #000000;
    border-width: 2px;
}

Answer 1

如果我可以推荐使用绝对位置，那么它不会影响其他对象，而不是使用边距使用填充。

ul li ul{
    position: absolute;
    padding-top: 40px;  
}

如果你想在bar和drop down之间有一些空闲空间，那么只需添加一些div。

Answer 2

你必须在'li'（菜单）position内向父母absolute提供'{'}''''（'d''下拉菜单。

每次将鼠标悬停在菜单项上时，菜单都会显示，菜单项的位置也会发生变化。这就是它闪烁的原因。

最重要的是，您应该从'ul li ul'中移除margin-top并使列表项li li inline-block而不是内联，以便下拉列表显示在listitem下方。

我已经创建了代码夹here

Answer 3

我认为它与您的标签的位置有关。我所说的是：当你的鼠标悬停在标签上时，它显示其余的子标签，因此将标签推离鼠标，因此关闭菜单或在你的情况下导致闪烁。

下拉菜单和导航问题

3 个答案: