Strange CSS behavior

Question

Sorry for the length of the post. This is quite a weird problem and I want to give as much info as possible.

I have the following css rules I am using for a horizontal navigation menu. The menu is created using ASP:repeaters and a database table of items.

#nav
{
    margin: 0px;
    padding:0px;
    list-style-type: none;
    height: 20px;
    margin-right:auto;
    margin-left:auto;
    width:726px;
}

#nav > li
{
    margin:0px;
    padding:0px;
    display:inline-block;
    color: #FFFFFF;
    height:17px;
    border:0px;
    width:90.75px;
    text-align:center;
    position:relative;
    float:left;
}

#nav > li > ul
{
    margin:0px;
    padding:0px;
    position: absolute;
    left: -999em;
    display:block;
    overflow:visible;
    z-index:100;
    width:150px;
    background-color:#eee;
}

#nav > li:hover > ul
{
    left:0px;
    z-index:100;
    box-shadow: 0px 0px 5px #555;
    -moz-box-shadow: 0px 0px 5px #555;
    -webkit-box-shadow: 0px 0px 5px #555;
    /* IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";

    /* IE 5-7 */
    filter: alpha(opacity=80);

    /* Netscape */
    -moz-opacity: 0.8;

    /* Safari 1.x */
    -khtml-opacity: 0.8;

    /* Good browsers */
    opacity: 0.8;

}

#nav > li > ul > li
{
    left:0px;
    display:block;
    color:#333;
    width:150px;
    text-align:left;
    height:auto;
}


#nav a, #navbottom a
{
    line-height:20px;
    display:block;
    height:20px;
    border-bottom:2px solid #0c1b53;
}

#nav a:link, #navbottom a:link, #nav a:visited, #navbottom a:visited
{
    border-bottom:2px solid #0c1b53;
    color: #FFFFFF;
    text-decoration: none;
}

#nav a:hover, #navbottom a:hover
{
    border-bottom:2px solid #fff;
}

#nav a:active, #navbottom a:active
{
    border-bottom:2px solid #fff;
    color: #FEFFBD;
    text-decoration: none;
}

#nav > li > ul > li a:link
{
    margin:10px;
    line-height:15px;
    height:auto;
    color:#444;
    border-bottom: 1px solid #777;
    /* IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";

    /* IE 5-7 */
    filter: alpha(opacity=100);

    /* Netscape */
    -moz-opacity: 1.0;

    /* Safari 1.x */
    -khtml-opacity: 1.0;

    /* Good browsers */
    opacity: 1.0;
}

#nav > li > ul > li a:hover
{
    color:#222;
    border-bottom: 1px solid #555;
}

The HTML it produces is below:

<ul id="nav">
    <li>
        <input type="hidden" name="ctl00$TopNavRepeat$ctl01$LinkIdField1" id="ctl00_TopNavRepeat_ctl01_LinkIdField1" value="1" />
        <a id="ctl00_TopNavRepeat_ctl01_HyperLink1" title="Home Page" href="../default.aspx">Home           </a>
        <ul></ul>
    </li>
    <li>
        <input type="hidden" name="ctl00$TopNavRepeat$ctl02$LinkIdField1" id="ctl00_TopNavRepeat_ctl02_LinkIdField1" value="10" />
        <a id="ctl00_TopNavRepeat_ctl02_HyperLink1" title="News from the IMA" href="../news/list.aspx">News           </a>
        <ul></ul>
    </li>
    <li>
        <input type="hidden" name="ctl00$TopNavRepeat$ctl03$LinkIdField1" id="ctl00_TopNavRepeat_ctl03_LinkIdField1" value="11" />
        <a id="ctl00_TopNavRepeat_ctl03_HyperLink1" title="About the IMA" href="../organisation/history.aspx">Organisation   </a>
        <ul>
            <li><a id="ctl00_TopNavRepeat_ctl03_DropDownList_ctl01_HyperLink1" title="about the IMA" class="dropdown_Item" href="../organisation/history.aspx">About          </a>
            </li>
            <li><a id="ctl00_TopNavRepeat_ctl03_DropDownList_ctl02_HyperLink1" title="This is a description" class="dropdown_Item" href="list.aspx?type=all">Members        </a>
            </li>
            <li><a id="ctl00_TopNavRepeat_ctl03_DropDownList_ctl03_HyperLink1" class="dropdown_Item" href="../Boats/list.aspx#">Boats</a>
            </li>
        </ul>
    </li>
    <li>
        <input type="hidden" name="ctl00$TopNavRepeat$ctl06$LinkIdField1" id="ctl00_TopNavRepeat_ctl06_LinkIdField1" value="14" />
        <a id="ctl00_TopNavRepeat_ctl06_HyperLink1" href="../adverts">Ads            </a>
        <ul>
            <li><a id="ctl00_TopNavRepeat_ctl06_DropDownList_ctl01_HyperLink1" title="All For Sale Items" class="dropdown_Item" href="../adverts/list.aspx?type=sale">For Sale       </a>
            </li>
            <li><a id="ctl00_TopNavRepeat_ctl06_DropDownList_ctl02_HyperLink1" title="All Wanted Items" class="dropdown_Item" href="../adverts/list.aspx?type=wanted">Wanted         </a>
            </li>
            <li><a id="ctl00_TopNavRepeat_ctl06_DropDownList_ctl03_HyperLink1" title="Advertise with the IMA" class="dropdown_Item" href="../adverts/edit.aspx?action=New">Post an Ad     </a>
            </li>
        </ul>
    </li>   
</ul>

The Menu this produces (some list items have been omitted for shortness) is below. Despite the two item "Organisation" and "Ads" each having three child items and despite each child item seeming to be identical the second item in organisation displays with the rules for nav > li a instead of nav > li > ul > li a.

I've been going through it and as far as i cant tell what is happening. Can anyone explain this?

Answer 1

There is no #nav > li > ul > li a:visited or active rules defined. The members link is taking information from the #nav a:active instead and so displaying incorrectly.

Changing #nav > li > ul > li a:link to #nav > li > ul > li a:link, #nav > li > ul > li a:visited, #nav > li > ul > li a:active fixes this issue