change the absolute position from left to right on a span tag depending on class

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.

Answer 2

Judging from that CSS, you don't seem to understand CSS correctly, or you aren't using it correctly at least. You might want to read the SitePoint article about the cascade, specificity and inheritance for a good introduction.

The reason that doesn't work is because the last two lines of that CSS apply to the list items with the support class. The second-to-last line applies to all list items, and the last line then adds to that for the support list items. So, since there's no left property in that last line, the left property cascades down from the previous line, making it left: 0 too.

When you're using a class to mark a special case, you shouldn't be repeating all the CSS of the general case, but only provide the CSS necessary to change it:

#menu ul li:hover span {display:block; position:absolute; top:30px; left:0;}
#menu ul li.support:hover span {left:auto; right:0;}

That CSS will mean the support-class list items get all the CSS the other list items get, but with the left property reset to default, and the right property set instead.