如何让CSS更改li hover上的插入阴影，而不是重置它？

我的悬停列表项有一个小问题

菜单栏底部有一个小的插入阴影，在li项上定义。在li上：将底部的小插图悬停，使其在所有4条边上都变为插图阴影

我对菜单的反应很满意，除了李：最后一个孩子。悬停时，首先删除底部和右侧的插入阴影，然后打印新的4面插入阴影。所有其他li项目只需将阴影从单个底部更改为所有4个侧面，而无需重置阴影

我知道css阴影部分写得不是很干净。但是因为悬停必须改变阴影而不是替换，所以我不能在多个选择器上简单地提交语句。（如果你们知道这样做的方法，请随时发表评论！）

所以我的问题是，如何在li:lastchild上获得一个不同的嵌入阴影，它将在悬停时改变而不是被替换

上的代码

李先生{
利润率：0-4倍；
填充：15px 15px；
}
/*菜单项悬停效果*/
李先生{
盒子阴影：0-9px 5px-5px rgba（0,0,0,1）嵌入，/*暗影*/
2px-2px 3px 0px rgba（255255255，0.2），/*白色-顶部*/
2px 2px 3px 0px rgba（255255255，0.2）；/*白色-底部*/
}
李：最后一个孩子。菜单项{
长方体阴影：-9px 0px 5px-5px rgba（0,0,0,1）插图，/*右侧暗影*/
0px-9px 5px-5px rgba（0,0,0,1）镶嵌，/*暗影*/
2px-2px 3px 0px rgba（255255255，0.2），/*白色-顶部*/
2px 2px 3px 0px rgba（255255255，0.2）；/*白色-底部*/
}
李：第一个孩子。菜单项{
长方体阴影：0px-9px 5px-5px rgba（0,0,0,1）插图，/*暗影*/
-2px-2px 3px 0px rgba（255255255，0.2），/*白色-左侧*/
2px-2px 3px 0px rgba（255255255，0.2），/*白色-顶部*/
2px 2px 3px 0px rgba（255255255，0.2）；/*白色-底部*/
}
.菜单李：悬停{
光标：指针；
盒影：-1px-1px 10px 4px rgba（0,0,0,1）镶嵌，/*暗影*/
2px-2px 3px 0px rgba（255255255，0.2），/*白色-顶部*/
2px 2px 3px 0px rgba（255255255，0.2）；/*白色-底部*/
}
.菜单li：悬停>a{
文本阴影：-1px-1px 3px rgba（0,0,0,0.2）；/*文本阴影*/
}
li：悬停：last-child.menu-item{
盒影：-1px-1px 10px 4px rgba（0,0,0,1）镶嵌，/*暗影*/
2px-2px 3px 0px rgba（255255255，0.2），/*白色-顶部*/
2px 2px 3px 0px rgba（255255255，0.2）；/*白色-底部*/
}
li：悬停：第一个孩子。菜单项{
盒影：-1px-1px 10px 4px rgba（0,0,0,1）镶嵌，/*暗影*/
-2px-2px 3px 0px rgba（255255255，0.2），/*白色-顶部*/
2px-2px 3px 0px rgba（255255255，0.2），/*白色-顶部*/
2px 2px 3px 0px rgba（255255255，0.2）；/*白色-底部*/
}
/******************************************************************************************/
/*圆角*/
/******************************************************************************************/
李：第一个孩子。菜单项{
-moz边框半径左下角：5px；
边框左下半径：5px；
-左上角moz边界半径：5px；
边框左上半径：5px；
}
李：最后一个孩子。菜单项{
-moz边框半径右下角：5px；
边框右下半径：5px；
-moz边框半径右上角：5px；
边框右上角半径：5px；
}
/******************************************************************************************/
/*调色板*/
/******************************************************************************************/
a{color:#0861a5；}
a:悬停{颜色：#d98500；}
.菜单li：悬停>a，
.menu a{color:#dddddd；}
正文{背景色：#b8d3e2；}
.menu li{背景色：#87a0af；}
.menu{font-family:Arial、Helvetica、sans-serif}
a{文本装饰：无；}
a、 .菜单li>a{
过渡：1.5s缓解0.2s；
-moz转换：1.5s轻松0.2s；
-webkit过渡：1.5s轻松0.2s；
-o型过渡：1.5s缓解0.2s；
}
a:悬停、.menu li、.menu li:悬停>a{
过渡：0.4s缓解0.6s；
-moz转换：0.4s轻松0.6s；
-webkit过渡：0.4s轻松0.6s；
-o型过渡：0.4s缓解0.6s；
}
ul，li，ol{
保证金：0；
填充：0；
边界：0；
垂直对齐：基线；
}
保险商实验室{
利润率：100px 50px；
}
/*阿尔杰米菜单*/
.菜单ul{
列表样式类型：无；
}
李先生{
显示：内联；
}

如果要使用方框阴影进行过渡，

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

.menu li {
    box-shadow:     0 -9px 5px -5px rgba(0,0,0, 1) inset,   
                  2px -2px 3px 0px rgba(255,255,255, 0.2),      
                  2px 2px 3px 0px rgba(255,255,255, 0.2);   
}

   .menu li:hover {
        box-shadow:     -1px -1px 10px 4px rgba(0,0,0, 1) inset,
                        2px -2px 3px 0px rgba(255,255,255, 0.2), 
                        2px 2px 3px 0px rgba(255,255,255, 0.2);   
    }

li:last-child.menu-item {
    box-shadow: -9px 0px 5px -5px rgba(0,0,0, 1) inset,  
                 0px -9px 5px -5px rgba(0,0,0, 1) inset,   /* PROBLEM HERE     */
                 2px -2px 3px 0px rgba(255,255,255, 0.2),     
                 2px 2px 3px 0px rgba(255,255,255, 0.2);     
    }

li:last-child.menu-item {
    box-shadow: -9px -9px 5px -5px rgba(0,0,0, 1) inset,   /* combined shadows */
                 2px -2px 3px 0px rgba(255,255,255, 0.2),     
                 2px 2px 3px 0px rgba(255,255,255, 0.2);     
    }