Question

我正在学习创建没有花车的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;
}

Answer 1

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

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

应用子菜单和子子菜单类，这些类比很多嵌套选择器更容易查看和使用。

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

<强>更新
在回答mcknz的问题时，我会将float:left放在#nav li 而不是display:inline-block上。这解决了2个问题：

无论HTML中的空格如何，菜单项之间的意外间距都将消失。现在，您可以使用边距精确控制它们的间距。

IE7不会将内联块应用于列表项 - 或任何非本地内联的元素（请参阅：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

Answer 2

菜单中每个列表项后面的换行符充当空格。您可以更改为在一行中创建所有这些，或者如果您仍希望它们在标记中以可视方式分隔，则可以使用注释：

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

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

2 个答案: