CSS-меню мерцает при прокрутке с эффектами наведения

Question

Надеюсь, я хорошо описал проблему !? Вы можете увидеть это здесь:

http://dealmob.de/index_dev.html

когда вы наводите курсор мыши вверх и вниз по меню, вы видите, что оно не остается, вместо того, чтобы мигать, как если бы вы изменили поля / отступы на несколько пикселей.

Любой совет, как решить эту проблему?

Большое спасибо

как и просили:

        #topcities {
            float:right;
        }  

        #topcities li {
            padding-left:5px;
            width:100px;
        }
        #topcities li:hover {
            cursor:pointer;
            color:#000;
            background: url(images/hover_menue_back.jpg) repeat-x #FFF;
            -moz-border-radius: 5px;
            -webkit-border-radius: 5px;
            border:grey 1px solid;
            width:100px;
        }

Answer 1

Это потому, что вы добавляете границу для hover, и нет границы для hover. Добавьте прозрачную рамку, чтобы она не подпрыгивала.

    #topcities li {
        padding-left:5px;
        width:100px;
        border: 1px solid transparent;
    }

Если вам не нужна цветная рамка в браузерах, которые не поддерживают border-color: transparent (я смотрю на вас, IE), вы можете просто добавить дополнительный пиксель для полей или отступов.

Answer 2

Имеется отступ слева для не наведения и нет отступа при наведении. Также добавьте правило отступа для вашего правила наведения.