Drop-down menu is an irreplaceable attribute of the most websiites currently. There are numerous ways and methods to implement the drop-down menu. This article concerns Drop-down menu implemented in CSS3.

Drop-down menu is an irreplaceable attribute of the most websiites currently. There are numerous ways and methods to implement the drop-down menu. This article concerns Drop-down menu implemented in CSS3.


Menu structure

At first, it is necessary to create menu structure using HTML. Let’s use unsorted list to create structure, which will include nested lists to create drop-down effect.

This method has a wide range of disadvantages. As you can see from the code, the image has to be overlaid on the background, but that is not the thing we really want to do.

When an image has small elements, it will also be small; but having gradient overlaid on the whole website background will cause noticeable changes. Besides, uploading multiple resources has bad influence on the website.


Gradient implementation with the help of CSS3

The long-waited function (gradient background) has been added into CSS3 (Cascading Style Sheets); and thanks to this feature gradient creation on the block became possible.

Parameters list of CSS attribute of linear-gradient()


In the code above, you can see <UL> nested lists. UL was added into the parent UL tag, and inserted into <LI> element. Using this method, we can create drop-down menu; after CSS is added, everything will flatten out and will look different.

“headerList” class was set for every element of the list, except for Item5, the last item. This class will be used to create separating char to the right side of every menu item; the last item does not require border on the right side, so this class was not assigned to it.


Horizontal drop-down menu stylization with the help of CSS.

At first, note the border radius property, which allows to create rounded angles.

“border-radius”, “-moz-border-radius” and “-webkit-border-radius” properties are set by the same rounded angles, but for different browsers. “-moz” is for Firefox, “-webkit” is for Safari and Chrome, but perhaps standard “border-radius” property will be working in the new versions of all the browsers.

At first, note the border radius property, which allows to create rounded angles.
#menu{
    float: left;

    /* Create rounded angles */
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;

    /* Add gradient */
    background: -moz-linear-gradient( bottom, #cccccc, #f2f2f2 );
    background: -webkit-gradient( linear, left bottom, left top, from( #cccccc ), 
                                                to( #f2f2f2 ) );
    /* Add shadow */
    -moz-box-shadow: 0 1px 10px #161617;
    box-shadow: 0 1px 10px #161617;
}
#menu ul ul{
    display: none;
}

The image on the left shows the result we will get using these styles. As you can see, you just need to set value, 10px in this case.

After that, gradient was added. It was done with the help of usual background property, but with different value. As well as with rounded angles, “-moz” is used for Firefox browser; gradient beginning and two colors, which will be used for gradient creation, are indicated in this value.

Finally, a shadow was added to menu box. Box shadow setting has 4 values:

  • horizontal shift;
  • vertical shift;
  • blurring radius;
  • color value.
Menu. Step 2
#menu ul {
    padding:0;
    margin:0;
    list-style:none;
    position:relative;
}

With the help of these styles we have disposed shifting and items of the list. Besides, relative positioning was set. It was done because we need to use absolute positioning for inserted <UL> tags.

Menu. Step 3
#menu ul li{
    display: block;
    float: left;
    padding-top: 9px;
    padding-bottom: 9px; 
}
#menu ul li span a{
    border-left: solid #8cab9e thin;
}
#navBar1 ul li span a{
    border-left: solid #555 thin;
}

setting was applied here, and also , which allows every menu item to have shifting and flow over. Besides, inner shifts from below and from above were implemented, so the menu items were set on center.

.headerList a{ 
    border-right: solid #ccc thin; 
}
#menu ul li a{
    display: block;
    padding: 4px;
    padding-left: 13px;
    padding-right: 13px;
    color: #333;
    text-decoration: none;
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 80%;
}
Menu. Step 4

The second separating char was added to the right. Also, color, size and font family were set.

#menu ul li a:hover{
    color: #F00;
    text-decoration: underline;
}

Color change and font underline during mouse cursor guidance were set.

#menu ul ul{
    position: absolute;
    top: 42px;
    width: 310px;
    border: thin solid #849c92;
    font-size: 70%;
    display: none;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    background: -moz-linear-gradient( bottom, #cccccc, #f2f2f2 );
    background: -webkit-gradient( linear, left bottom, left top, from(#cccccc), to( #f2f2f2 ) );
    -moz-box-shadow: 0 1px 10px #161617;
    box-shadow: 0 1px 10px #161617;
}

Absolute positioning, 42px shift, and also background image were implemented; the border and font size were added, drop-down menu size assigned.

Menu. Step 5
#menu ul li:hover ul{
    position:absolute;
    left:60px;
    display:block;
}

The nested menu was shifted 60px to the right, and also property was implemented, which provides menu visibility during cursor shift.

#menu ul ul li{
    padding: 0;
    padding-top: 3px;
    padding-bottom: 2px;
}
#menu ul ul li a{
    border: none;
    color: #333;
}

The last strokes that let us dispose the undesired border and change text color.


Divine Elemente PSD to WordPress

Convert graphics from Adobe Photoshop to a working WordPress theme. No coding.