Question

我正在尝试使用前一个开发人员编写的一些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>

对于带有单个“下拉列表”的简单菜单，这看起来很棒。但是，当我移动到第二层（这通常是我们网站菜单所必需的）时，当第二层菜单正确呈现时，盒子阴影似乎被遗忘。屏幕截图：

这是一个jsfiddle。

我该如何解决这个问题？

Answer 1

它是ul影子，包含＆＃34;上传新的网络研讨会＆＃34;和选项＆＃34;培训网络研讨会＆＃34;和＃34;其他一些网络研讨会＆＃34;。如果你想看清楚边框添加一个边框（级联菜单常常令人困惑，我用＃34; 1px点缀红色 - 或绿色，蓝色等 - ＆＃34;以便轻松查看这些内容显影）。

https://jsfiddle.net/f1jtxktL/4/

而不是＆＃34;放置＆＃34;第三级你可以放置ul。例如：

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

https://jsfiddle.net/f1jtxktL/9/

编辑：啊!!我忘记了回答本身：＆＃34;盒子阴影没有留下黯然失色，整个盒子都留下了，阴影留在了它里面。＆＃34;

为什么我的盒子阴影落在后面？

1 个答案: