Create Drop Down Menus With CSS3

CSS3 is such a powerful tool that it allows truly creative people to continually find new and useful means to update their websites. Recently, I discovered a method to create a drop down menu using nothing but CSS3. The trick behind the code is to hide the drop down menu so that it only appears when the user hovers over the top-level menu item. This code comes from Webstuffshare and comes with a demo.

CSS3 Code for Drop Down Menus

The drop down menu itself is an unordered list, which you hide within a div that can be triggered to make the UL appear when the user hovers over the div. Here’s how Webstuffshare sets up the overall design of the menu:

.drop-menu {
    display: block;
    margin-right: auto;
    margin-left: auto;
    text-align: left;
    padding: 10px 10px;
    font-size: 22px;
    height: 25px;
    max-height: 25px;
    width: 400px;
    background: #fff;
    cursor: pointer;
    border: 1px solid #f6f0e4;
}

This creates a fixed height for the menu along with setting definitions for the padding, font, border, cursor and so on. To simulate the look and feel of a menu, you’ll want to manipulate the look of the cursor. You can do that with the pseudo-class :hover as such:

.drop-menu:hover .sub-menu {
    display: inline-block;
}

For the menu, you’ll want to mimic some of the attributes that were defined earlier. Plus, you can add in some shadow effects to enhance the aesthetics.

.sub-menu {
    display: none;
    width: 400px;
    background: #fff;
    padding: 10px 10px;
    margin-left: -11px;
    margin-top: 10px;
    border: 1px solid #fff;
    -webkit-box-shadow: 0px 13px 25px rgba(0,0,0, 0.2);
    -moz-box-shadow: 0px 13px 25px rgba(0,0,0, 0.2);
    box-shadow: 0px 13px 25px rgba(0,0,0, 0.2);
}

The shadow affect is rather advanced in that it uses a “box-shadow property, set x-axis to 0px, y-axis to 13px, blur to 25px and shadow color to black with 20% alpha. This will make the shadow [sic] has a gradient effect.”

As mentioned at the start of the article, the drop down menu is itself a list, which also must be defined:

.sub-menu li {
        list-style-type: none;
        display: block;
        border-bottom: 1px dotted #eaeaea;
        font-size: 19px;
        height: 22px;
        padding: 8px 0;
    }

The demo is actually set up very nice, which is a reason why HTMLgoodies is showcasing this code, in that it allows for small icons next to the drop down items. It is a popular convention in web design to focus on using images instead of text to convey meaning. Here is how that is done:

.sub-menu li img {
            margin-right: .5em;
        }

This code is also impressive in that it adds minor details like a dotted border between each item:

.sub-menu li:hover {
        border-bottom: 1px dotted #bababa;
    }

The cherry on this sundae is an animated plus symbol. This symbol conveys to the visitor that this is indeed a drop down menu and begs to be clicked on or at least hovered over. The plus symbol rotates when the visitor hovers over the menu.

.plus {
    display: inline-block;
    -webkit-transition: .3s ease-in-out;
      -moz-transition: .3s ease-in-out;
      -o-transition: .3s ease-in-out;
}

.drop-menu:hover .plus {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
}

That’s the CSS3 code for this elegant drop down menu.