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：我如何正确设置此菜单的样式？

回答

相关问题