所以我有一个基于 UL 的相当简单的垂直 CSS 菜单。
<ul class="vertnav">
<li><a href="unselected1.php">Item1</a></li>
<li><a href="unselected2.php">Item2</a></li>
<li><a href="selected.php" class="vertnavdown">Selected</a></li>
</ul>
我想要三种基本颜色(默认 LI 为棕褐色,VERTNAVDOWN 为橙色,A:HOVER 为红色。但是我似乎无法让 vertnavdown 类正确继承,.vertnav li a :visited
每次都会覆盖它。如果我使用 !important
强制它通过,我似乎也无法让悬停工作。
有什么建议吗?我以为我了解 CSS 中的继承,但我想我不了解。
.vertnav{
list-style: none;
margin: 0px;
width: 172px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
text-align: left;
height: 45px;
}
.vertnav li{
margin: 0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
border-bottom: 0px none;
border-right: 0px none;
border-top: 1px solid #fff;
border-left: 0px none;
text-align: left;
height: 45px;
width: 172px;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
}
.vertnav li a{
display: block;
text-align: left;
color: #666666;
font-weight: bold;
background-color: #FFEEC1;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
text-decoration: none;
padding-top: 10px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 15px;
height: 45px;
}
.vertnav li a:visited{
display: block;
text-align: left;
color: #666666;
background-color: #FFEEC1;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
text-decoration: none;
padding-top: 10px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 15px;
height: 45px;
}
.vertnav li a:hover{
color: white;
background-color: #ffbf0c;
font-family: Verdana, Arial, Helvetica, sans-serif;
height: 45px;
text-decoration: none;
font-weight: bold;
}
.vertnavdown a
{
display:block;
color: #FFF;
background-color: #ff9000;
}
.vertnavdown a:hover
{
background-color: #ffbf0c;
}
^^^^^^^^^^^^^ 编辑以添加 CSS。 ^^^^^^
最佳答案
如果您也可以发布 css 会有所帮助。
你通常需要的是这样的东西
<ul id="nav"><br/>
<li><a>one</a></li><br/>
<li class="active"><a>two</a></li><br/>
</ul>
CSS 将是:
#nav li{<br/>
color: red;<br/>
}<br/>
#nav li a:visited{<br/>
color: green;<br/>
}<br/>
#nav li.active a{<br/>
color: blue;<br/>
}
您需要对事件的 css 命名更加具体。
关于css - 如何使 css 导航菜单 "selected"选项仍然可点击,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2602968/