Странное поведение CSS

Question

Извините за длину сообщения.Это довольно странная проблема, и я хочу дать как можно больше информации.

У меня есть следующие правила CSS, которые я использую для горизонтального меню навигации.Меню создается с использованием ASP: повторители и таблица пунктов базы данных.

#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;
}

Ниже приведен HTML-код:

<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>

Это меню (некоторые пункты списка для краткости опущены) находится ниже.Несмотря на то, что два элемента «Организация» и «Объявления» имеют по три дочерних элемента, и, несмотря на то, что каждый дочерний элемент выглядит идентичным, второй элемент в организации отображается с правилами для nav> li a вместо nav> li> ul> li a.

Когда отображается меню http://dl.dropbox.com/u/4913815/Untitled.png

Я прошел через это и насколько я не могу сказать, что происходит.Кто-нибудь может объяснить это?

Answer 1

Не определены #nav> li> ul> li a: посещенные или активные правила. Вместо этого ссылка для членов получает информацию из #nav a: active и поэтому отображается некорректно.

Изменение #nav> li> ul> li a: ссылка на #nav> li> ul> li a: ссылка, #nav> li> ul> li a: посещения, #nav> li> ul> li a: активные исправления этой проблемы