I'm trying to use CSS to control the visual appearance of active and inactive links on my webpage.?

Question

I am nesting the div and ul tags and this is affecting the appearance of the links in IE. The links work properly in Mozilla (only the active parent page is displayed as active and the child pages are displaying as inactive. But, in IE, because the parent page is active, it's causing the child pages to display as active as well.Here is my code:

• PARENT LINK 1
• PARENT LINK 2
• Child Link


• PARENT LINK 3

CSS:
.navcontainer2
{
margin: 5px 0 0 10px;
}
.navlist2
{
border-bottom: 1px solid gray;
width: 150px;
}

.navlist2 li
{
list-style: none;
.navcontainer3
{margin: 5px 0 0 10px;
font-weight: bold;}
.navlist3{padding-left: 0;
margin-left: 0;width: 135px;}
.navlist3 li
{list-style: none;
margin: 0;
padding: 0.25em;}

Answer 1

When styling links in css, make sure you follow the Love-Hate pattern (LVHA): Link, Visited, Hover and Active.

a:link { }
a:visited { }
a: hover { }
a:active { }