Css-based menu won't work

I've built many a css-based dropdown menu before, but this time it won't work! Am I missing something?
When I hover over the link that should make the drop down appear, nothing happens!

With this menu I'm trying to replicate something along the lines of the menu found on the Cisco website (http://www.cisco.com), so that the dropdowns can contain columns of links.

What I have so far is:


<div id="navbar">
<ul id="navlist">
<li class="level1"><a href="#">Home</a></li>
<li class="level1"><a href="#">Services</a>
<div class="panelwrap">
<p>Title of Services</p>
<div class="panelcol">
<ul>
<li><a href="#">Service A</a></li>
<li><a href="#">Service B</a></li>
<li><a href="#">Service C</a></li>
</ul>
</div>
<div class="panelcol">
<ul>
<li><a href="#">Service A</a></li>
<li><a href="#">Service B</a></li>
<li><a href="#">Service C</a></li>
</ul>
</div>
<div class="panelcol">
<ul>
<li><a href="#">Service A</a></li>
<li><a href="#">Service B</a></li>
<li><a href="#">Service C</a></li>
</ul>
</div>
<div style="clear:both;"></div>
</div>
</li>
<li class="level1"><a href="#">About Us</a></li>
<li class="level1"><a href="#">Contact</a></li>
</ul>
<div style="clear:both;"></div>
</div><!--end of navbar-->


and the CSS for it is:


#navbar {
border: #090 2px solid;
height: 35px;
}

#navlist {
list-style: none;
padding-top: 8px;

}

#navlist a {
text-decoration: none;
color: #090;
}

.level1 {
float: left;
margin-left: 50px;
}

.panelwrap {
position: absolute;
left: -999em;
margin-top: 10px;
width: 300px;
border: #090 solid 2px;
}

.panelcol {
float: left;
width: 33%;
}

.panelcol ul{
list-style: none;
}

.panelcol ul li{

}

.panelcol ul li a{
display: block;
font-family: "Century Gothic", Verdana, Arial, Helvetica, sans-serif;
text-decoration:none;
font-size:0.8em;
line-height:1.55em;
text-align:center;
color:#FFF;
}

#navlist li a:hover {
color: #F00;
}

#navlist li a:hover {
left: auto;
}


If anyone can see why the dropdown won't appear, please let me know!

No time to check out all your source, but I just made a mega menu dropdown from scratch and can put the barebones demo up for you: http://blog.pressedweb.com/demos/css_mega_dropdown/

Copy/paste the CSS (.php) and beautify it with: http://www.codebeautifier.com

It's not much code at all actually. Works in IE7+ and it would probably work in IE6 if you made the :hover selector target an anchor element instead of the entire <li>. Otherwise you can always throw something like http://code.google.com/p/ie7-js/ or http://code.google.com/p/stan-js/ in it to make IE6 listen.

No time to check out all your source, but I just made a mega menu dropdown from scratch and can put the barebones demo up for you: http://blog.pressedweb.com/demos/css_mega_dropdown/


Thanks for that Aple, but I was hoping for someone to give me some advice; I want to learn what I did wrong, not just use someone else's code.

I don't mean to sound ungrateful.

I want to learn what I did wrong, not just use someone else's code.

Good for you.

Your :hover statement isn't quite right:

#navlist li a:hover {
left: auto;
}


should be something like:

#navlist li.level1:hover .panelwrap {
left: auto;
}

- so, when a user hovers on the top level li, the .panelwrap within that li is displayed.