How to Create a Simple CSS Drop Down Menu

Dropdown menus are increasingly becoming popular in modern web designs. Drop down menu makes it simple to categorize and re-categorize contents and provides an excellent navigation option for both website visitors and search engine crawlers. It allows you to navigate to any section of the website and at the same time overview the sub-sections.

Initially, dropdown menu in html was created either by JavaScript or flash. Still, there are lots of websites which use JavaScript or jQuery, but it is very much possible to create similar or even better dropdown menu with CSS3. Many CMS and blogging platforms like WordPress come with pre-built dropdown menus. Here, I will explain step by step process of creating a dropdown menu with pure CSS which you can easily implement in any HTML website without writing a line of JavaScript.

css-dropdown-menu

For this dropdown menu, we will use the frosted glass effect. We will use some CSS3 properties like box-shadow, border-radius and rgba (for transparency) to create the sleek glass effect.

Before we start, I am sure you would like to see how this dropdown looks like. Go ahead, have a look first.

Pure CSS dropdown menu demo

I am sure, you liked it. You can straightaway copy the code and place it in your website without any change as it should look equally beautiful with all backgrounds. Otherwise also, you may like to change the style as per your requirement. If you don’t wish to know how to create this dropdown menu and want to use the code straight away, I have kept the link of zip folder at the end of this article from which you can download all the files used in this example.

Main Menu

We will create this dropdown menu in steps. Let’s start with the html markup of main menu.

main-menu

As you have seen in the demo, we have five main menus – Home, Web Design, Web Tools, Build a Website and Contact Us. We will use the unordered list with list items to create a clean markup.

<ul>
    <li><a href=”#”>Home</a></li>
    <li><a href=”#”>Web Design</a></li>
    <li><a href=”#”>Web Tools</a></li>
    <li><a href=”#”>Build a Website</a></li>
    <li><a href=”#”>Contact Us</a></li>
</ul>

Although it is not required, for ease of coding, we will place this unordered list inside a div with ‘menu’ class. Let’s have a look at the CSS of our main menu unordered list <ul>.

.menu ul
{
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.3);
    border-radius: 5px;
    background-color: rgba(255, 255, 255, 0.4);
    position: relative;
    display: inline-block;
    padding: 0 25px;
    list-style: none;    
}

If you look at CSS code carefully, you will find that I am defining the colors in rgba everywhere. This is to ensure the consistency of the look with all backgrounds by defining transparency. For those who are not aware, in rgba property, ‘a’ denotes the alpha meaning transparency. The value of alpha can range from 0 to 1. Zero makes it totally transparent while one totally opaque.

Border, box-shadow, border-radius, background-color and padding properties are pretty easy to understand and I am not going to explain about these here.

The sub-categories will be absolutely positioned with respect to the main menu. Therefore, we are adding position: relative.

We want to display the main menu in one line with fixed width layout, so we are defining display property to inline-block.

Great! Now let’s move on to our individual menu items. Here is the CSS code for <li>.

.menu ul li
{
    float: left;
    border: 1px solid rgba(0, 0, 0, 0);
    -webkit-transition: all 0.2s Ease;
    -moz-transition: all 0.2s Ease;
    -o-transition: all 0.2s Ease;
}
.menu ul li:hover
{
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: inset 0px 0px 10px 0px rgba(100,100,100,0.2),
                0px 1px 3px 0px rgba(0, 0, 0, 0.3);
}

As you can see, in the normal condition, the border of the list item is with zero alpha value making it fully transparent. On mouse hover, this value changes to 0.1 along with inset box shadow and drop shadow. You may like to go through my tutorial on CSS box-shadow property if you have any difficulty in understanding the code. We are also defining the transition period of 0.2 seconds to introduce a hover delay which makes our dropdown menu sleeker.

Moving on, we are defining the style of all hyperlinks inside menu class.

.menu a
{
color: rgba(0,0,0,0.5);
text-decoration: none;
font-family: Arial;
font-size: 16px;
font-weight: bold;
text-shadow: rgba(255,255,255,0.3) 1px 1px 0px;
display: block;
padding: 20px 20px;
}

