CSS Styling of Dropdown menu with drop shadows/etc

Question

Just received some great help on here and thought I'd ask for a little more. Novice to CSS and I would like to style a drop-down menu with a nice drop shadow (not sure if this is the correct term) so that it fits in with the rest of the menu (which came as part of a theme).

I am learning CSS and understand how to apply basic shadows, but it is a bit beyond me to style this menu exactly like the existing one in the drop-down.

I include the code of the menu below, but its easier visible by visiting www.acehscmaths.com/welcome/testhome - the menu I am looking to style is the one called charts, which if you click on drops down.

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

Thanks again and thanks in advance.

Answer 1

you can always click on inspect element on your chrome or firefox to see the css styling and learn something new :) in this case its:

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

the open menu however is done with query.

Answer 2

I guess the feature you're looking for is the css-property box-shadow. Apply it on the div representing the menu. Box shadow supports the following arguments in the here noted sturcture:

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