【发布时间】：2026-02-16 20:00:01
【问题描述】：
我的列表项在悬停时遇到了一个小问题。
菜单栏底部有一个小的嵌入阴影，定义在 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>
【问题讨论】：
-
请在此处发布您的代码以及链接到外部站点。如果该外部网站出现故障，任何人都无法看到您的代码。
-
thnx @BillyMoat，添加了代码。
-
li:first-child.menu-item 和 li:last-child.menu-item 类是干什么用的？所有按钮的阴影不应该相同吗？另外，如果您删除它们，您的问题就会消失！
-
是的，如果我只是删除它们，css 会小很多，但是 li:first-child 和 li:last-child 会创建圆角。 li:last-child 右侧有一个小阴影来模拟光源。我知道这是一个小细节，但阴影效果更好。
-
你试过用 ul:after 替换 li:last-child.menu-item 类吗
标签： css menu shadow nav css-selectors