Question

刚刚在这里得到了一些很好的帮助，并且我想再多一点。新手到CSS，我想设置一个带有漂亮阴影的下拉菜单（不确定这是否是正确的术语），以便它适合菜单的其余部分（作为主题的一部分）。

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

我包含下面菜单的代码，但访问www.acehscmaths.com/welcome/testhome更容易看到 - 我想要的样式菜单是一个名为图表的菜单，如果你点击它就会下降。< / p>

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

再次感谢并提前致谢。

Answer 1

你总是可以点击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);

然后打开菜单完成查询。

Answer 2

我猜您正在寻找的功能是css-property box-shadow 。将它应用于代表菜单的div。 Box shadow支持以下参数：

offset-x，offset-y，blur-x，blur-y，shadow-color

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

下拉菜单的CSS样式与阴影/等

2 个答案: