sorry let me update it, I was actually editing my copy on my computer not the server =[ I really want the subnavi to be a vertical list. It keeps coming out to be a horizontal one.
Hi,
To make a dropdown menu you will want to hide the sub list off screen with a large negative margin.
Then you set that margin to zero on li:hover to reveal the sub list.
Here are a couple of simple examples that show the basic concept, view the page source for the css and html.
Now I have another issue. When I hover over “VPS Server” menu it will pop open the subneavigation but it won’t let me rollover to them. I think because the logo is blocking it. I’ve tried chaning the z-index but that didn’t work. How can I fix this?
Also how can I remove that double gray line under the navigation bar. Everytime I roller over a menu it gets distorted.
You need to follow the examples that Ray gave otherwise this will never work properly. The submenus need to be position:absolute and you need this sort of code to make it work.
.menu ul{overflow:visible;height:40px}
.menu{position:relative;z-index:99}
.menu ul li li {display:block;float:none;}
.menu ul li{position:relative;}
.menu ul ul {
position:absolute;
left:0;
top:40px;
margin-left:-999em;
height:auto;
}
.menu li:hover ul{margin-left:0;}
That code should follow your original and will start to get things back on track.
Note that only positioned elements can have a z-index so adding z-index:3 to .menu will do nothing unlkess you also add position:relative.