Solved: Class Problems

[Guest thebulletcollector]

hi!i try to design my navigation menue using csshow should the menue look likeall items should be same size;some elements have different colors on the end of the row. (border-right)elements of level_2 should have light background, elements of level_1 should have darker background;elements of class=submenu are hiddenelements which are active should be highlighted light yellow (class=active)this is the point where i get the problems! although the li is tagged active its not highlighted yellow

<link rel="stylesheet" href="navigation.css" type="text/css"/><li class="nav_level_1 first green "><a href="index.php/Front_page.html" title="SEL | Front page" class="first" accesskey="1" tabindex="1" onclick="this.blur();">Front page</a></li><li class="nav_level_1 active submenu yellow "><a href="index.php/Information.html" title="SEL| Information" class="submenu" accesskey="2" tabindex="2" onclick="this.blur();">Information</a></li><li class="nav_level_2 active first yellow "><a href="index.php/Information.html" title="SEL| Information" class="first" onclick="this.blur();">Information</a></li><li class="nav_level_2 grey "><a href="index.php/History.html" title="SEL| History" onclick="this.blur();">History</a></li><li class="nav_level_2 last grey "><a href="index.php/Statutes.html" title="SEL | Statutes" class="last" onclick="this.blur();">Statutes</a></li><li class="nav_level_1 yellow "><a href="index.php/Council.html" title="SEL | Council" accesskey="3" tabindex="3" onclick="this.blur();">Council</a></li><li class="nav_level_1 red "><a href="index.php/Publications.html" title="SEL | Publications" accesskey="4" tabindex="4" onclick="this.blur();">Publications</a></li><li class="nav_level_1 orange "><a href="index.php/Congress.html" title="SEL | Congress" onclick="this.blur();">Congress</a></li><li class="nav_level_1 orange "><a href="index.php/SEL_study_area.html" title="SEL | SEL study area" onclick="this.blur();">SEL study area</a></li><li class="nav_level_1 yellow "><a href="index.php/Membership.html" title="SEL | Membership" onclick="this.blur();">Membership</a></li><li class="nav_level_1 green "><a href="index.php/Varia.html" title="SEL | Varia" onclick="this.blur();">Varia</a></li><li class="nav_level_1 green "><a href="index.php/Site_map.html" title="SEL | Site map" onclick="this.blur();">Site map</a></li><li class="nav_level_1 green "><a href="index.php/Accessibility.html" title="SEL | Accessibility" onclick="this.blur();">Accessibility</a></li><li class="nav_level_1 last green "><a href="index.php/Contacts.html" title="SEL | Contacts" class="last" onclick="this.blur();">Contacts</a></li>

/* Style sheet navigation */.grey{BORDER-RIGHT: 6px solid #f5f5f5;}.green{BORDER-RIGHT: 6px solid #009900;}.red{BORDER-RIGHT: 6px solid #ff0000;}.yellow{BORDER-RIGHT: 6px solid #ffff00;}.orange{BORDER-RIGHT: 6px solid #ff6600;}li.submenu{width:100%;display:none;}.trail{width:100%;display:none;}.nav_level_1{width:87%;display:table;background-color:#dcdcdc;/*BORDER-RIGHT: 6px solid #ff0000; */BORDER-LEFT: 13px solid #dcdcdc; BORDER-BOTTOM: 1px solid #ffffff; BORDER-TOP: 0px solid #000000;}.nav_level_2{width:87%;display:table;background-color:#F5F5F5;/*BORDER-RIGHT: 6px solid #ff0000; */BORDER-LEFT: 13px solid #F5F5F5; BORDER-BOTTOM: 1px solid #ffffff; BORDER-TOP: 0px solid #000000;}

if needed i can provide screenshots of how it should look, and how it looks now.edit: short after writing this post i noticed that my css misses the li.active element (was disabled in code - shame on me)by enabling

li.active{background-color:#FFFFCC;color:#ff0000;BORDER-LEFT: 13px solid #FFFFCC;}

all looks as expected.thanks anyway!bullet

Edited September 11, 2009 by thebulletcollector