2

我正在构建一个只有 CSS 的两级水平导航栏，其相对于父级的子导航。所有菜单项都是内联的。根据“右”或“左”类，子导航与父导航对齐。到目前为止，这是我设法完成的：

html:

<body>
    <div class="navbar">
        <ul class="topnav left">
            <li>nav</li>
            <li>menu1
                <span class="subnav">
                    <ul class="subnav subnav-left">
                        <li>item1-1</li>
                        <li>item1-2</li>
                        <li>item1-3</li>
                    </ul>
                </span>
            </li>
            <li>menu2
                <span class="subnav">
                    <ul class="subnav subnav-left">
                        <li>item2-1</li>
                        <li>item2-2</li>
                        <li>item2-3</li>
                    </ul>
                </span>
            </li>
        </ul>
        <ul class="topnav right">
            <li class="right">menu3
                <span class="subnav subnav-right">
                    <ul class="subnav subnav-left">
                        <li>item3-1</li>
                        <li>item3-2</li>
                        <li>item3-3</li>
                    </ul>
                </span>
            </li>
            <li class="right">menu4
                <span class="subnav subnav-right">
                    <ul class="subnav subnav-left">
                        <li>item4-1</li>
                        <li>item4-2</li>
                        <li>item4-3</li>
                    </ul>
                </span>
            </li>
        </ul>
    </div>
</body>

CSS：

body {
    font-family: arial;
    margin: 0;
}

.navbar {
    height: 40px;
    background-color: black;
}

ul.topnav {
    margin: 0;
    padding: 0;
}

.subnav {
    position: absolute;
}

.subnav-right {
    right: 0;
}

ul.subnav {
    position: relative;
    margin: 4px 0 0 -8px;
    padding: 0;
    display: none;
}

ul.topnav  li{
    list-style: none;
    display: inline-block;
    color: white;
    padding: 4px 8px;
    font-weight: bold;
    line-height: 32px;
    float: left;
    clear: none;
    box-sizing: border-box;
}

ul.subnav li {
    background-color: red;
    list-style: none;
    display: inline-block;
    color: white;
    padding: 4px 8px;
    font-weight: bold;
    position: relative;
    line-height: 32px;
    float: left;
    clear: none;
    box-sizing: border-box;
}

.topnav li:hover {
    background-color: red;
}

.topnav li:hover ul.subnav {
    display: inline-block;
    background-color: red;
}

.nav ul li:hover {
    background-color: black;
}

.nav ul li {
    width: 100%;
}

.nav li ul {
    display: inline-block;
    clear: none;
    position: absolute;
    background-color: red;
    margin: 4px 0 0 -8px;
    padding: 0;
}

.left {
    float: left;
}

.right {
    float: right;
}

jsfiddle：

jsfiddle.net/aLZqZ

这是我要完成的工作：

图像导航菜单

4

1 回答 1

11

我给你这个http://jsfiddle.net/aLZqZ/99/。在不到 100 次尝试中，也是。我变得有点着迷，总共花了至少 5 个小时。对我来说是一个很好的挑战，我以前从未真正摆弄过子导航。

这个问题有三个方面：

  • 根据我的经验，将 float:right 用于水平导航栏通常不好，因为它会导致意想不到的问题，如果相同的元素相对或绝对定位，它也会被浏览器否定和忽略（你有很多多余的代码，顺便说一句） . 我在必要时将 float:right 更改为 text-align:right 。请参阅我最近为某人修复的水平导航：将导航栏向右对齐/浮动

  • 包含子菜单的 li 元素未定位，因此，其中 ul 上的 position:absolute 和 right:0 根据最近的包含元素 position:absolute 或 :relative 移动。在这种情况下，没有一个元素是 html；因此 ul 将被一直推到页面的末尾。我添加了 position:relative 到这些 li 元素，然后让 right:0 的行为符合预期，但没有将所有 li 元素放在一行上而是堆叠它们。

  • 当 :inline 可以做到时，您有带有 display:inline-block 的标签，但更重要的是，没有人真正提到 white-space:nowrap 在相同的元素上执行您在此处尝试的操作很重要。inline-block 和 nowrap 一起应该强制一个 line block 像你可以对齐或浮动的元素，就好像它们是一个段落一样。顺便说一句，IE7 需要特别注意内联块。见这里：http ://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/

    我在你的小提琴底部制作了特殊的 css 来分隔左右导航，我基本上不理会你原来的 css。我还稍微调整了html。一切都在这里。

    右侧导航的 HTML（遵循左侧导航的 HTML）：

            <ul class="rightNav">
            <li>menu3
                    <ul class="rightSubNav">
                        <li>item3-1</li>
                        <li>item3-2</li>
                        <li>item3-3</li>
                    </ul>
            </li>
            <li>menu4
                    <ul class="rightSubNav">
                        <li>item4-1</li>
                        <li>item4-2</li>
                        <li>item4-3</li>
                    </ul>
            </li>
        </ul>

    我添加的用于分隔左右导航的 CSS：

            ul.rightNav {
        margin:0;
        padding:0;
        text-align: right;
    }

    .rightNav li:hover {
        background-color: red;
    }

    ul.rightNav  li{
        list-style: none;
        display: inline-block;
        color: white;
        padding: 4px 8px;
        font-weight: bold;
        line-height: 32px;
        position:relative;
    }

    ul.rightSubNav {
        position: absolute;
        right:0;
        margin: 4px 0 0 -20px;
        padding: 0;
        display: none;
        white-space:nowrap;
    }
    ul.rightSubNav li {
        background-color: red;
        list-style: none;
        display: inline;
        color: white;
        padding: 4px 8px;
        font-weight: bold;
        position: relative;
        line-height: 32px;
    }

    .rightNav li:hover ul.rightSubNav {
        display: inline-block;
        background-color: red;
    }

    如果这有帮助，我将不胜感激投票和答案选择。如果你想出了别的东西并让它以不同的方式工作，请发布。我很乐意看看。

    • 于 2013-02-02T07:50:31.597 回答