我正在尝试建立一个网站,但我遇到了动态菜单的一些问题。更具体地说,我已经调整了一个模板以包含一个下拉菜单:一些菜单项包含一个子列表,当光标悬停时会出现;此外,当用户在该特定页面上时,主要项目应在鼠标悬停时更改背景。
我想得到的是,每当您访问子页面时,只会突出显示主菜单项,但不幸的是这不会发生。我不能让主项目在被选中时切换背景,我也不知道为什么。
这是涉及的 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>
一切顺利。
谢谢,
洛伦佐