Have Geek Brain

CSS menu flickers when scrolling with hover effects

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

http://dealmob.de/index_dev.html

when u quickly hovers up and down over the menu, you see that it doesn't stay, instead of flickering like if you changed the margins / paddings by a few pixels.

Any advice on how to fix this problem?

Many thanks

as 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;
        }
+2


a source to share


2 answers


This is because you add a border on hover and there is no border for non-hovering. 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 need a colored border in browsers that don't support border-color: transparent

(I'm looking at you in IE), you can simply add an extra pixel to the box or padding.

+6


a source


There is padding-left for non-hover, and no padding-left when hovering. Add a padding-left rule for your hover rule.



0


a source






More articles:


All Articles