CSS drop down menu in 960 grid system

Question

I'm building a website based on 960 grid system (www.960.gs), and I've encountered a problem. I want to put drop down menu but with no success. I tried many tutorials but i only got more confused. Is there a way to create a menu for this kind of website? this is the website by the way: My website

Thank you for you help.

Answer 1

The best way to do this by using just CSS is by using absolute positioning on the contents of your drop-down, and have another unordered list inside each li that needs drop-downs.

So the markup looks like this:

<ul id="nav">
    <li><a>Nav Item with dropdown</a>
        <ul id="dropDown">
            <li><a>Dropdown Menu Item</a></li>
            <li><a>Dropdown Menu Item</a></li>
            <li><a>Dropdown Menu Item</a></li>
        </ul>
    </li>
</ul>

You will then set #nav li (or #nav li a) to position:relative; and have the #nav li ul set to position:absolute; with it's position off the side of the screen using left:-9999px;

Then set the hover of the element you set to position relative (li or li a), while including the child ul:

#nav li:hover ul {
    position:absolute;
    left:0;
}

This way, on hover, the child element will come into focus underneath the parent menu item.

See it working here.