Css 为什么我的盒子阴影被抛在了后面？

我正在尝试使用以前的开发人员编写的一些CSS代码来创建一个水平下拉菜单，并将其分解为一个可重用的horizontalMenu.CSS文件。我编码了2个选项-默认菜单显示一个带有方框阴影的简单白色菜单，以及一个更重要的“蓝色”菜单。这就是css代码的样子：

.horizontalMenu { 
    background-color:  white;
    display: inline-block;
}

.horizontalMenu.blue{
    background-color:  #2F5E92;
    font-weight: bold;
    text-shadow: rgba(0, 0, 0, 0.4) 0px 2px 5px;
    display: block;
}

.horizontalMenu ul {
    padding: 0;
    margin: 0;
    list-style: none;
    position: relative;
    text-align: left;
    box-shadow: 0 6px 10px -1px #888888;
    behavior: url(/css/pie/PIE.htc);
}

.horizontalMenu.blue ul{
    box-shadow: 0 5px 25px 5px #888888;
}

.horizontalMenu ul li {
    display:inline-block;
    background-color: white; 
    white-space: nowrap;
}

.horizontalMenu.blue ul li{
    background-color: #2F5E92;
}

.horizontalMenu a {
    display:block;
    padding:0 15px 0 15px;  
    color:black;
    font-size:16px;
    line-height: 45px;
    text-decoration:none;
    cursor:pointer;
}

.horizontalMenu.blue a{
    color:#FFF;
}

.horizontalMenu a:hover{ 
    background-color:  #0A6FDE;
}

.horizontalMenu a.active{
    background-color: #6789AE;
}

/* Hide Dropdowns by Default */
.horizontalMenu ul ul {
    display: none;
    position: absolute; 
    top: 45px;
    z-index: 1;
}

/* Display Dropdowns on Hover */
.horizontalMenu ul li:hover > ul {
    display:block;
}

/* First Tier Dropdown */
.horizontalMenu ul ul li {
    float:none;
    display:list-item;
    position: relative;
}

/* Second, Third and more Tiers */
.horizontalMenu ul ul ul li {
    position: relative;
    top:-45px; 
    left:170px;
}

和我的简单测试菜单：

<div class='horizontalMenu'>
    <ul>
        <li><a>Website Config &#9662;</a>
            <ul>
                <li><a>Include Files</a></li>
            </ul>
        </li>
        <li><a>User Training &#9662;</a>
            <ul>
                <li><a>Upload new webinar &#9656;</a>
                    <ul>
                      <li><a>Training webinar</a></li>
                      <li><a>Some other webinar</a></li>
                    </ul>
                </li>
                <li><a>Upload new guide</a></li>
            </ul>
        </li>
        <li><a>Data</a></li>
    </ul>
 </div>

这里有一个例子

如何解决此问题？
这是ul shadow，其中包含“上载新网络研讨会”以及“培训网络研讨会”和“其他一些网络研讨会”选项。如果你想看清楚的话，可以添加一个边框（层叠菜单经常让人困惑，我用“1px点红色-或，绿色，蓝色等等”来包装所有ul，以便在开发过程中轻松查看这些内容）


代替“放置”第三级li，您可以放置ul。e、 g:

.horizontalMenu ul ul ul li {
position: relative;
top:-45px; 
left:170px;
}
--vs--
.horizontalMenu ul ul ul{
 position: absolute;
 left:100%;top:0;
}


编辑：啊！！我忘记了答案本身：“盒子的阴影没有留下，整个盒子都留下了，阴影也留在了后面。”
你想要类似的东西吗？如果我的答案解决了你的问题，你想发布我的解决方案。我会解释的。@alirezasafian-是的，看起来不错，就是这样！非常感谢。（我对CSS的理解和经验非常基础）