Question

I am trying to create something that looks like this:

The problem is I think it would be best to keep it inside of one div since the drop down has an inner shadow and drop shadow.

Thanks in advance and please let me know if you need any more detail on the problem.

This is what I have so far:

CSS

.rectangle {
    background: #1f8dda;
    background-image: -moz-linear-gradient(270deg, #1f8dda 0%, #114dbc 100%);
    background-image: -webkit-linear-gradient(270deg, #1f8dda 0%, #114dbc 100%);
    background-image: -o-linear-gradient(270deg, #1f8dda 0%, #114dbc 100%);
    background-image: linear-gradient(180deg, #1f8dda 0%, #114dbc 100%);
    -moz-box-shadow: 0px 0px 2px 0px #000000;
    -webkit-box-shadow: 0px 0px 2px 0px #000000;
    -o-box-shadow: 0px 0px 2px 0px #000000;
    box-shadow: 0px 0px 2px 0px #000000;
    border-radius: 0px;
    margin: 0px;
    width: 145px;
    height: 138px;
}

I also created a fiddle for this: http://jsfiddle.net/yHy5n/

Answer 1

Besides the fact that you menustructure looks quite weird, here is a quick sketch I did for you as a starting point: Demo
It is not meant to be the complete solution but rather an idea you can work with.

Given the markup below, the basic idea is to style the list elements of the main list (h2) and the sublists separately and make the gradients have a smooth transition.

<ul class="nav">
    <li>HOME</li>
    <li class="active"><h2>DUNGEONS PIECES</h2>
    <ul class="subnav">
        <li>Floor<span class="count">123</span></li>
        <li>Walls<span class="count">54</span></li>
        <li>Sets<span class="count">7</span></li>
    </ul>
    </li>
</ul>

css:

.active {
    background: #1f8dda;
    /* ... */
}
.active h2{
    background-image: linear-gradient(180deg, #1f8dda 34%, #228fdd 100%);
    /* ...                                                    /\ */
}            /*            gradient transition   --------------- */
.active ul { /*                                  \/              */
    background-image: linear-gradient(180deg, #228fdd 34%, #114dbc 100%);
    /* ... */
}

Also most of your compatibility css isn’t needed anymore – take a look at:

Gradients
Box-shadow