I have written most of my css and cant seem to figure out where I went wrong and why a:active is not working. I just cant get it to work in my nav bar.
Im hoping one of you talented designers can tell me where I went wrong and give some tips on fixing it. Heres the code.
#Menu {
clear:both;
bottom: 0;
position: absolute;
left: 0;
width:100%;
background-image: url(../images/grad2.gif);
background-repeat: repeat-x;
background-position: bottom;
}
#Menu ul {
padding:0;
width:950px;
margin-top: 0px;
margin-right: 0;
margin-bottom: 0;
margin-left: 0px;
}
#Menu li {
background: url(../images/grad2.gif) repeat-x center #2A703C;
float:left;
list-style: none;
margin:0;
padding:0;
position:relative;
border-right-width: thin;
border-right-style: solid;
border-right-color: #FFFFFF;
}
#Menu li a {
color:#FFFFFF;
display:block;
font-size:0.9em;
font-weight:bold;
height:24px;
padding:6px 20px 0;
text-align:center;
text-decoration:none;
}
#Menu li ul {
width: auto;
position: absolute;
clear: left;
top: 30px;
left: -1px;
display: none;
text-align: left;
font-size: 0.9em;
background: transparent;
z-index: 1;
background: #EAEAEA;
border: 1px solid #C5C5C5;
border-top: 0;
margin: 0;
}
#Menu li ul li {
clear: both;
color: white;
text-align: left;
background: transparent;
margin: 0;
background: transparent;
}
#Menu li ul li a {
padding: 5px 10px 5px 10px;
font-size: 1em;
text-align: left;
margin: 0;
width: 150px;
height: auto;
background: transparent;
}
#Menu li ul li a:hover {
text-decoration: none;
color: #296C3A;
}
#Menu li:hover a, #Menu li.over a{
background: url(../../images/red/grad2-1.gif) repeat-x top #626A69;
}
#Menu li ul li a, #Menu li.over li a {
text-decoration: none !important;
}
#Menu li ul li a:hover {
text-decoration: underline !important;
}
#Menu li:hover ul, #Menu li.over ul {
display: block;
}
#Menu a:active {
background: url(../images/grad2-2.gif) repeat-x top #2A703C;
}
Any help is greatly appreciated