Прежде всего, я новичок в CSS и, похоже, не понимаю, как классы взаимодействуют с идентификаторами, поэтому я не могу заставить работать следующее меню.
<div id="navmenu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="index.php?=1">Menu2</a></li>
<li><a href="index.php?=2">Menu3</a></li>
</ul>
</div>
Это мой CSS:
#navmenu ul {
margin: 0;
padding: 0;
list-style-type: none;
list-style-image: none;
}
#navmenu li {
width:114px;
text-align:center;
float:left;
}
#navmenu ul li a {
text-decoration:none;
color: white;
background: #CE140B;
}
#navmenu a {
padding-top:4px;
padding-bottom:4px;
display:block;
width:100%;
}
#navmenu ul li a:hover {
color: #CE140B;
background: white;
}
Изменяет цвет фона и переднего плана, когда мышь наводится на элемент меню.
Теперь я хотел добавить к этому активный класс, чтобы при нахождении на домашней странице элемент меню «Домой» выглядел так же, как при наведении курсора. Следующий код не работает.
Я попытался изменить меню на это:
<li><a class="active" href="#">Home</a></li>
, а также
<li class="active"><a href="#">Home</a></li>
и мой CSS:
#navmenu ul li a:hover a:active {
color: #CE140B;
background: white;
}
и
#navmenu ul li a:hover li:active {
color: #CE140B;
background: white;
}
Ни то, ни другое не работает. Спасибо за вашу помощь, чтобы заставить это работать.