如何使 CSS 导航菜单“选定”选项仍然可点击
所以我有一个基于 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< /code> 每次都会覆盖它。如果我使用 !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。
So I have a fairly simple vertical CSS menu based off of UL.
<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>
I want three basic colors (say tan for default LI, orange for VERTNAVDOWN, and red for A:HOVER. However I can't seem to get the vertnavdown class to inherit right, and the .vertnav li a:visited overrides it every time. if I use !important to force it through I can't seem to also get the hover to work.
Any suggestions? I thought I understood inheritance in CSS but I guess I don't.
.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;
}
^^^^^^^^^^^^^ Edited to add CSS. ^^^^^^
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
如果您也可以发布 css 将会有所帮助。
您通常需要的是这样的
CSS 为：
#nav li{颜色：红色；
}
#nav li a:访问过{
颜色：绿色；
}
#nav li.active a{
颜色：蓝色；
}
您需要更具体地使用活动 css 命名。
It would help if you could post the css as well.
What you normally need is something like this
<ul id="nav"><li><a>one</a></li>
<li class="active"><a>two</a></li>
</ul>
the css would be:
#nav li{color: red;
}
#nav li a:visited{
color: green;
}
#nav li.active a{
color: blue;
}
you need to be more specific with the active css naming.
.vertnav li a:visited非常具体，在 CSS 中，更具体的内容会覆盖不太具体的内容，即使不太具体的 CSS 出现在继承链的后面。.vertnavdown本身将始终被.vertnav li a:visited覆盖 - 最好的解决方案是更具体地描述您的描述.vertnavdown。将
.vertnavdown a和.vertnavdown a:hover更改为.vertnav ul li a.vertnavdown.vertnav ul li a.vertnavdown:hover将解决您的问题。编辑：
Smacks head 抱歉，我应该注意到您正在尝试解决
:visited链接的问题...因为您没有为 < 指定样式code>a.vertnavdown:visited 它继承了.vertnav a:visited的风格。解决方案是将
a.vertnavdown:visited添加到您希望其继承的任何样式声明中。 这应该可以解决问题。.vertnav li a:visitedis very specific, and in CSS, more specific overrides less specific, even if the less specific CSS comes later in the inheritance chain..vertnavdownon it's own will always be overridden by.vertnav li a:visited-- the best solution is to be more specific with your description of.vertnavdown.Changing
.vertnavdown aand.vertnavdown a:hoverto.vertnav ul li a.vertnavdown.vertnav ul li a.vertnavdown:hoverwill fix your problem.EDIT:
Smacks head Apologies, I should have noted that you were trying to fix a problem with the
:visitedlinks ... Since you haven't specified a style fora.vertnavdown:visitedit inherits the style of.vertnav a:visited.The solution then is to add
a.vertnavdown:visitedto whatever style declaration you want it to inherit from. That should fix the problem.尝试使用 .vertnav li a:visited .vertnavdown
Try with .vertnav li a:visited .vertnavdown