Вот простой HTML-код с, как мне казалось, простым CSS (обратите внимание, что два элемента являются ссылками, а два — нет):
<html>
<head>
<style>
li.menu:hover {
background-color: #0ff;
}
li.menu a {
background-color: #0f0;
}
li.menu a:hover {
background-color: #00f;
}
</style>
</head>
<body>
<ul>
<li class="menu"><a>item1</a></li>
<li class="menu"><a>item2</a></li>
<li class="menu">item3</li>
<li class="menu">item4</li>
<ul>
</body>
</html>
Теперь в Firefox это работает, как я и ожидал, а в Chrome (v24) — нет.
Я ожидаю, что item1 и item2 будут иметь #0f0 (зеленый) цвет, когда они не зависают выше, и #00f (синий) цвет при зависании. Но они всегда зеленые (в Chrome)! Так почему же :hover работает для item3 и item4, но не для item1 и item2?
Есть ли способ, который также будет работать в Chrome и при этом будет таким же простым?
