I am using CSS to format my links. Everything works fine in Mozilla. But, in IE, the child items are inheriting the active link color from the parent item. I only want the parent item to display as active on the parent page. But, the parent, and children are showing up as active. Is there something different I need to do for IE vs. Mozilla to make this appear correctly?
Here is my code for my web page:
<div class="navcontainer2">
<ul class="navlist2">
<li><a href="link1.html">Link 1</a></li>
<li><a href="link2.html" id="active>Link 2</a></li>
<div class="navcontainer3">
<ul class="navlist3">
<li><a href="childlink1.html">Child Link 1</a></li>
<li><a href="childlink2.html">Child Link 1</a></li>
<li><a href="contentdevelopment.html">Content Development</a></li>
</ul>
</div>
<li><a href="link3.html">Link 3</a></li>
</ul>
</div>
Here is the code for the CSS:
.navcontainer2
{
margin: 5px 0 0 10px;
padding: 0;
font: normal 11px/18px "Arial", verdana, lucida, sans-serif;
font-weight: bold;
}
.navlist2
{
padding-left: 0;
margin-left: 0;
border-bottom: 1px solid gray;
width: 150px;
}
.navlist2 li
{
list-style: none;
margin: 0;
padding: 0.25em;
border-top: 1px solid gray;
}
.navlist2 li a
{
color:#666666;
text-decoration: none;
}
.navlist2 li a:hover
{
color: #FD8C22;
text-decoration: none;
}
.navlist2 li a:active
{
color: #FD8C22;
text-decoration: none;
}
.navlist2 li#active a
{
color: #FD8C22;
text-decoration: none;
}
.navcontainer3
{
margin: 5px 0 0 10px;
padding: 0;
font: normal 11px/18px "Arial", verdana, lucida, sans-serif;
font-weight: bold;
}
.navlist3
{
padding-left: 0;
margin-left: 0;
width: 135px;
}
.navlist3 li
{
list-style: none;
margin: 0;
padding: 0.25em;
border-top: 1px solid gray;
}
.navlist3 li a
{
color:#666666;
text-decoration: none;
}
.navlist3 li a:hover
{
color: #FD8C22;
text-decoration: none;
}
.navlist3 li a:active
{
color: #FD8C22;
text-decoration: none;
}
.navlist3 li#active a
{
color: #FD8C22;
text-decoration: none;
}