OK I have to get this done today. I am building a site for a restaurant using wordpress and I have build a horizontal nav menu for the site. The menu displays all the pages and when the page name is hovered over it shows a drop down of all of the child pages associated with that page. Now I want the drop down that displays the child pages to be horizontal under the nav menu instead of being a vertical drop down. There will always only be 2 levels to this menu. Here is the css that I have so far.
#suckerfishnav {
position: absolute;
margin: 0;
padding: 0;}
#suckerfishnav li {
list-style: none;
float: left; }
#suckerfishnav li a {
display: block;
padding: 3px 8px;
text-transform: uppercase;
text-decoration: none;
color: #999;
font-weight: bold; }
#suckerfishnav li a:hover {
color: #000; }
#suckerfishnav li ul {
display: none; }
#suckerfishnav li:hover ul, #suckerfishnav li.hover ul {
position: absolute;
display: inline;
left: 0;
width: 100%;
margin: 0;
padding: 0; }
#suckerfishnav li:hover li, #suckerfishnav li.hover li {
float: left;
display: inline;
}
#suckerfishnav li:hover li a, #suckerfishnav li.hover li a {
color: #000;
display: inline;
}
#suckerfishnav li li a:hover {
color: #357;
display: inline;
}
please help me today I really need to get this done.