CSS悬停块li元素消失边界圆

Question

我的问题是我在其中有圆角和列表(ul-> li),当我悬停在li元素上时我的块圆角消失了.你能告诉我如何解决它.

演示:http://jsfiddle.net/kolxoznik1/zALFL/4/

HTML

            <div id="drop">
                <ul id="menu">
                    <li><a href="#home">Test-1</a></li>
                    <li><a href="#about">Test-2</a></li>
                    <li><a href="#skills">Test-3</a></li>
                </ul>
            </div>

CSS

ul{
    list-style: none outside none;
    margin: 0;
    padding: 0;
}
#drop {
    background: #F8F8F8;
    top: 40px;
    left: 0px;
    width: 180px;
    border: 1px solid #CCC;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px; 
}
#drop li a {
    color: #333;
    display: block;
    padding: 5px 10px;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 13px;
    text-decoration: none;
}
#drop li a:hover {
    background: #333;
    color: #FFF;
}

Answer 1

它的发生是因为背景li是div,因此弯曲的边界不会出现.

写:

#drop {
    overflow:hidden;
}

这里更新了小提琴.

Answer 2

该修复程序给overflow:hidden到div下降

问题是当悬停在列表项目上时,列表项目的角落与.So的角落重叠,ul当您overflow:hidden为ul重叠提供隐藏时. DEMO