CSS menu is flickering when scrolling through it with hover effects

Question

I hope i described the problem well!? You can see it here:

http://dealmob.de/index_dev.html

when u hover over the menu up and down fast u see the that its not staying, insteads its flickering like you would change the margins/paddings by few pixels.

Any advice on how to solve this problem?

thanks a lot

like requested:

        #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

It because you add a border on hover, and there is no border on non-hover. Add a transparent border to it to prevent it from bouncing.

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

If you don't want a colored border on browsers that don't support border-color: transparent (I'm looking at you IE) you can just add an additional pixel to margin or padding.

Answer 2

There is a padding-left for non hover, and no padding-left during hover. Add a padding-left rule for your hover rule as well.