Question

我的导航设备出现问题，当您将鼠标悬停在＆＃34;匹配＆＃34;时，我会尝试创建一个下拉菜单。链接。每次我将鼠标悬停在链接上时，列表将保留在所述链接下方并破坏导航栏的外观。任何帮助将不胜感激

HTML

<nav>
    <span class= "navbar-button"></span>
    <ul class="navbar">
        <li><a href="index.html">Home</a></li>
        <li><a href="#">Gallery</a></li>
        <li><a href="#">Match</a>
            <ul>
                <li><a href="#">City</a></li>
                <li><a href="#">Coastal</a></li>
                <li><a href="#">Rural</a></li>
            </ul>
        </li>
    </ul>
</nav>

CSS

body{
padding: 0;
margin: 0;
font-family: 'main';
}

.navbar {
list-style: none;
background-color: #333;
color: #fff;
margin: 0;
text-align: center;
}

.navbar > li {
display: inline-block;
padding: 1.3% 2%;

}

.navbar > li:hover {
background-color: #585858;

}

.navbar > li > a{
text-decoration: none;
font-size: 30px;
color: #fff;

}

.navbar li ul {
display: none;
}

.navbar li:hover ul{
display: block;

}

Answer 1

你需要使用absolute定位将其从容器中分离出来，这样它就不会破坏其余的元素：

.navbar li ul {
  position: absolute; 
  display: none;
  background-color: #333;
  margin: 0;
  text-align: center;
  padding: 20px;
}

务必将其父级设为position: relative，否则body将成为其容器：

.navbar > li {
  position: relative;
  display: inline-block;
  padding: 1.3% 2%;
}

JSFIDDLE

Answer 2

将位置绝对添加到：.navbar li ul

导航下拉菜单问题

2 个答案: