Chrome не отображает hover

[spleen]

Всем доброго времени суток! Делаю горизонтальное меню с помощью списков, столкнулся с прблемой: Google Chrome не отображает hover, т.е. при наведении курсора фон не меняется, в остальных браузерах работает нормально. Подскажите, как решить проблему, заранее благодарен.

HTML:

<div id="menu">

        <ul class="menu">
            <li ><a href="">ссылка 1</a></li>
            <li ><a href="">ссылка 2</a></li>
            <li ><a href="">ссылка 3</a></li>
            <li ><a href="">ссылка 4</a></li>
            <li ><a href="">ссылка 5</a></li>
    </div>

CSS:

#menu{
    width: 100%;
    height: 30px;
    padding: 0px;
    margin: 0px;
    background-color: #dfdfdf;
    background: #eee; /* Old browsers */
    background: -moz-linear-gradient(top, rgba(252,252,252,1) 0%, rgba(224,224,224,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(252,252,252,1)), color-stop(100%,rgba(224,224,224,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(252,252,252,1) 0%,rgba(224,224,224,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(252,252,252,1) 0%,rgba(224,224,224,1) 100%); /* Opera11.10+ */
    background: -ms-linear-gradient(top, rgba(252,252,252,1) 0%,rgba(224,224,224,1) 100%); /* IE10+ */
    background: linear-gradient(top, rgba(252,252,252,1) 0%,rgba(224,224,224,1) 100%); /* W3C */
    border-style: solid;
    border-width: 1px;
    border-color: #cacaca;
    border-left: none;
    border-right: none ;
}

#menu ul{
    margin: 0px;
    padding: 0px;
}

#menu ul li{
    display: inline;
    height: 30px;
    float: left;
    list-style: none;
    margin-left: 5px;
    line-height: 30px;
}

#menu li a{
    color: #736e74;
    text-decoration: none;
    padding-left: 5px;
    padding-right: 5px ;
}

#menu ul a:hover{
    color: #ffffff;
}


#menu li a:hover{
    background: #cacaca;
    display: block;
}

[psywalker]

А где закрывающий тег </ul>?

и давай ссылку на рабочий пример.

[spleen]

Методом научного тыка удалось заставить работать в хроме как надо.

изменил CSS:

#menu li:hover {
    color: #ffffff;
    height: 30px;
    background: #cacaca;
    display: block;
}

Объяснить только не могу почему сейчас работает, а до изменения не работало.

Edited November 12, 2012 by spleen

[logicface]

Ну потому что вы писали #menu li a:hover, то есть hover на тег <a>, который расположен в ul с id="menu" и которые расположены в ячейках <li>. А вы вроде хотели что бы была смена цвета у самой ячейки. Как я думаю, чисто визуально.=)

Edited November 12, 2012 by logicface

[psywalker]

Методом научного тыка удалось заставить работать в хроме как надо.

изменил CSS:

#menu li:hover {
    color: #ffffff;
    height: 30px;
    background: #cacaca;
    display: block;
}

Объяснить только не могу почему сейчас работает, а до изменения не работало.

Да это баг какой-то)

Я бы посоветовал делать так:

#menu li:hover a {

color: #ffffff;

height: 30px;

background: #cacaca;

display: block;

}