[bocaj]

I'm having a little issue with a dropline menu, no biggy, no live code (sorry, i know it makes it hard).

Dunno if any of you can help me out here, it's more of a creative thinking issue than a bug.

The css:

.menu {
float:right;
font-family:arial,sans-serif;
font-size:11px;
height:30px;
margin:5px 40px 50px 0;
position:relative;
z-index:100;}

.menu ul {padding:0; margin:0; list-style-type: none; clear:right;}
 
.menu ul li {float:left; border-right:1px solid #EEEEEE; width:106px; list-style-image: none;}
 
.menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; padding:0 5px 0 0; height:30px; line-height:30px; color:#000;  width:100%; text-align:right}
 
.menu ul li a:hover{border-top:7px solid #ff0954; padding-top:25px; margin-top:-32px;}
 
.menu table {border-collapse:collapse; margin:0; padding:0; font-size:1em;}
 
.menu ul li ul {visibility:hidden; position:absolute; top:30px; right:0; z-index:-1 }

.menu ul li ul li {float:right;} <!-- the problematic float -->
 
 .menu ul li:hover{border-bottom:1px solid #000;}
 
.menu ul li:hover a,
.menu ul li a:hover {color:red;}
.menu ul li ul li a:hover{padding-top:56px;margin-top:-63px;}
 
 .menu ul li:hover ul li a{color:black}
 .menu ul li:hover ul li:hover a{color:red}
 
.menu ul li:hover ul,
.menu ul li a:hover ul {visibility:visible; width:600px; }
 
.menu ul li:hover ul.right_side li,
.menu ul li a:hover ul.right_side li {float:right; border:0; border-left:1px solid #eee; }
 
.menu ul li:hover ul.left_side li,
.menu ul li a:hover ul.left_side li {float:left; border:0; border-left:1px solid #eee;}
 
.menu ul li ul li:hover{border-bottom:none !important; border-top:1px solid #000; padding-bottom:1px; }

And the html is standard dropdown markup (ul's nested in li's)

The problem is the second level is reversed, which is caused by floating the second levels to the right with this line

.menu ul li ul li {float:right;}

However floating it to the left puts the menu a little out of wack (about a 100px or so to the left). I can fix this easily using a margin property or w.e, problem is though, if i then say add an extra menu item, i have to re-adjust the code.

Anyone had this problem? or anyone got any suggestions on how to fix it?

Update: i think i've traced the problem to a :hover class, if i float left, the mis-align only appears when i hover (i've set the second level to visible for testing purposes).

Other than that i'm stumped :'/