Create a CSS dropdown menu without javascript

Leave a Comment Posted by on November 25, 2011

The dropdown menus makes the layouts clean and it helps the visitors to navigate easily. Most of the people use javascripts to create dropdown menus. It is easy to create dropdown using CSS. Here is a beautiful CSS dropdown menu without javascript.

Code for a typical Dropdown Menu:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div id="menu">
<ul>
    <li><a href="/">Home</a></li>
    <li><a href="/">About</a></li>
    <li><a href="/">Services</a>
   <li><a href="/">Web Design</a></li>
   <li><a href="/">Web Hosting</a></li>
   <li><a href="/">Marketing</a></li>
   <li><a href="/">SEO</a></li>
<li>
    <li><a href="/">Contact Us</a></li>
</ul>
</div>

Let us style the menu:

1
2
3
4
5
#menu ul{list-style:none;margin:0; padding:0;}
#menu li{float:left;margin:0; padding:0;position:relative:}
#menu li a{float:left;margin:0; padding:10px 20px; background:#ececec; color:#333;font-size:12px;border-right:1px solid #ccc;}

First we will hide the child items -

1
#menu ul ul{display:none;}

Now the most important part – Child items should display on mouse hover on parent items:

1
#menu ul li:hover > ul{display:block; }

Now we will add absolute position for child ul:

1
#menu ul ul{position:absolute;top:20px; left:0px;}

Now add borders, background images etc for the dropdown items. You can use the same way to display third and fourth levels of the dropdown. This CSS menu is suitable to display wordpress pages and categories as dropdown.

1
#menu li a{float:left;margin:0; padding:0px 10px; background:#ececec; color:#333;line-height:20px; font-size:12px;}

Complete CSS code:

1
2
3
4
5
6
7
8
9
10
11
#menu{width:980px; margin:0px auto; background:#ececec; border-left:1px solid #ccc;}
#menu ul{list-style:none;margin:0; padding:0;}
#menu li{float:left;margin:0; padding:0;position:relative:}
#menu li a{float:left;margin:0; padding:10px 20px; background:#ececec; color:#333;font-size:12px;border-right:1px solid #ccc;}
#menu ul ul{display:none;}
#menu ul li:hover > ul{display:block; }
#menu ul ul{position:absolute;top:20px; left:0px;}
#menu ul ul li{width:200px;}
#menu ul ul li a{float:left;margin:0; padding:0px 10px; background:#ececec; color:#333;line-height:20px; font-size:12px;border:1px solid #ccc;}

You can use the same CSS code to create a category dropdown menu, page dropdown menu or a custom menu in wordpress.

To display a ‘page’ dropdown menu:

1
2
3
4
5
<div id="menu">
<ul>
<?php wp_list_pages('title_li=' ); ?>
</ul>
</div>

Categories:

1
2
3
4
5
<div id="menu">
<ul>
<?php wp_list_categories('title_li=' ); ?>
</ul>
</div>
CSS Tricks, Web Design, Wordpress