Question

I am working on a dropdown navigation for a site and am having some trouble with the dropdown portion aligning with the parent category – it shifts all the way to the left.

Here is the html:

    <ul class="dropdown">
<li><a href="#" id="home">Home</a></li>
<li><a href="#" id="about">About Us</a>
    <ul class="sub-menu">
        <li><a href="#">Our History</a></li>
        <li><a href="#">Our Process</a></li>
        <li><a href="#">Portfolio</a></li>
        <li><a href="#">Financing</a></li>
        <li><a href="#">Testimonials</a></li>
        <li><a href="#">Subcontractors</a></li>
    </ul>
</li>
<li><a href="#"  id="personal">Personal Banking</a></li>
<li><a href="#"  id="commercial">Commercial Banking</a></li>
<li><a href="#"  id="service">Customer Service</a>
    <ul class="sub-menu">
        <li><a href="#">Our History</a></li>
        <li><a href="#">Our Process</a></li>
        <li><a href="#">Portfolio</a></li>
        <li><a href="#">Financing</a></li>
        <li><a href="#">Testimonials</a></li>
        <li><a href="#">Subcontractors</a></li>
    </ul>
</li>
<li><a href="#"  id="investors">Investor Relations</a></li>
<li><a href="#"  id="contact">Contact Us</a></li>
</ul>

Here is the CSS:

ul.dropdown                         { position: relative; background: #4e8997; height: 40px; padding-left: 5px;  }
ul.dropdown li                      { float: left; zoom: 1;  }
ul.dropdown li a  { 
display: block;
margin-top: 5px; 
padding: .5em .6em; 
color: #fff; 
font: bold 14px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif; 
text-transform: uppercase;
border: none; 
}
ul.dropdown a:hover                 { background-color: #c29c5d; color: #fff; }
ul.dropdown a:active                { background-color: #c29c5d; color: #fff; }

/* 
LEVEL TWO
*/
ul.dropdown ul                      { width: 200px; visibility: hidden; position: absolute; top:100%; left: 0; }
ul.dropdown ul li                   { font: 13px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
                                  border-bottom: 1px solid     #ccc; float: none; color: #fff; background-color: #c29c5d; height: 20px; }

ul.dropdown ul li a                 { display: inline-block; }
ul.dropdown ul li a:hover           { background-color: #a2834d; color: #fff; height: 20px; } 

I tried changing the ul.dropdown ul to position relative, but that breaks the navigation. I would appreciate some help getting this corrected.

Thanks.

Answer 1

If your using jQuery you should look at Superfish since this will do what you need. I use a modified version for some other things, but here is what I get if I pull a little excerpt and apply it to your HTML.

<script type="text/javascript">
    $(function() {

        $("ul.dropdown li").hover(function() {

            $(this).addClass("hover");
            $('ul:first', this).show();
            $(this).parents('li a').addClass('hover');

        }, function() {

            $(this).removeClass("hover");
            $('ul:first', this).hide();
            $(this).parents('li a').removeClass('hover');
        });

        $("ul.dropdown li ul li:has(ul)").find("a:first").append(" &raquo; ");

    });
</script>

<style type="text/css">
    /* CSS RESET ****************** v1.0 | 20080212 *****************************/
    html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; }
    body { line-height: 1; }
    ol, ul { list-style: none; }
    blockquote, q { quotes: none; }
    blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
    /* remember to define focus styles! */
    :focus { outline: 0; }
    /* remember to highlight inserts somehow! */
    ins { text-decoration: none; }
    del { text-decoration: line-through; }
    /* tables still need 'cellspacing="0"' in the markup */
    table { border-collapse: collapse; border-spacing: 0; }
    .dropdown, .dropdown * { margin: 0; padding: 0; list-style: none; }
    .dropdown { line-height: 1.0; }
    .dropdown ul { position: absolute; width: 10em; /* left offset of submenus need to match (see below) */ }
    .dropdown ul li { width: 100%; }
    .dropdown li:hover { visibility: inherit; /* fixes IE7 'sticky bug' */ }
    .dropdown li { float: left; position: relative; left: -1px; top: -1px; margin-left: 2px; margin-right: 2px; }
    .dropdown a { display: block; position: relative; }
    .dropdown span.dropdown-nolink { display: block; position: relative; }
    .dropdown li:hover ul, .dropdown li.sfHover ul { left: 0; top: 2.5em; /* match top ul list item height */ z-index: 9999; }
    ul.dropdown li:hover li ul, ul.dropdown li.sfHover li ul { top: -999em; }
    ul.dropdown li li:hover ul, ul.dropdown li li.sfHover ul { left: 0em; /* match ul width */ top: 0; }
    ul.dropdown li li:hover li ul, ul.dropdown li li.sfHover li ul { top: -999em; }
    ul.dropdown li li li:hover ul, ul.dropdown li li li.sfHover ul { left: 0em; /* match ul width */ top: 0; }
    .dropdown { float: left; margin-bottom: 0em; }
    .dropdown a { padding: .70em 1em; text-decoration: none; }
    .dropdown a, .dropdown a:visited { /* visited pseudo selector so IE6 applies text colour*/ color: #FFF; }
    .dropdown span.dropdown-nolink { padding: .70em 1em; text-decoration: none; }
    .dropdown span.dropdown-nolink, .dropdown span.dropdown-nolink:visited { /* visited pseudo selector so IE6 applies text colour*/ color: #FFF; }
    .dropdown li { background: #4e8997; text-align: left; }
    .dropdown li li { background: #4e8997; ;margin:0;top:-1px;left:-1px;}
    .dropdown li li li { background: rgb(188,0,47); margin: 0; top: -1px; left: 0; }
    .dropdown li:hover, .dropdown li.sfHover, .dropdown a:focus, .dropdown a:hover, .dropdown a:active { background: #c29c5d; outline: 0; z-index: 9999; }
    .sub-menu { display: none; }
</style>

I posted the JS since I also changed it to use jQuery’s show()/hide().