Wordpress drop down nav menu CSS help

[Matt]

Hi nice folks.

I have a drop down menu displaying my pages, however I want it to expand to the right to show the child pages of the pages listed.

At the moment I have

Pages > subpages (gos directly beneath the parent page in a drop down menu)

I want now to show Pages > Subpages > Subpages (to go to the right of the child page on the drop down)

Basically like the menu does on www.wolverley.worcs.sch.uk

Im just a bit confused as to how to style it in CSS to happen!

Code:

.menu {
border:none;
border:0px;
margin:0px;
padding:0px;
padding-top:11px;
font: 67.5% 'Verdana', Helvetica, sans-serif;
font-size:14px;
font-weight:bold;
}
.menu ul {

height:30px;
list-style:none;
margin:0;
padding:0;
}
.menu li {
float:left;
padding:0px;
}
.menu li a {

color:#000;
display:block;
font-weight:normal;
line-height:31px;
margin:0px;
padding:0px 15px;
text-align:center;
text-decoration:none;
border-right: 1px solid #ddc598;
}
.menu li a:hover, .menu ul li:hover a {
background: #CD9F51;
color:#FFFFFF;
text-decoration:none;
}
.menu li ul {
background:#333333;
display:none;
height:auto;
padding:0px;
margin:0px;
border:0px;
position:absolute;
width:225px;
z-index:200;/*top:1em;
/*left:0;*/
}
.menu li:hover ul {
display:block;
}
.menu li li {

display:block;
float:none;
margin:0px;
padding:0px;
width:225px;
}
.menu li:hover li a {
background:none;
}
.menu li ul a {
display:block;
height:35px;
font-size:10px;
font-style:normal;
margin:0px;
padding:0px 7px 0px 7px;
text-align:left;
}
.menu li ul a:hover, .menu li ul li:hover a {
background:#CD9F51;
border:0px;
color:#ffffff;
text-decoration:none;
}


.menu p {
clear:left;
}

[orydian]

First thought would be get js/jQuery to show styled submenu anchor on hover then CSS would be position:relative; left:123px; where 123 is the width of the dropdown. Although granted I'm not really awake yet and there's probably a better way.

[Matt]

First thought would be get js/jQuery to show styled submenu anchor on hover then CSS would be position:relative; left:123px; where 123 is the width of the dropdown. Although granted I'm not really awake yet and there's probably a better way.

Unfortunately I don't really understand that, sorry. Can you explain it a bit more please?

[orydian]

Looking a bit closer at your CSS, it looks like you don't need js/jQuery.

Good CSS only example here - http://www.cssplay.co.uk/menus/final_drop.html

[Mr Anderson]

Suckerfish dropdowns. Depending on how far back you want to support IE you don't need the js, and there's no tables stuffed into the markup. If you need to support IE 7 or less you can just use a conditional comment to load a link to the script.

Example: http://www.htmldog.com/articles/suckerfish/dropdowns/example/
Code: http://www.htmldog.com/articles/suckerfish/dropdowns/

[Rosco]

I prefer Superfish but the concept is the same

I've also tried this menu and it's as sexy as it says on the tin, but wasn't so great after more than one level of sub-menu (although to be fair I didn't persevere with it for very long as I needed a hover menu rather than an onclick one)