Как сделать так, чтобы пункт меню «css» в меню навигации оставался активным

Question

Итак, у меня есть довольно простое вертикальное меню CSS, основанное на 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>

Мне нужны три основных цвета (например, tan для 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. ^^^^^^

Answer 1

Было бы полезно, если бы вы также могли опубликовать 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.

Answer 2

.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 исправит вашу проблему.

EDIT:

Smacks head Извините, я должен был отметить, что вы пытались исправить проблему со ссылками :visited ... Так как вы не указали стиль для a.vertnavdown:visited, он наследует стиль .vertnav a:visited.

Решение состоит в том, чтобы добавить a.vertnavdown:visited к любому объявлению стиля, от которого вы хотите его унаследовать. Что должно решить проблему.

Answer 3

Попробуйте с помощью .vertnav li a: посещено .vertnavdown