HTML/CSS：我如何正確設置此菜單的樣式？

我正在學習如何創建CSS菜單而不使用浮動。到目前爲止，我有一個部分「工作」菜單。但是，主菜單的邊框是分開的。此外，子菜單的邊框大小減半，懸停的背景顏色不起作用。同時，子子菜單不起作用HTML/CSS：我如何正確設置此菜單的樣式？

我也試圖用.menu .submenu .sub-submenu類簡化CSS代碼。

HTML

<!DOCTYPE html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>Title: Navigation menu</title> 

    <link rel="stylesheet" type="text/css" href="menu.css"> 
</head> 
<body> 

<!-- START: menu --> 
<ul id="nav"> 
    <li class="menu"><a href="#">Home</a></li> 
    <li class="menu"><a href="#">Main Menu 2</a> 
     <ul class="submenu"> 
      <li><a href="#">Sub Menu 2.1</a></li> 
      <li><a href="#">Sub Menu 2.2</a></li> 
      <li><a href="#">Sub Menu 2.3</a> 
       <ul> 
       <li><a href="#">Sub-Sub Menu 2.3.1</a></li> 
       <li><a href="#">Sub Menu 2.3.2</a></li> 
       <li><a href="#">Sub Menu 2.3.</a></li> 
       </ul> 
      </li> 
      <li><a href="#">Sub Menu 2.4</a></li> 
      <li><a href="#">Sub Menu 2.5</a></li> 
      <li><a href="#">Sub Menu, Some Sample Text 2.6</a></li> 
      <li><a href="#">Sub Menu, Sample Text 2.7</a></li> 
     </ul> 
    </li> 
    <li class="menu"><a href="#">Main Menu 3</a> 
     <ul class="submenu"> 
      <li><a href="#">Sub Menu 3.1</a></li> 
      <li><a href="#">Sub Menu 3.2</a></li> 
      <li><a href="#">Sub Menu 3.3</a></li> 
      <li><a href="#">Sub Menu 3.5</a></li> 
      <li><a href="#">Sub Menu 3.6</a></li> 
      <li><a href="#">Sub Menu 3.7</a></li> 
     </ul> 
    </li> 
    <li class="menu"><a href="#">Main Menu 4</a> 
     <ul class="submenu"> 
      <li><a href="#">Sub Menu 4.1</a></li> 
      <li><a href="#">Sub Menu 4.2</a></li> 
      <li><a href="#">Sub Menu Sample Text 4.3</a></li> 
      <li><a href="#">Sub Menu 4.4</a></li> 
      <li><a href="#">Sub Menu 4.5</a></li> 
      <li><a href="#">Sub Menu 4.6</a></li> 
      <li><a href="#">Sub Menu 4.7</a></li> 
      <li><a href="#">Sub Menu 4.8</a></li> 
     </ul>  
    </li> 
    <li class="menu"><a href="#">Menu 5</a></li> 
    <li class="menu"><a href="#">Menu 6</a></li> 
    <li class="menu"><a href="#">Contact</a></li> 
</ul> <!-- /#menu --> 
<!-- END: menu --> 


</body> 
</html>

CSS

@charset "utf-8"; 
#nav { 
    background-color: #000; 
    position: relative; 

    font-family: Arial, Helvetica, sans-serif; 
    font-size: 0.975em; 
    text-align: left; 
    display: block; 
    border: 1px dotted #cccccc; 
    padding: 0; 
    margin: 0; 
} 
#nav a { 
    color: #fff; 
    text-decoration: none; 
} 
#nav li { 
    color: #fff; 
    text-align: left; 

    width: 110px; 
    border: 1px solid #CCCCCC; 
    list-style-type: none; 
    padding: 0; 
    margin: 0; 
    display: inline-block; 
} 

/*Sub menu */ 
#nav li ul { 
    color: navy; 
    text-align: left; 
    list-style-type: none; 

    width: 200px; 
    border: 1px solid #000; 
    padding: 0; 
    margin: 0; 

    display: none; 
    position: absolute; 
    background-color: #990000; 
} 
#nav li ul a { 
    display: inline-block; 
} 
#nav li:hover ul { 
    visibility: visible; 
    display: block; 
    background-color: #E6B800; 
} 
#nav li:hover ul li { 
    background-color: #E6B800; 
} 

/*Sub-sub menu */ 
#nav li ul li ul li a { 
    display: none; 
} 
#nav li ul li ul li:hover { 
    visibility: visible; 
    display: block; 
    background-color: #E6B800; 
} 
#nav li ul li ul li:hover ul li { 
    background-color: #E6B800; 
}

來源

2012-04-27 Omar

主菜單邊框分離，因爲<li> s爲直列塊用他們之間的白色空間。內聯塊的工作方式與文本流中的單詞相同，因此，任何白色空格（例如您在其中的換行符）將被解釋爲文本空間字符。在保持內聯塊的唯一方法是將所有的<li>都放在一行中，其間用零空白。你爲什麼要避免浮動？那將是你最好的選擇。

子菜單項是半間距的，因爲容器的寬度爲200px，但每個項目都是內嵌塊，沒有指定寬度。將它們製作成display:block，它們將展開到容器的邊緣。

是否應用您的子和子子菜單類，比起這麼多的嵌套選擇器更容易看到和使用它們。

另外：使用德子選擇語法，如：ul#nav > li它將應用相關的樣式只中的子項，而不是盛大，兒童等

UPDATE
在asnwer到mcknz'的問題，我會把float:left#nav li而不是display:inline-block。這解決了兩個問題：

菜單項之間的無意間距將消失，無論HTML中是否有空格。您現在可以使用邊距精確控制它們的間距。

IE7將不適用inline-block的列出項 - 或本身不在線的任何元素（參見：http://fourwhitefeet.com/2009/02/css-display-inline-block-in-ie7/）

重要提示：您需要明確，現在指定#nav的高度，因爲浮動元素的非浮動父母會崩潰（請參閱：Why do non-floating parents of floating elements collapse?）。

...另外：您可以安全地刪除後續的text-align: left;聲明，只要您將其應用於#nav，此屬性將繼承到所有嵌套元素，當然，除非您有一箇中間層文本與左或中間對齊。繼承的屬性在這裏列出：http://www.communitymx.com/content/article.cfm?cid=2795d

來源

2012-04-27 22:06:52 Faust

'@ faust'爲什麼你想避免浮動？...因爲我學習CSS，浮動是一個真正的頭痛> _ <叫我愚蠢，但我寧願避免他們現在，並與我更合乎邏輯的工作。 -Floats有時通過將物體放置在我不希望它們位於的位置來弄髒事物。出於好奇，你的浮動解決方案是什麼？ – Omar 2012-04-27 23:01:12

的紐林e在菜單中的每個列表項作爲空間之後。你可以改變，使所有的人都在同一行，也可以使用意見，如果您仍然希望他們的標記在視覺上分開：

<li class="menu"><a href="#">Home</a></li><!-- 
--><li class="menu"><a href="#">Main Menu 2</a>

來源

2012-04-27 22:06:42 mcknz

HTML/CSS：我如何正確設置此菜單的樣式？

回答

相關問題