Ok so I have jumped into CSS Menus lol and glad I did as its a lot easier. I have got a problem though I can't solve on the net and that is how to make it so that if the main menu is class="active" the actual background and text color are the same as if its hovered over, basically so there is no effects and is just an active always hovered over menu.
As you can see "News" is Active using the class, but I dont know how to get it to change the "background-color" from #0061aa to #e4e4e4 & the text "color" from #e4e4e4 to #0061aa without any of the transition effects, just a way to show the user that they are on that specific page when class="active" is on <li>. I will use PHP script to echo the class="active" code for which ever page they are on but the CSS i cant seem to get it to work
please help meee
CSS Code:
._css3m{
display:none;
}
ul#css3menu1{
margin: 0;
list-style: none;
padding: 0;
border-width: 1px;
border-style: solid;
border-color: #0061aa;
}
ul#css3menu1 ul{
margin: 0;
list-style: none;
padding: 0;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #0061aa;
}
ul#css3menu1 ul{
display:none;position:absolute;left:0;top:100%;}
ul#css3menu1 li:hover>*{
display:block;}
ul#css3menu1 li{
position:relative;display:block;white-space:nowrap;font-size:0;float:left;}
ul#css3menu1 li:hover{
z-index:1;}
ul#css3menu1{
font-size:0;z-index:999;position:relative;display:inline-block;zoom:1;padding:0;
*display:inline;}
* html ul#css3menu1 li a{
display:inline-block;}
ul#css3menu1>li{
margin:0;}
ul#css3menu1 a:active, ul#css3menu1 a:focus{
outline-style:none;}
ul#css3menu1 a{
display:block;vertical-align:middle;text-align:center;text-decoration:none;font:bold 18px "Trebuchet MS", Arial, Helvetica, sans-serif;color:#e4e4e4;cursor:pointer;padding:0px 10px 0px 10px;background-color:#0061aa;border-width:0 0 0 0px;border-style:solid;border-color:#0061aa; -webkit-transition: color .2s ease-in-out;
-moz-transition: color .2s ease-in-out;
-o-transition: color .2s ease-in-out;
-ms-transition: color .2s ease-in-out;
transition: color .2s ease-in-out;}
ul#css3menu1 ul li{
float:none;margin:0px 0 0;border-width:0px 1px 1px 1px;border-style:solid;border-color:#0061aa;}
ul#css3menu1 ul a{
text-align:center;padding:0px;background-color:#e4e4e4;background-image:none;border-width:0;border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;font:bold 18px "Trebuchet MS", Arial, Helvetica, sans-serif;color:#0061aa;text-decoration:none; -webkit-transition: color .2s ease-in-out;
-moz-transition: color .2s ease-in-out;
-o-transition: color .2s ease-in-out;
-ms-transition: color .2s ease-in-out;
transition: color .2s ease-in-out;}
ul#css3menu1 li:hover>a,ul#css3menu1 li a.pressed{
background-color:#e4e4e4;border-color:#0061aa;border-style:solid;color:#0061aa;text-decoration:none;
}
ul#css3menu1 span{
display:block;overflow:visible;}
ul#css3menu1 ul li:hover>a,ul#css3menu1 ul li a.pressed{
background-color:#0061aa;background-image:none;color:#e4e4e4;text-decoration:none;}
HTML Code:
<ul id="css3menu1">
<li><a href="#" style="width:66px;height:30px;line-height:30px;">HOME</a></li>
<li><a href="#" style="width:68px;height:30px;line-height:30px;">NEWS</a>
<ul>
<li><a href="#" style="width:180px;height:30px;line-height:30px;">Latest</a></li>
<li><a href="#" style="width:180px;height:30px;line-height:30px;">Carnival</a></li>
<li><a href="#" style="width:180px;height:30px;line-height:30px;">Competition</a></li>
<li><a href="#" style="width:180px;height:30px;line-height:30px;">Archived</a></li>
</ul></li>
<li class="active"><a href="#" style="width:77px;height:30px;line-height:30px;">TIPPING</a>
<ul>
<li><a href="#" style="width:180px;height:30px;line-height:30px;">Register</a></li>
<li><a href="#" style="width:180px;height:30px;line-height:30px;">Ladder</a></li>
<li><a href="#" style="width:180px;height:30px;line-height:30px;">Prizes</a></li>
<li><a href="#" style="width:180px;height:30px;line-height:30px;">Terms & Conditions</a></li>
</ul></li>
<li><a href="#" style="width:65px;height:30px;line-height:30px;">CLUB</a> <ul>
<li><a href="#" style="width:220px;height:30px;line-height:30px;">Events</a></li>
<li><a href="#" style="width:220px;height:30px;line-height:30px;">Honour Board</a></li>
<li><a href="#" style="width:220px;height:30px;line-height:30px;">Legends</a></li>
<li><a href="#" style="width:220px;height:30px;line-height:30px;">Team Of The Decade</a></li>
<li><a href="#" style="width:220px;height:30px;line-height:30px;">Past Players</a></li>
<li><a href="#" style="width:220px;height:30px;line-height:30px;">Championship Results</a></li>
<li><a href="#" style="width:220px;height:30px;line-height:30px;">Committee Members</a></li>
<li><a href="#" style="width:220px;height:30px;line-height:30px;">Football Staff</a></li>
<li><a href="#" style="width:220px;height:30px;line-height:30px;">Membership</a></li>
</ul></li>
<li><a href="#" style="width:84px;height:30px;line-height:30px;">GALLERY</a> <ul>
<li><a href="#" style="width:180px;height:30px;line-height:30px;">Carnival</a></li>
<li><a href="#" style="width:180px;height:30px;line-height:30px;">Training Camp</a></li>
<li><a href="#" style="width:180px;height:30px;line-height:30px;">Events</a></li>
</ul></li>
<li><a href="#" style="width:65px;height:30px;line-height:30px;">SHOP</a></li>
<li><a href="#" style="width:63px;height:30px;line-height:30px;">FANS</a> <ul>
<li><a href="#" style="width:180px;height:30px;line-height:30px;">Facebook</a></li>
<li><a href="#" style="width:180px;height:30px;line-height:30px;">Twitter</a></li>
<li><a href="#" style="width:180px;height:30px;line-height:30px;">Wallpapers</a></li>
<li><a href="#" style="width:180px;height:30px;line-height:30px;">Newsletters</a></li>
<li><a href="#" style="width:180px;height:30px;line-height:30px;">Sponsor Offers</a></li>
</ul></li>
<li><a href="#" style="width:94px;height:30px;line-height:30px;">SPONSORS</a> <ul>
<li><a href="#" style="width:180px;height:30px;line-height:30px;">Current Sponsors</a></li>
<li><a href="#" style="width:180px;height:30px;line-height:30px;">Sponsor Packages</a></li>
</ul></li>
<li><a href="#" style="width:90px;height:30px;line-height:30px;">REGISTER</a></li>
<li><a href="#" style="width:86px;height:30px;line-height:30px;">CONTACT</a></li>
</ul>