Question

对不起该帖子的长度。这是一个非常奇怪的问题，我想尽可能多地提供信息。

我有以下用于水平导航菜单的css规则。使用ASP：repeater和项目数据库表创建菜单。

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

下面是这个产生的菜单（为了简洁而省略了一些列表项）。尽管两个项目“组织”和“广告”各自具有三个子项目，并且尽管每个子项目看起来相同，但组织中的第二项目显示为导航＆gt;的规则。 li a而不是nav＆gt; li> ul＆gt;李安

As the menu displays http://dl.dropbox.com/u/4913815/Untitled.png

我一直在经历它，而且我无法告诉发生了什么。谁能解释一下呢？

Answer 1

没有#nav＆gt; li> ul＆gt; li a：已定义的已访问或活动规则。成员链接正在从#nav a：active中获取信息，因此显示不正确。

更改#nav＆gt; li> ul＆gt; li a：链接到#nav＆gt; li> ul＆gt; li a：link，＃nav＆gt; li> ul＆gt;李：访问过，＃nav＆gt; li> ul＆gt; li a：主动修复此问题

奇怪的CSS行为

1 个答案: