Question

我正在尝试建立一个网站，但我遇到了动态菜单的一些问题。更具体地说，我已经调整了一个模板以包含一个下拉菜单：一些菜单项包括光标结束时出现的子列表;此外，当用户在该特定页面上时，主项目应该在鼠标上方改变背景。

我想得到的是，每当您访问子页面时，只会突出显示主菜单项，但不幸的是，这不会发生。选中后我无法使主项目切换背景，我不知道为什么。

这是涉及的CSS： / * menu * /

#menu {
    background: #65b63a;
    clear: both;
    height: 30px;
    border: 1px solid #65b63a;
    padding:0;
    margin:0;
}

#menu ul li.active a, #menu ul li:hover {
    background:url('images/menuover.jpg') repeat-x bottom;
}

#menu ul {
    list-style: none;
    float:left;
    margin:0;
    padding:0;
    font-size:10pt;
}    

#menu ul li {
    background: #65b63a;
    position:relative;
    display: block;
    float: left;
    margin-right: 1px;
    font-size: 10pt;
    text-transform:uppercase;
    line-height: 30px;
    padding:0;
    margin:0;
    border-right:1px #aeaeae solid;
}

#menu ul li a {
    display: block;
    float: left;
    padding: 0 17px;
    color: #FFFFFF;
    text-decoration: none;
}


#menu ul li.sub a{
    background-image:none;
}

#menu ul li ul{
    display:none;
}

#menu ul li ul li{
    padding:0;
    margin:0;
}


#menu ul li:hover ul{
    background:none;
    display:block;
    position:absolute;
    width:200px;
    padding-top:30px;
    margin:0;
    font-size:10pt;
}

#menu ul li ul a:hover {
    text-decoration:underline;
    background:none;
}

#menu ul li li{
    width:200px;
    font-size:10pt;
    background-image:none;
    text-transform:none;

}

这是涉及的HTML：

        <div id="menu">
            <ul>
               <li><a href="index.html">Home</a></li>  <!-- this one is a single item -->
                <li class="active"><a href="#">Chi? Dove? Quando?</a> <!-- this should be "active" but it isn't -->
                    <ul>
                        <li class="sub"><a href="chi.html">Chi siamo</a></li>
                        <li class="sub"><a href="dove.html">Dove siamo</a></li>
                        <li class="sub"><a href="orari.html">Orari</a></li>
                        <li class="sub"><a href="staff.html">Lo staff</a></li>
                        <li class="sub"><a href="contatti.html">Contatti</a></li>
                    </ul>
                </li>
            </ul>
        </div>

我认为问题出在CSS中，但我无法使其发挥作用。

提前致谢，洛伦佐

P.S。作为参考，您可以找到@ http://www.pansepol.it/raw网站的原始内容主页是单一页面的例子，而“Viaggi di Gruppo”＆gt; “亚洲”是一个多层次的例子。正如您所看到的，在导航到最后一页时，“Viaggi di Gruppo”并未突出显示。

编辑：--------------------------------------------- --------------

傻了我，就这么简单。我将“有效”类应用于<li>元素，并按照Justus和Raad的建议更正了CSS。

现在代码为：

#menu ul li.active a, #menu ul li:hover {
    background:url('images/menuover.jpg') repeat-x bottom;
}

和

<li class="active"><a href="#">Chi? Dove? Quando?</a>
                <ul>
                    <li class="sub"><a href="chi.html">Chi siamo</a></li>
                    <li class="sub"><a href="dove.html">Dove siamo</a></li>
                    <li class="sub"><a href="orari.html">Orari</a></li>
                    <li class="sub"><a href="staff.html">Lo staff</a></li>
                    <li class="sub"><a href="contatti.html">Contatti</a></li>
                </ul>
            </li>

一切顺利。

谢谢，

洛伦佐

Answer 1

我相信你在CSS中犯了一个小错误：

#menu ul li.active a, #menu ul li:hover {

应该是：

#menu ul li.active, #menu ul li:hover {

因为您希望li显示背景图片，而不是a。

Answer 2

在“主页”页面上，“活动”类正在应用于<li>元素;但是在“Viaggi di Gruppo”＆gt; “亚洲”它适用于<a>元素。它必须是一个或另一个，然后在必要时在css中调整。

HTML / CSS菜单的小错误

2 个答案: