CSS Dropdown Menu issues

Question

Can anyone help with a small problem.

I've got a nice simple CSS dropdown menu

http://www.cinderellahair.co.uk/new/CSSDropdown.html

The problem I have is when you rollover a menu item that has children which are wider than the content, it pushes the whole menu right.

Aside of shortening the child menu links down, is there any tweak I can make to my CSS to stop this happening?

CSS Code:

    /* General */
#cssdropdown, #cssdropdown ul { list-style: none; }
#cssdropdown, #cssdropdown * { padding: 0; margin: 0; }
#cssdropdown {padding:43px 0px 0px 0px;}

/* Head links */
#cssdropdown li.headlink { margin:0px 40px 0px -1px; float: left; background-color: #e9e9e9;}
#cssdropdown li.headlink a { display: block; padding: 0px 0px 0px 5px; text-decoration:none; }
#cssdropdown li.headlink a:hover { text-decoration:underline; }

/* Child lists and links */
#cssdropdown li.headlink ul { display: none; text-align: left; padding:10px 0px 0px 0px; font-size:12px; float:left;}
#cssdropdown li.headlink:hover ul { display: block; }
#cssdropdown li.headlink ul li a { padding: 5px; height: 17px; }
#cssdropdown li.headlink ul li a:hover { background-color: #333; }

/* Pretty styling */
body { font-family:Georgia, "Times New Roman", Times, serif; font-size: 16px; }
#cssdropdown a { color: grey; } #cssdropdown ul li a:hover { text-decoration: none; }
#cssdropdown li.headlink { background-color: white; }
#cssdropdown li.headlink ul { padding-bottom: 10px;}

HTML:

    <ul id="cssdropdown">
    <li class="headlink"><a href="http://www.cinderellahair.co.uk/new/index.php"&gt;HOME&lt;/a&gt;&lt;/li&gt;
    <li class="headlink"><a href="http://www.cinderellahair.co.uk/new/gallery/gallery.php"&gt;GALLERY&lt;/a&gt;
        <ul>
            <li><a href="http://amazon.com/"&gt;CELEBRITY&lt;/a&gt;&lt;/li&gt;
            <li><a href="http://ebay.com/"&gt;BEFORE &amp; AFTER</a></li>
            <li><a href="http://craigslist.com/"&gt;HAIR TYPES</a></li>
        </ul>
    </li>
    <li class="headlink"><a href="http://www.cinderellahair.co.uk/new/about-cinderella-hair-extensions/about-us.php"&gt;ABOUT US</a>
        <ul>
            <li><a href="http://amazon.com/"&gt;WHY CHOOSE CINDERELLA</a></li>
            <li><a href="http://ebay.com/"&gt;TESTIMONIALS&lt;/a&gt;&lt;/li&gt;
            <li><a href="http://craigslist.com/"&gt;MINI VIDEO CLIPS</a></li>
            <li><a href="http://craigslist.com/"&gt;OUR HAIR PRODUCTS</a></li>
        </ul>
    </li>
    <li class="headlink"><a href="http://www.cinderellahair.co.uk/new/news-and-offers/news.php"&gt;NEWS &amp; OFFERS</a>
        <ul>
            <li><a href="http://amazon.com/"&gt;VERA WANG FREE GIVEAWAY</a></li>
            <li><a href="http://ebay.com/"&gt;CINDERELLA ON TV</a></li>
            <li><a href="http://craigslist.com/"&gt;CINDERELLA IN THE PRESS</a></li>
            <li><a href="http://craigslist.com/"&gt;CINDRELLA NEWSLETTERS</a></li>
        </ul>
    </li>
    <li class="headlink"><a href="http://www.cinderellahair.co.uk/new/cinderella-salon/salon-finder.php"&gt;SALON FINDER</a></li>


</ul>

JS Code:

    $(document).ready(function(){
    $('#cssdropdown li.headlink').hover(
        function() { $('ul', this).css('display', 'block'); },
        function() { $('ul', this).css('display', 'none'); });
});

Full code is on the link above, just view source.

Answer 1

DEMO: http://jsbin.com/owuqe/edit

You need to set the position of UL menu like this

the container UL

  <ul id="cssdropdown" style="position:relative">

all the inner UL

  <ul style="position:absolute">