There is nothing special here apart from text-shadow and display properties. Text-shadow is a CSS3 property which we are adding to get an inset shadow effect. We also need to add some padding here. Hyperlink, by default is an inline item, to add padding we need to change it to block.

Dropdown Menu – 1st Sub Category

Let’s move on to the first dropdown level. Here is the HTML code where we are nesting the first sub-menu inside the main menu list item <li>. In our example, we are inserting two complete unordered lists inside the <li> tags of ‘web design’ and ‘web tools’.

<div>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Web Design</a>
<ul>
<li><a href="#">Articles</a></li>
<li><a href="#">Best Designed Websites</a></li>
</ul>
</li>
<li><a href="#">Web Tools</a>
<ul>
<li><a href="#">HTML Code Tester</a></li>
<li><a href="#">Font Styler</a> </li>
<li><a href="#">CSS3 Generator</a></li>
</ul>
</li>
<li><a href="#">Build a Website</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>

Nothing very complicated. Let’s Move on to the interesting part of creating basic functionality of dropdown. Initially, our sub-menu should be hidden and appear only when mouse hovers on the main menu. Here is the CSS code:

.menu ul ul
{
display: none;
position: absolute;
top: 100%;
border-radius: 0px;
padding: 0px;
}
.menu ul li:hover > ul
{
display: block;
}

For placing the sub categories just below the main menu, we are adding position: absolute and defining the top property to 100%. We don’t want any border-radius and padding in sub category, so we remove them by setting their values to 0px.

Initially, we are hiding the sub-categories by targeting the <ul> inside the <ul> and setting the display property to none. This, on hover on parent <li> menu, changes back to block. We are specifically targeting the child element of only that <li> element which is being hovered by using the ‘>’ child selector.

.menu ul ul li
{
float: none;
position: relative;
border: 1px solid rgba(0, 0, 0, 0.1);
text-align: left;
}
.menu ul ul li a
{
padding: 8px 20px;
}

We now change the position property of the sub menu list items to relative and define border. For the hyperlinks we are redefining the padding values because we want the smaller box size for the sub-categories.

Horizontal Menu – 2nd Sub Category

We will nest the second sub category inside our first sub category ‘CSS3 generator’. This is similar to what we have done with our first sub category. Have a look at the HTML mark-up of the second sub category.

<li><a href="#">Web Tools</a>
    <ul>                   
         <li><a href="#">HTML Code Tester</a></li>
         <li><a href="#">Font Styler</a> </li>
         <li><a href="#">CSS3 Generator</a>
            <ul>
               <li><a href="#">Box Shadow</a></li>
               <li><a href="#">Border Radius</a></li>
            </ul>
         </li>
   </ul>
</li>

We don’t need to define the display property of <ul> again here because it will inherit from its parent <ul>. But the second sub-category will appear right to the first sub-category. So, we will just change the position property to absolute on first sub-category item hover and define left and top positions.

.menu ul ul li:hover > ul
{
position: absolute;
left: 100%;
top: 0;
display: inline-table;
}

We are also adding display: inline-table to set the width of the second sub-category to fit. If you don’t add it, the text will wrap inside the cell.

Final Words

I hope you like this CSS dropdown menu.

You may like to tweak the styles yourself to suit your needs. It is really easy to do so because there is no heavy-weight JavaScript or Flash here. The HTML mark-up and CSS are both lean and clean. If you get any issue, please let me know in the comments section below and I will try to resolve it. And before you notice, this solution will not work in IE7 because of CSS3 compatibility issues. I am sorry but I can’t tell you how to manage your visitors with IE7 browsers.

If you wish to download all the files used in this article, it is available here in a zip folder.

Download CSS Drop down Menu Files

Tagged on: ,

3 thoughts on “How to Create a Simple CSS Drop Down Menu

  1. Pingback: CSS dropdown menu | SpotGeek.net

Leave a Reply