Change absolute position from left to right on span tag depending on class

Question

This is my first question, but I'm sure there is still a lot to come. I have a little problem with the position that I would like to know, even if it is possible.

I have an unordered list ( <ul> ) with a floating <li> s, for the main options I float these left ones, and for the contact and support options I float them correctly, how good it is. Now I have a <span> inside each <li> , which I show below the horizontal list, a list for the menu. These <span> work as a description for selecting the menu, and for the usual parameters that I use position:absolute; top:30px; left:0; position:absolute; top:30px; left:0; It works as a suspect. Now I would like to change the position attributes for those menu items that I float to the right, so that the range gets position:absolute; top:30px; right:0; position:absolute; top:30px; right:0; , and it does not work at all. It seems impossible to change this with a more specific CSS rule and then another, but the float works fine.

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> 

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 css doesn't matter! If anyone has an answer or a job, I really appreciate the help.

The question is answered and the problem is resolved. Check the posts of James Arons or Mercator.

Answer 1

Even if you decide to set right:0 , your left:0 is still inherited. You need to set left:auto to override this style for the support class.

Answer 2

Judging by this CSS, you do not seem to understand CSS correctly, or you are not using it correctly, at least. You can read the SitePoint article on cascade, specificity, and inheritance for a good introduction.

The reason this doesn't work is because the last two lines of this CSS apply to list items with the support class. A line from the second to the last is applied to all elements of the list, and the last line is added to the elements of the support list. So, since there is no left property in this last line, the left property is cascaded down from the previous line, making it left: 0 too.

When you use a class to indicate a special case, you should not repeat the entire CSS of the general case, but provide only 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;} 

This CSS will mean that the support -Class list items get all the CSS received by the other list items, but with the left reset property by default and the right property set instead.

Answer 3

A bit strange. I can't tell you why your code is not working, should work since support: the hover range is a more specific selector.

Correction Found: The position of the absolute elements remains on the left: 0; default. If you remove left: 0; from the range selector it will work.

Your code will 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}