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：爲什麼我的下拉菜單正在擴展？

回答

相關問題