Html ul的li背景色，带丝带

我有菜单：

我想当有人用鼠标点击第一个列表项时，背景会变为蓝色，这样会更大一些：

非常感谢！ Tal.

您可以使用css框阴影属性：

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;
}

---

示例：

您的JSFIDLE链接也包含图像。没有JSFIDLE链接，它与您的样本中的图像相同。它的悬停不在上方，搜索并使用css悬停属性。这里有一个相同的问题，但img而不是li