2

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

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

这是涉及的 CSS：/* 菜单 */

#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 中，但我无法让它工作。

在此先感谢，洛伦佐

PS 作为参考，你可以找到网站的一个 raw @http ://www.pansepol.it/raw 主页是单项页面的示例，而“Viaggi di Gruppo”>“亚洲”是一个示例一个多层次的。如您所见，在导航到最后一页时，“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>

一切顺利。

谢谢，

洛伦佐

4

2 回答 2

1

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

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

应该：

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

因为您希望li显示背景图像，而不是您的a.

于 2013-02-18T14:20:52.650 回答
0

On the "Home" page, the "active" class is being applied to the <li> element; but on the "Viaggi di Gruppo" > "Asia" it is applied to the <a> element instead. It needs to be one or the other, then adjusted in the css if necessary.

于 2013-02-18T14:27:12.720 回答