ホバーのリストアイテムに小さな問題があります。
メニューバーの下部には、liアイテムで定義された小さなはめ込み影があります。li：hoverを押すと、下部の小さなはめ込みが4つの側面すべてのはめ込み影に変わります。
li：lastchildを除いて、メニューがどのように反応するかについてはかなり満足しています。ホバーすると、最初に下と右のはめ込み影が削除され、次に新しい4面のはめ込み影が印刷されます。他のすべてのliアイテムは、シャドウをリセットせずに、シャドウを1つの底面から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>