Question

This is my first question here but I’m sure there are many more to come.
I have a small position problem that I would like to know if it’s even possible to achieve.

I have an unordered list (<ul>) with floated <li>s, for the main options i float these left, and for the contact and support options I float them right, so far so good. Now i have a <span> inside each <li> which i display under the horizontal list, the list is for a menu. These <span>s works as description to menu choice and for the normal options I use position:absolute; top:30px; left:0; this works as suspected. Now I would like to change the position attributes for those menu items that i float right so that the span gets position:absolute; top:30px; right:0; and this doesn’t work at all. It seems like it’s impossible to change this with a more specific css rule then the other, yet the float works great.

the html:

<div id="menu">
<ul>
    <li>Menu1<span>Info1</span></li>
    <li>Menu2<span>Info2</span></li>
    <li class="support">Support1<span>Info3</span></li>
</ul>

The css:

#menu{position:relative;}
#menu ul{list-style:none;}
#menu ul li{float:left;}
#menu ul li.support{float:right;}
#menu ul li span{display:none;}
#menu ul li:hover span{display:block; position:absolute; top:30px; left:0;}
#menu ul li.support:hover span{display:block; position:absolute; top:30px; right:0}

The last line in the css make no difference!
If anyone has an answer or a work around I greatly appreciate the help.

Question answered and problem solved. Check James Arons or mercator’s posts.

Answer 1

Even thought you set right:0, your left:0 is still being inherited. You need to set left:auto to override that style for the support class.