drop-down menu help

[dayaki]

I am having problem with a drop-down menu, i created the navigation menu but when you mouse-over the intended drop-down menu, it will display the children horizontally instead of vertically (downward).

below is the html and css i used for the navigation, any help will be appreciated.

the HTML:

<div class="menu">
<ul>
<li><a href="index.html" class="active"><span>Home</span></a></li>
<li><a href="about.html"><span>About </span></a></li>
<li><a href="#"><span>Products</span></a>
<ul class="dropdwn">
<li><a href="#"><span>Home</span></a></li>
<li><a href="#"><span>Office</span></a></li>
<li><a href="#"><span>Custom</span></a></li>
</ul>
</li>
<li><a href="#"><span>Sales</span></a></li>
<li><a href="contact.html"><span>Contact</span></a></li>
</ul>
</div>

the CSS:

/* menu */
.menu {
padding:15px 0 0 20px;
margin:0;
width:550px;
float:right;
}
.menu ul {
text-align: left;
padding:0;
margin:0;
list-style:none;
border:0;
float:right;
}
.menu ul li {
float:left;
margin:0;
padding:0 5px;
border:0;
}
.menu ul li a {
float:left;
margin:0;
padding:12px 0;
color:#fff;
font:normal 12px Arial, Helvetica, sans-serif;
text-decoration:none;
}
.menu ul li a span {
padding:12px 9px;
background:none;
}
.menu ul li a:hover {
background: url(images/r_menu.gif) no-repeat right;
}
.menu ul li a:hover span {
background:url(images/l_menu.gif) no-repeat left;
}
.menu ul li a.active {
background:url(images/r_menu.gif) no-repeat right;
}
.menu ul li a.active span {
background:url(images/l_menu.gif) no-repeat left;
}
/* drop down menu */

.dropdwn {
text-align: left;
padding:0;
margin:0;
list-style:none;
border:0;
}
.dropdwn li {
float:left;
margin:0;
padding:0 5px;
border:0;
}
.dropdwn li a {
float:left;
margin:0;
padding:12px 0;
color:#fff;
font:normal 12px Arial, Helvetica, sans-serif;
text-decoration:none;
}
.dropdwn li a span {
padding:12px 9px;
background:none;
}
.dropdwn li a:hover {
background: url(images/r_menu.gif) no-repeat right;
}
.dropdwn li a:hover span {
background:url(images/l_menu.gif) no-repeat left;
}
.dropdwn li a.active {
background:url(images/r_menu.gif) no-repeat right;
}
.dropdwn li a.active span {
background:url(images/l_menu.gif) no-repeat left;
}

any help will be appreciated.

[Wickham]

It's float: left which is causing the horizontal dropdown tabs in this style, so delete it:-


.dropdwn li {
/*float:left;*/
margin:0;
padding:0 5px;
border:0;
}


I think you should be able to leave the float: left in the .dropdwn li a { } style.

You may have to edit other things, but that should be a start.

You might need to add a width to the .dropdwn li style.