css只有水平subnav

Question

css只有水平subnav

Cur*_*tis 2 html css navigation horizontallist multi-level

我正在构建一个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>

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

jsfiddle:

jsfiddle.net/aLZqZ

这是我想要完成的事情:

图像到导航菜单

Answer 1

193*_*286 11

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

这个问题有三个方面:

使用float:右边的水平导航栏通常不是我的经验,因为它会导致意想不到的问题,如果相同的元素相对或绝对定位(你有很多多余的代码,顺便说一下)它被浏览器否定和忽略.我改变了浮动:右边的文本对齐:在必要的地方.看到这个我最近为某人修好的横向导航:将我的导航栏向右对齐/浮动

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

你有带display:inline-block的标签:inline会完成它,但更重要的是,没有人真正提到过white-space: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>

Run Code Online (Sandbox Code Playgroud)

我添加的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;
    }

Run Code Online (Sandbox Code Playgroud)

如果这有帮助我会欣赏选票和答案选择.如果你想出其他的东西并让它以不同的方式工作,请发帖.我很乐意看看.

先生,你是个天才.我花了几周的时间试图解决这个问题.由于我的会员身份很低,我不能投票给你并给你声望点,但是当我有足够的时候,我会回来并回报这个好处.我做过的最多的事情就是在左侧或右侧进行绝对定位.这简直太棒了.谢谢! (2认同)

归档时间：	12 年，10 月前
查看次数：	8088 次
最近记录：	12 年，9 月前