CODEWITHSUNDEEP
htmlcss
user743094
user743094

Reputation: 329

CSS dropdown, Align nested UL to right edge of parent LI

All nested ULs need to be aligned to the right of their parent LI. Currently the nested ULs seem to be aligning to to the right of a higher level NAV element instead.

Live Code

Link 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

problem image

Upvotes: 0

Views: 1368

Answers (1)

Akshay Gundewar
Akshay Gundewar

Reputation: 954

Check the updated fiddle.

I have modified the nav ul ul class

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

Upvotes: 1

Related Questions