HTML/CSS：如何正确设置此菜单的样式？答案

【问题标题】：HTML/CSS: how do I properly style this menu?HTML/CSS：如何正确设置此菜单的样式？
【发布时间】：2017-08-01 11:03:31
【问题描述】：

我正在学习创建没有浮动的 CSS 菜单。到目前为止，我有一个部分“工作”菜单。但是，主菜单的边框是分开的。此外，子菜单的边框大小减半，悬停的背景颜色不起作用。同时子子菜单不工作

我也在尝试使用 .menu .submenu .sub-submenu 类来简化 CSS 代码。

jsFiddle: http://jsfiddle.net/vn64H/1/

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

【问题讨论】：

标签： css html menu stylesheet submenu

【解决方案1】：

主菜单边框是分开的，因为<li>s 是内联块，它们之间有空格。内联块的工作方式类似于文本流中的单词，因此任何空格（例如您在其中的换行符）将被解释为文本空间字符。在保持它们内联块的同时解决此问题的唯一方法是将所有<li> 放在一行中，其间空白为零。为什么要避免浮动？那将是您的最佳选择。

子菜单项是半间距的，因为容器的宽度为 200px，但每个项都是一个内联块，没有指定宽度。将它们设为display:block istead，它们将扩展到容器的边缘。

应用您的子菜单和子子菜单类，这将比许多嵌套选择器更容易查看和使用。

另外：使用子选择器语法，例如：ul#nav > li 它将仅将相关样式应用于子项，而不应用于孙子项等。

更新
在回答 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

【讨论】：

@faust 为什么要避免使用浮点数？...因为我正在学习 css，所以浮点数真的很头疼 >__

【解决方案2】：

菜单中每个列表项后的换行符充当空格。您可以更改以将它们全部放在一行上，或者如果您仍然希望它们在标记中视觉上分开，您可以使用 cmets：

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

【讨论】：