Alignment problem with one line only mouseover ul > li ?

CSS alignment issue

[we5inelgr]

Hello all,

I've got a situation where I have 1 line (shown below in 2nd image) that doesn't want to line up correctly (should be part of the padding-right:5px):

HTML

<div id="sign_in_out">
<ul><li><b>Barney Rubble</b> &#9662;<ul><li>Signed In With: [e-mail]</li><li><span class="basicLink"><a href="http://www.mysite.com/so.html">Sign Out</a></span></li></ul></ul></div>

CSS

#sign_in_out { width:100%;padding:0; }
#sign_in_out ul{ width:100%;margin:0;padding:0;list-style:none;font: 12px Verdana; }
#sign_in_out > ul > li { margin:0;padding:4px 10px;height:20px;position:relative;float: right;line-height:20px;z-index: 200; } 
#sign_in_out > ul > li > a { display: block;text-decoration: none;margin: 0; } 
#sign_in_out li > ul { visibility:hidden;position: absolute;top:0px;right:10px;padding-right:5px;border-right:1px solid #000; } 
#sign_in_out > ul > li > ul { top:28px;right:10px; } /* Controls sub menu position relative to top of main ul */
#sign_in_out > ul > li > ul a { display: block;text-decoration: none;margin: 0; }
#sign_in_out > ul > li > ul > li:hover a { display: block;text-decoration: none !important;margin: 0;color: #FF0000; }
#sign_in_out li:hover { background-color: #ffffff; } 
#sign_in_out li:hover > ul { visibility: visible; }

How can I get that line with the email address moved to the left, in line with the "Signed In With:" and "Sign Out" lines? :confused:

Without mouseover:
[oi61.tinypic.com...]

With mouseover, showing email line out of alignment:
[oi58.tinypic.com...]

[lucy24]

Yikes! I must say, tinypic's notion of "images you may also enjoy" is somewhat at variance with my own :(

My first thought was width constraints, either on one of the nested li's or ul's or on the containing div. If there isn't room, then things have to move.

[we5inelgr]

lol, no kidding huh!

you were right, I added an additional width statement (within the existing):
#top_siso > ul > li { width:100%;margin:0;padding:4px 10px;height:20px;position:relative;float: right;line-height:20px;z-index: 200; }

and now it works as expected.

many thanks!