我的列表项在悬停时遇到了一个小问题。
菜单栏底部有一个小的嵌入阴影，定义在 li 项上。在 li:hover 底部的小插图更改为所有 4 个侧面的插图阴影。
我对菜单的反应非常满意，除了 li:lastchild。在悬停时，它首先删除底部和右侧的嵌入阴影，然后打印新的 4 面嵌入阴影。所有其他 li 项目只是将阴影从一个底部更改为所有 4 个侧面，而不重置阴影。
我知道 css 阴影部分写得不是很干净。但是因为悬停必须更改阴影而不是替换，所以我不能简单地在多个选择器上提交语句。（如果你们知道如何做到这一点，请随时发表评论！）
所以我的问题是，我如何在 li:lastchild 上获得不同的嵌入阴影，它会在悬停时改变而不是被替换？
cedepen上的代码
<ul class="hoofd-menu menu">
<li class="menu-item"><a href="#">Menu Item I</a></li>
<li class="menu-item"><a href="#">Menu Item II</a></li>
<li class="menu-item"><a href="#">Menu Item III</a></li>
<li class="menu-item"><a href="#">Menu Item IV</a></li>
<li class="menu-item"><a href="#">Menu Item V</a></li>
<li class="menu-item"><a href="#">Menu Item VI</a></li>
</ul>
<style>
.menu li {
margin: 0 0 0 -4px;
padding: 15px 15px;
}
/* Menu Item Hover effect */
.menu li {
box-shadow: 0 -9px 5px -5px rgba(0,0,0, 1) inset, /* dark shadow */
2px -2px 3px 0px rgba(255,255,255, 0.2), /* white - top */
2px 2px 3px 0px rgba(255,255,255, 0.2); /* white - bottom */
}
li:last-child.menu-item {
box-shadow: -9px 0px 5px -5px rgba(0,0,0, 1) inset, /*dark shadow right */
0px -9px 5px -5px rgba(0,0,0, 1) inset, /*dark shadow */
2px -2px 3px 0px rgba(255,255,255, 0.2), /* white - top */
2px 2px 3px 0px rgba(255,255,255, 0.2); /* white - bottom */
}
li:first-child.menu-item {
box-shadow: 0px -9px 5px -5px rgba(0,0,0, 1) inset, /* dark shadow */
-2px -2px 3px 0px rgba(255,255,255, 0.2), /* white - left */
2px -2px 3px 0px rgba(255,255,255, 0.2), /* white - top */
2px 2px 3px 0px rgba(255,255,255, 0.2); /* white - bottom */
}
.menu li:hover {
cursor: pointer;
box-shadow: -1px -1px 10px 4px rgba(0,0,0, 1) inset, /* dark shadow */
2px -2px 3px 0px rgba(255,255,255, 0.2), /* white - top */
2px 2px 3px 0px rgba(255,255,255, 0.2); /* white - bottom */
}
.menu li:hover>a {
text-shadow: -1px -1px 3px rgba(0,0,0, 0.2); /* text shadow */
}
li:hover:last-child.menu-item {
box-shadow: -1px -1px 10px 4px rgba(0,0,0, 1) inset, /* dark shadow */
2px -2px 3px 0px rgba(255,255,255, 0.2), /* white - top */
2px 2px 3px 0px rgba(255,255,255, 0.2); /* white - bottom */
}
li:hover:first-child.menu-item {
box-shadow: -1px -1px 10px 4px rgba(0,0,0, 1) inset, /* dark shadow */
-2px -2px 3px 0px rgba(255,255,255, 0.2), /* white - top */
2px -2px 3px 0px rgba(255,255,255, 0.2), /* white - top */
2px 2px 3px 0px rgba(255,255,255, 0.2); /* white - bottom */
}
/******************************************************************************************/
/* Round corners */
/******************************************************************************************/
li:first-child.menu-item {
-moz-border-radius-bottomleft: 5px;
border-bottom-left-radius: 5px;
-moz-border-radius-topleft: 5px;
border-top-left-radius: 5px;
}
li:last-child.menu-item {
-moz-border-radius-bottomright: 5px;
border-bottom-right-radius: 5px;
-moz-border-radius-topright: 5px;
border-top-right-radius: 5px;
}
/******************************************************************************************/
/* Color palette */
/******************************************************************************************/
a {color: #0861a5;}
a:hover {color: #d98500;}
.menu li:hover>a,
.menu a {color: #dddddd;}
body {background-color: #b8d3e2;}
.menu li {background-color: #87a0af;}
.menu {font-family: Arial, Helvetica, sans-serif}
a {text-decoration: none;}
a, .menu li>a {
transition: 1.5s ease 0.2s;
-moz-transition: 1.5s ease 0.2s;
-webkit-transition: 1.5s ease 0.2s;
-o-transition: 1.5s ease 0.2s;
}
a:hover, .menu li, .menu li:hover>a {
transition: 0.4s ease 0.6s;
-moz-transition: 0.4s ease 0.6s;
-webkit-transition: 0.4s ease 0.6s;
-o-transition: 0.4s ease 0.6s;
}
ul, li, ol {
margin: 0;
padding: 0;
border: 0;
vertical-align: baseline;
}
ul {
margin: 100px 50px;
}
/* algemeen menu*/
.menu ul {
list-style-type: none;
}
.menu li {
display: inline;
}
</style>