Question

我正在玩一些HTML5和CSS3并尝试构建一个静态页面。目前正在使用导航菜单，其中一个项目是下拉菜单。当我将鼠标悬停在下拉项目上方时，该项目会左右推动项目。

有人可以向我解释为什么会这样吗？我的HTML或CSS经验很少，我刚开始把它放在一起。

CSS基于互联网上的许多教程，用于制作下拉导航菜单。我已将大部分代码删除到非常基本的＃34;让这个工作。

编辑：欢迎任何使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;
}

Answer 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;
}

但是，这两个选项都会对您当前的布局产生一些问题，并且需要您稍微重做一些事情。希望这有助于指导您朝着正确的方向发展。

Answer 2

尝试像bellow：

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

HTML：为什么我的下拉菜单会扩展？

2 个答案: