使用悬停效果滚动浏览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

这是因为您在悬停时添加了边框,并且非悬停时没有边框.为其添加透明边框以防止其弹跳.

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

如果你不想在不支持的浏览器上使用彩色边框border-color: transparent(我正在看你的IE),你可以在边距或填充上添加一个额外的像素.