Question

我正在构建一个只有两级水平导航栏的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

以下是我要完成的事情：

image to nav menu

Answer 1

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

这个问题有三个方面：

对于水平导航栏使用float：right通常不是很好，因为它会导致意外问题，如果相同元素相对或绝对定位，它也会被浏览器否定和忽略（你有很多多余的代码，顺便说一下。我改变了浮动：右边的文本对齐：在必要的地方。看到我最近为某人修正的横向导航：Aligning/floating my nav bar to the right

包含子菜单的li元素未定位，因此，其中ul的绝对位置和右侧：0根据位置最近的包含元素移动：绝对或：相对。在这种情况下，没有一个元素是html;因此ul将被一直推到页面的末尾。我添加了位置：相对于这些li元素然后向右做：0表现如预期，但没有将所有li元素放在一行上而是堆叠它们。

你有带display：inline-block的标签：inline会完成它，但更重要的是，没有人真正提到白色空间：nowrap on相同的元素做你在这里尝试的事情很重要。 inline-block和nowrap在一起应该强制一个行块像你可以对齐或浮动的元素，就像它们是一个段落一样。顺便说一句，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;
    }

如果这有帮助，我会很感激投票和回答选择。如果你想出其他的东西并让它以不同的方式工作，请发帖。我很乐意看到它。

css只有水平subnav

1 个答案: