我正在尝试一些 HTML5 和 CSS3，并尝试暂时构建一个静态页面。 目前正在开发导航菜单，其中一项是下拉菜单。 当我将鼠标悬停在下拉元素上方时，该元素会将其左侧和右侧的元素推开。
有人可以向我解释一下为什么会发生这种情况吗？我几乎没有 HTML 或 CSS 经验，我刚刚开始将一些东西放在一起。
CSS 基于互联网上许多用于制作下拉导航菜单的教程。我已将大部分代码精简为“非常基本”，以使其正常工作。
编辑:也欢迎任何使 CSS 更简洁的提示。
HTML:
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<nav role="navigation" class="nav-menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Services</a>
<ul>
<li><a href="#">Design</a></li>
<li><a href="#">Development</a></li>
<li><a href="#">User Experience</a></li>
</ul>
</li>
<li><a href="#">About Us</a></li>
</ul>
</nav>
</header>
<div id="content">
Content
</div>
<footer>
Footer
</footer>
</body>
CSS:
* {
padding: 0;
margin: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html {
font-size: 1em !important;
color: #000 !important;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
}
body {
background-color: #646464;
}
header {
background-color: #444;
margin: 0px;
border: 0px;
height: 2.55556em;
width: 100%;
}
#content {
margin: 0px;
border: 0px;
padding: 0px;
height: 70%;
}
footer {
margin: 0px;
border: 0px;
padding: 0px;
height: 30%;
background-color: white;
}
nav {
margin:0;
padding:0;
text-align:center;
}
nav ul {
display: inline-block;
list-style: none;
}
nav ul li {
float: left;
margin: 0 20px;
}
nav ul li a {
display: block;
margin: 10px 20px;
background: #444;
color: #fff;
text-decoration: none;
text-transform: uppercase;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul ul li {
float: none;
}
nav ul ul li a {
padding: 10px 20px;
margin: 0 20px;
}
最佳答案
我认为问题在于您的二级菜单 UL 比包含它的主菜单 LI 宽。当嵌入的 UL 从 display:none 切换到 display:block 时，它会增加父 LI 的宽度。
一些可能的解决方案: 指定主菜单 LI 的宽度，例如:
nav ul li {
float: left;
margin: 0 20px;
width: 200px;
}
使用position:absolute将嵌入的UL从布局流程中取出，例如:
nav ul ul {
display: none;
position: absolute;
}
不过，这两个选项都与您当前的布局存在一些问题，并且需要您稍微修改一下。希望这有助于为您指明正确的方向。
关于HTML:为什么我的下拉菜单会展开？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26822363/