CSS для разделителей между элементами списка

Question

У меня есть следующий код HTML / CSS для списка, с которым я поиграл, поэтому он выглядит одинаково во всех браузерах ...

<div>
    <ul>  
        <li><a href='#'>Item 1</a></li>
        <li><a href='#'>Item 2</a></li>
        <li><a href='#'>Item 3</a></li>    
    </ul>
</div>

CSS:

div {
    width:290px;
}
ul {
    padding:0 15px;
    margin:5px 0 0 0;
    font-size:12px;
    color:#999;
}

ul li {
    padding:5px;
    margin:2px 0;
    border-bottom:1px solid #CCC;
    list-style-position:inside;
    overflow:hidden;
    font-size: 12px;
    line-height: 24px;
    list-style-type:circle;
}

ul li:hover {
    background-color:#EEE;
}

ul li a {
    color: #333333;
    display: block;
    float: right;
    font-family: Verdana,Geneva,sans-serif;
    font-size: 12px;
    line-height: 14px;
    margin: 0;
    padding: 5px 0;
    text-decoration: none;
    width: 238px;
}​

При наведении курсора цвет фона элемента списка становится серым, и перед каждым разделителем вверху появляется белый пробел размером 2 пикселя.

Проблема, возникающая при получении этого двухпиксельного промежутка внизу каждогоэлемент списка, а также в верхней части.

Есть идеи?

Answer 1

См. Приведенную ниже скрипку для кода и демонстрации

Скрипка: http://jsfiddle.net/S4wN8/1/

Демо: http://jsfiddle.net/S4wN8/1/embedded/result/

Answer 2

Поскольку вы определяете margin:2px 0; в вашей LI. Удалить это margin.

Проверьте это http://jsfiddle.net/d8gNJ/

Answer 3

@ Том: Обновите свой css на ul li hover

ul li:hover {
    background-color:#EEE;
    padding-top:2px; 
}

Вы можете проверить это здесь http://jsfiddle.net/6DXx6/3/

Дайте мне знать, если это то, что вы хотите

Answer 4

заменить поля на это:

ul li {
    margin:0;
}