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

我正在玩弄一些HTML5和CSS3，现在尝试构建一个静态页面。目前正在导航菜单上使用其中一个项目作为下拉菜单。当我将鼠标悬停在下拉项目上方时，该项目正在左右推动项目。HTML：为什么我的下拉菜单正在扩展？

有人可以向我解释为什么会发生这种情况吗？我有很少的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; 
}

来源

2014-11-08 Supercell

我认为这个问题是你的二级菜单UL更宽比你的主要包含它的菜单LI。当嵌入式UL从display：none切换到display：block时，它会增加父LI的宽度。

一对夫妇可能的解决方案：指定你的主菜单LIS的宽度，如：

nav ul li { 
    float: left; 
    margin: 0 20px; 
    width: 200px; 
}

使用的位置是：绝对的采取嵌入式UL出来的版图流程，例如：

nav ul ul { 
    display: none; 
    position: absolute; 
}

虽然这两个选项都与您当前的布局有一些问题，并且需要您重新修改一些内容。希望这有助于您指出正确的方向。

来源

2014-11-08 21:53:57

是的，两者都有效！谢谢。 – Supercell 2014-11-08 22:00:37

像波纹管尝试通过：

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

来源

2014-11-08 21:41:00

它的第一个ul样式，试过后告诉我。 – 2014-11-08 21:41:54

不起作用。它仍然推动几个像素的项目。 – Supercell 2014-11-08 21:44:22

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

回答

相关问题