CSS Help

[feeco]

I am wondering if someone can please help me with my css. Here is my code, my menu is crazy -- my menu is going vertical instead of horizontal. It looks like this:

Category 1
Product 1 Product 2 Product 3
Category 2
Product 4 Product 5 Product 6

I would like it to look like
Category 1 Category 2 Category 3

and then have the items drop down when hovered over. Can someone please take a look at my css and let me know what i am doing wrong? Thank you

.navcontainer {
height: 32px;
margin-top: 9px;
}
#nav {
height: 30px;
}
#nav, #nav ul {
padding: 0;
margin: 0;
list-style: none;
line-height: 1;
}
#nav {
margin-bottom: 1px;
padding-left: 0px;
}
#nav ul {
float: left;
list-style: none;
margin: 0px 0px 0px 0px;
padding: 0px;
}
#nav li {
float: left;
list-style: none;
margin: 0px;
padding: 0px;
}
#nav ul li {
list-style: none;
margin: 0px;
padding: 0px;
}
#nav li a, #nav li a:link {
color: #262626;
display: block;
margin: 0px 5px 0px 5px;
padding: 7px 10px;
text-decoration: none;
font-size: 13px;
font-weight: bold;
font-family: Arial, Helvetica, Sans-serif;
text-transform: uppercase;
text-shadow: 0 1px 0 #fff;
}

#nav li a:hover, #nav li a:active, .current_page_item {
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
color: #fff;
text-shadow: 0 1px 0 #000;
background-image: url(images/nav-background.png);
background-repeat: repeat-x;
}

#nav li.current_page_item a {
color:#fff;
text-shadow: 0 1px 0 #000;
}

#nav li:hover, #nav li.sfhover {
position: static;
}
----------------------------
<div id="pixopoint_menu_wrapper1">
<div id="pixopoint_menu1">
<ul class="sf-menu" id="suckerfishnav"><li class="page_item page-item-8"><a href="http://equipment.feeco.com/thermal-processing/" title="Thermal Processing">Thermal Processing</a>

<ul class='children'>
<li class="page_item page-item-27"><a href="http://equipment.feeco.com/thermal-processing/rotary-dryers/" title="Rotary Dryers">Rotary Dryers</a></li>
<li class="page_item page-item-29"><a href="http://equipment.feeco.com/thermal-processing/rotary-kilns/" title="Rotary Kilns">Rotary Kilns</a></li>
<li class="page_item page-item-31"><a href="http://equipment.feeco.com/thermal-processing/rotary-calciners/" title="Rotary Calciners">Rotary Calciners</a></li>
<li class="page_item page-item-33"><a href="http://equipment.feeco.com/thermal-processing/rotary-coolers/" title="Rotary Coolers">Rotary Coolers</a></li>
</ul>
</div>
</div>
</ul>
</div>

[weegillis]

First off, the html needs tidying up. There is a nesting error, and missing end tag for top level LI.



</ul>
</div>
</div>
</ul>
</div>

<!-- should be -->

</ul>
</li>
</ul>
</div>
</div>


Assuming you kept the native suckerfish CSS, there is not anything jumping out, there. Perhaps the html fix will put things in line.