Navigation Drop Down Help

im having trouble with my navigation drop down menu for some reason the drop dowm menu displays like this

CONTEST
contest1 contest2 contest3 contest4

i need it to be displayed like this

Contest
contest1
contest2
contest3
etc

my css code looks like this


ul.drop ul {
list-style: none;
}
ul.drop {
float: left;
}
ul.drop li {
float: left;
}
ul.drop li a {
display: block;
height: 2em;
line-height: 2em;
background: #858383;
text-decoration: none;
}
ul.drop li a:hover {
background: #D94848;
}
ul.drop ul {
position: absolute;
display: none;
z-index: 999;
}
ul.drop ul li a {
width: 0px;
display:block;
;

}
ul.drop li:hover ul {
display: block;
}



and the html is normal

<ul id="nav" class="drop">
<li><a href="exampe">example</a>
<ul><li>example etc</li>
</ul>

 

#navContainer {
margin:0;
padding:0;
background:url(images/blueVertNav/bg1.png) repeat-x;
border: 1px solid #7398ba;
text-align:center;
width:220px;
}

The 'navContainer' will hold the menu. We have declared a width of 220px, set a border and applied the background image. We have also centered the text.

#navContainer ul{
margin:0;
padding:0;
list-style:none;
}

Nothing unusual here, set the padding and margin to 0 and get rid of the bullet points.

#navContainer ul li {
position:relative;
}

This piece of code is important. By setting the list item to relative we are telling any child item (which is positioned absolutely) that it will be positioned relative to the position of its parent list item.

#navContainer ul li span{
display:block;
background:url(images/blueVertNav/buttonLeft.png) top left no-repeat;
}

Change display to 'block', this tells the element to fill all available space and makes the whole button click-able. Set the 'left' image as the background.

#navContainer ul li a{
text-decoration:none;
color:white;
font-family:Lucida Sans Unicode, Lucida Grande, sans-serif;
display:block;
padding:8px;
background:url(images/blueVertNav/buttonRight.png) top right no-repeat;
}

Get rid of the underline on our text, change the font color to white & change the font family. Change display to block yet again & set the 'right' image as the background. The two background images should now overlap to create a single image.

#navContainer ul li span:hover {
background:url(images/blueVertNav/hoverLeft.png) top left no-repeat;
}

Following the same process as before apply the background image. Only difference here is that we are using the ':hover' pseudo class(and different images of course).

#navContainer ul li a:hover{
background:url(images/blueVertNav/hoverRight.png) top right no-repeat;
}

Same again, but this time use the 'right' image. When hovering your mouse over the menu the background image should now change.

#navContainer ul ul{
position:absolute;
display:none;
}

Within our parent UL, set the position of any child UL to absolute. Set the display property to 'none'. This hides the drop-down menu, which can be brought back into sight when its parent list item is hovered.

#navContainer ul ul li a{
background:#bec8cb;
}

Set a background color for our sub-menu.

#navContainer ul li:hover ul{
width:80%;
position:absolute;
display:block; left:218px;
top:0;
}

This is the important part. When the user hovers their mouse over the list item, the sub-menu section will be moved back into place. We have set a position of 'left:218px', this moves it 218px to the right of its original position. Also, the display property has been set to block. The dropdown list will now be visible while it, or its parent list item is hovered.

By applying this method you can do your Menu vertical for more information visit http://weebtutorials.com/cssVertNav1.php

 

great solutioon pal... nice