带有下拉阴影/etc的下拉菜单CSS样式

刚刚在这里得到了一些很大的帮助，我想我会要求更多。CSS新手，我想用一个漂亮的下拉阴影（不确定这是否是正确的术语）设计一个下拉菜单，以便它与菜单的其余部分（作为主题的一部分）相适应

我正在学习CSS并了解如何应用基本阴影，但我无法将此菜单的样式与下拉列表中的现有菜单完全相同

我在下面列出了菜单的代码，但是通过访问www.acehscmaths.com/welcome/testhome，可以更容易地看到它——我正在寻找的菜单样式是一个名为charts的菜单，如果您单击下拉菜单，它就会显示出来

<div class="col-md-3">
    <div class="side-bar-wrapper collapse navbar-collapse navbar-ex1-collapse">

        <ul class="side-menu">
            <li>
                <a href="charts.html" class="is-dropdown-menu">
                    <span class="badge pull-right"></span>
                    <i class="icon-bar-chart"></i> Charts
                </a>
                <ul>
                    <li>
                        <a href="charts.html#area_chart_anchor">
                            <i class="icon-random"></i>
                            Area Chart
                        </a>
                    </li>
                    <li>
                        <a href="charts.html#circle_chart_anchor">
                            <i class="icon-bullseye"></i>
                            Circular Chart
                        </a>
                    </li>
                    <li>
                        <a href="charts.html#bar_chart_anchor">
                            <i class="icon-signal"></i>
                            Bar Chart
                        </a>
                    </li>
                    <li>
                        <a href="charts.html#line_chart_anchor">
                            <i class="icon-bar-chart"></i>
                            Line Chart
                        </a>
                    </li>
                </ul>
            </li>
        </ul>

    </div>
</div>

<div class="col-md-3">
    <div class="side-bar-wrapper collapse navbar-collapse navbar-ex1-collapse">

        <ul class="side-menu">
            <li>
                <a href="newquestion">
                    <i class="icon-question"></i> Question
                </a>
            </li>
        </ul>

    </div>
</div>


<div class="col-md-3">
    <div class="side-bar-wrapper collapse navbar-collapse navbar-ex1-collapse">

        <ul class="side-menu">
            <li>
                <a href="newnotes">
                    <i class="icon-book"></i> Study Notes
                </a>
            </li>
        </ul>

    </div>
</div>

---

再次感谢并提前感谢。

我想您正在寻找的功能是css属性框阴影。 在代表菜单的div上应用它。 Box shadow在此处提到的结构中支持以下参数：

偏移-x、偏移-y、模糊-x、模糊-y、阴影颜色

#example1 {
    -moz-box-shadow: 10px 10px 5px #888;
    -webkit-box-shadow: 10px 10px 5px #888;
    box-shadow: 10px 10px 5px #888;
}

---

您可以随时单击chrome或firefox上的inspect元素来查看css样式并了解一些新内容：） 在这种情况下，其：

background-color: #2e3340;
margin: 0px -3px;
padding: 0px;
-webkit-box-shadow: inset 0px 2px 3px 0px rgba(0,0,0,0.4);
box-shadow: inset 0px 2px 3px 0px rgba(0,0,0,0.4);

---

不过，打开菜单是通过查询完成的。

谢谢。但是，我如何将样式复制到下拉列表中？尝试：。侧栏包装器。侧菜单>li>ul是ul类中li内部的ul。侧菜单内部的。侧栏包装器。没有箭头也可以使用：。侧栏包装器。侧栏菜单li ul或。侧栏包装器。侧栏菜单ul li ulHi，抱歉，我一定是误解了，我的app.CSS中已经有这个CSS，我认为与上面相同：。侧栏包装器。侧栏菜单>li>ul{背景色：#2e3340；边距：0px-3px；填充：0px；-webkit框阴影：插入0px 2px 3px 0px rgba（0,0,0,0.4）；框阴影：插入0px 2px 3px 0px rgba（0,0,0.4）}是的，这是你提供的链接中的css样式。这不是你想要的？啊，对不起，我希望将css样式应用到“图表”下的下拉菜单中，类似于你看到的单个菜单项（“图表”、“问题”、“学习笔记”），如果这有意义的话。一旦你点击图表，就没有阴影了，我正努力在菜单上找到漂亮的阴影。