用丝带将ul背景颜色onmouseover

Question

我有菜单： JSFIDDLE LINK

我想当有人用鼠标放在第一个列表项目的某些部分时，背景将变为蓝色并且会像这样（更大一点）：

Image of sample

非常感谢！ 塔尔。

Answer 1

您可以使用css box-shadow属性：

a
{
    display: inline-block;
    height: 40px;
    box-shadow: 0 0 0 grey;
    background-color: grey;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -ms-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
}
a:hover
{
    background-color: #004890;
    box-shadow: 0 -8px 0 #004890;
    color: white;
}

例如：JSBin