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

Question

Hi.

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

Hmm weird. I can't tell you why your code does not work, should work since the support:hover span is a more specific selector.

Found a fix though: Position absolute elements got left: 0; by default. If you remove left: 0; from the span selector it will work.

Your code would look like this:

#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;}
#menu ul li.support:hover span{display:block; position:absolute; top:30px; right:0}

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.

Answer 3

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 4

Thanks for the replies guys.

@NickGPS It seems like I left out the span in my code example but they'r suposed to be there and its the content of these spans that should be displayed under the list itself.

@richard Thanks for that trick never thought about it of course left is 0 as default pretty obvious when you think about it

@James Aaron & mercator just what I was looking for, thanks for the explanation mercator had totally forgotten about that cascade :/. And yes in my real css document I do what I can not to repeat the css.

Thanks all for taking your time.

Regards Tord