CSS下拉列表，将嵌套UL与父LI的右边缘对齐

时间：2015-04-18 22:14:55

标签： html css

所有嵌套的UL都需要与其父LI的右侧对齐。目前，嵌套的UL似乎正在与更高级别的NAV元素的右侧对齐。

实时代码

链接here to fiddle with HTML and problem CSS

HTML

    <body>
        <div id="header">
            <div id="header-content-container"> <a href="/" title="Logo" id="logo">Logo!</a>

                <div id="top-nav-container">
                    <nav>
                        <ul>
                            <li><a href="/">HOME</a>
                            </li>
                            <li><a href="#">SERVICES</a>

                                <ul>
                                    <li><a href="#">Item 00000000</a>
                                    </li>
                                    <li><a href="#">Item 000000000000000</a>
                                    </li>
                                    <li><a href="#">Item 000000000000000</a>
                                    </li>
                                    <li><a href="#">Item 00000000000000</a>
                                    </li>
                                    <li><a href="#">Item 0000000000000</a>
                                    </li>
                                    <li><a href="#">Item 000000000000</a>
                                    </li>
                                    <li><a href="#">Item 000000000</a>
                                    </li>
                                </ul>
                            </li>
                            <li><a herf="#">LIBRARY</a>
                            </li>
                            <li><a href="/contact/">CONTACT</a>

                                <ul>
                                    <li><a href="#">Item 0</a>
                                    </li>
                                    <li><a href="#">Item 00</a>
                                    </li>
                                    <li><a href="#">Item 000</a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </nav>
                </div>
            </div>
        </div>
        <div class="clearer"></div>
    </body>

CSS

    .clearer {
        clear: both;
    }

    body {
        background: none repeat scroll 0 0 red;
        font-family:sans-serif;
        font-size: 13px;
        margin: 0;
        padding: 0;
        position: relative;
        vertical-align: baseline;
    }

    div#header {
        background-color: white;
        float: left;
        height: 76px;
        margin: 0;
        padding: 0;
        width: 100%;
    }

    div#header-content-container {
        height: 100%;
        margin: 0;
        width: 768px;
        background: black;
    }

    a#logo {
        background: blue;
        float: left;
        height: 50px;
        margin: 12px 0 0 19px;
        width: 260px;
    }

    #top-nav-container {
        float: right;
        margin: 10px 0 0;
        position: relative;
        z-index: 9000;
    }

    nav {
        float: right;
        margin: 0 9px 0 0;
    }

    nav ul {
        display: inline-table;
        list-style: outside none none;
        padding: 0;
        position: relative;
    }

    nav ul::after {
        clear: both;
        content:"";
        display: block;
    }

    nav ul li {
        float: left;
    }

    nav ul li:hover {
        background: green;
    }

    nav ul li:hover > ul {
        display: block;
    }

    nav ul li a {
        color: #eee;
        display: block;
        padding: 16px 15px;
        text-decoration: none;
    }

    nav ul li:hover a {
        color: orange;
    }

    nav ul ul {
        background: none repeat scroll 0 0 #343434;
        border-radius: 0;
        left: auto;
        padding: 0;
        position: absolute;
        right: 0;
        top: 100%;
        display: none;
    }

    nav ul ul li {
        float: none;
        border-top: 1px solid purple;
        border-bottom: 1px solid blue;
        position: relative;
    }

    nav ul ul li a {
        padding: 15px 40px;
        color: yellow;
    }

    nav ul ul li a:hover {
        background: cyan;
    }

问题

problem image

1 个答案:

答案 0 :(得分：1)

检查更新后的fiddle。

我修改了nav ul ul类

nav ul ul {    background: none repeat scroll 0 0 #343434;
    border-radius: 0;        
    padding: 0;
    position: absolute;
    left: -48px;    
    top: 100%;
    display: none;
}