1

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

2 回答 2

3

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

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

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

另外：使用子选择器语法，例如：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 的高度，因为浮动元素的非浮动父级会崩溃（请参阅：为什么浮动元素的非浮动父级会崩溃？）。

    text-align: left;...另外：一旦将其应用于，您可以安全地删除后续声明#nav，此属性将继承到所有嵌套元素，当然，除非您有一个中间层，其中文本左对齐或居中对齐。此处列出了继承的属性：http: //www.communitymx.com/content/article.cfm?cid=2795d

    于 2012-04-27T22:06:52.037 回答
    1

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

    <li class="menu"><a href="#">Home</a></li><!--
--><li class="menu"><a href="#">Main Menu 2</a>
    于 2012-04-27T22:06:42.030 回答