HTML：为什么我的下拉菜单在扩展？答案

【问题标题】：HTML: Why is my dropdown menu expanding?HTML：为什么我的下拉菜单在扩展？
【发布时间】：2014-11-08 21:36:01
【问题描述】：

我现在正在玩一些 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;
}

【问题讨论】：

标签： html css drop-down-menu nav

【解决方案1】：

我认为问题在于您的二级菜单 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;
}

不过，这两个选项都与您当前的布局存在一些问题，并且需要您进行一些修改。希望这有助于为您指明正确的方向。

【讨论】：

【解决方案2】：

尝试如下：

nav>ul { display: inline-block; list-style: none; }

【讨论】：

第一个ul风格，试了告诉我。
不起作用。它仍然将项目推开几个像素。