OK you need to go into your style.php in your theme, make a backup of it in case you don’t like my edits & then replace all the menu stuff from
#menu {
list-style:none;
to
#menu ul li a:hover {color:#000;}
with this
#menu {
list-style:none;
margin:0;
padding:0 0 0px 24px;
height:0%;
}
#menu:after {
content:" ";
display:block;
clear:both;
}
#menu li {
padding: 7px;
margin-right: 30px;
float:left;
}
#menu li a {
float:left;
text-align:center;
text-decoration:none;
}
#menu li:hover {
position: relative;
background:#e9e6dd;
}
#menu li.hover ul,
#menu li:hover ul {
display: block;
}
#menu ul {
padding:16px 0 0 0;
margin: 0;
list-style:none;
width:147px;
display: none;
position: absolute;
top: 10px;
left: 0;
}
#menu ul li {
padding:6px;
width:120px;
background:#e9e6dd;
}
#menu ul li a {
text-align:left;
width:100%;
background:none;
color:#7a7a7a;
line-height:18px;
height:auto;
display:block;
}
#menu ul li a:hover {color:#000;}
I have only looked at this in the current version of firefox OSX, so I have no idea what it looks like in other browsers.
Apart from the positioning, I have also applied the drop-down menu colour to the top level menu items on hover – but its easy to remove if you don’t want that, just change
#menu li:hover {
position: relative;
background:#e9e6dd;
}
to
#menu li:hover {
position: relative;
}