How to build a CSS3 drop down menu

I always thought creating navigation menu using pure css was something only the css black belt could do. After some coding headache (I should admit!) I managed to design a drop-down menu using pure css. This article explains step by step how I did it from scratch. Don’t worry you won’t need to spend hours in front for Photoshop gradients, borders and shadows. I have made use of CSS3 to reproduce the same effect.In this tutorial you will learn how to use :

The prefixes -Moz-/-webkit-
Gradient effect in CSS3
Text-shadow or a box-shadow in CSS3
Rounded corners (without using images) in CSS3

The HTML BackBone

Let’s begin by building the basic html structure necessary for any working menu.

<ul id="menu">
  <li><a href="#">Home</a></li>
  <li><a href="#">Tutorials</a></li>
 <li><a href="#">Latest Tuts</a>  </li>
  <li><a href="#">How it works</a> </li>
  <li><a href="#">Login</a> </li>
  <li><a href="#">Useful Links</a></li>
</ul>

If you preview the html code above in your browser , you should have something like this :

Making the layout of the Menu

Next we need to design the layout of the menu .We will be applying the following CSS 3 effects :

Rounded Corners for the top right and left corners .
Gradient effect on the whole menu .
Inner Shadow Box effect.

Below is the CSS Style to achieve it :

#menu {
	list-style:none;
	width:940px;
	margin:0 auto;
	height:45px;
	padding:5px 30px;
	/* rounded corners for different browser support */

    border-radius:5px 5px 0 0;
	-moz-border-radius:5px 5px 0 0;/*mozilla suport */
	-webkit-border-radius:5px 5px 0 0;/*Chrome and safari browsers*/
	/* css3 gradient */
    background:#444444;/**/
	background: -moz-linear-gradient(#444444, #111111) repeat scroll 0 0 transparent;
/*mozilla suport */
	background:-webkit-gradient(linear, left top, left bottom, from(#444444), to(#111111));
/*Chrome and safari browsers*/
	/* css3 borders */

    border: 1px solid #9C9C9C;
	box-shadow:inset 0px 0px 1px #e8edf0;/*general browsers supporting css3*/
	-moz-box-shadow:inset 0px 0px 3px #e8edf0;
/*mozilla suport */
	-webkit-box-shadow:inset 0px 0px 1px #e8edf0;
/*Chrome and safari browsers*/
}

Aligning the Menu text Horizontally

The next step will be make the backbone aligned horizontally by aligning the Menu text .

#menu li {
	float:left;
	display:block;
	position:relative;
	text-align:center;
	padding:4px 10px;
	margin:7px 30px 0 0;
	border:none;
}

We now have our menu styled horizontally as below :

Menu Link Hover Style

We are now going to add a CSS 3 gradient and rounded corners to the top when we hover on the menu.

#menu li:hover {
	border:1px solid #b7b7b7;
	padding:4px 9px;
	/*rounded corners to the top left and right */
   border-radius:5px 5px 0 0;
	-moz-border-radius:5px 5px 0 0;
	-webkit-border-radius:5px 5px 0 0;
	/* css 3 gradient */
    background:#fff;/*a white background for browsers with no css3 support*/
	background: -moz-linear-gradient(center top, #FFFFFF, #EDEDED) repeat scroll 0 0 transparent;
/*Firefox browser */
	background:-webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#EDEDED));
/*Chrome and Safari browser */
}

Styling the Menu Links

Next we will add some style to our boring dark-blue menu links to something more attractive by changing its color and font size.

#menu li a {
	font-size:14px;
	color: #999999;
	display:block;
	outline:0;
	text-decoration:none;
}
#menu li:hover a {
	color:#161616;
}

Adding the Menu Containers

We will now code the drop down containers when a user hover on the menu text .Each container has different sizes and will hold the entire drop down content in columns.

.menu-container-1, .menu-container-2, .menu-container-3, .menu-container-4 {
	margin:4px auto;
	float:left;
	position:absolute;
	left:-999em;
	text-align:left;
	padding:10px 5px;
	border:1px solid #b7b7b7;
	border-top:none;
	/* rounded corners */

    border-radius:0 5px 5px 5px;
	-moz-border-radius:0 5px 5px 5px;
	-webkit-border-radius:0 5px 5px 5px;
	/* gradient */
    background:#444444;
	background: -moz-linear-gradient(center top, #444444, #111111) repeat scroll 0 0 transparent;
	background:-webkit-gradient(linear, left top, left bottom, from(#444444), to(#111111));
}
.menu-container-1 {
	width:140px;
}
.menu-container-2 {
	width:280px;
}
.menu-container-3 {
	width:420px;
}
.menu-container-4 {
	width:560px;
}
#menu li:hover .menu-container-1, #menu li:hover .menu-container-2, #menu li:hover .menu-container-3, #menu li:hover .menu-container-4 {
	top:auto;
	left:-1px;
}
/* columns ici */

.column-1, .column-2 {
	display:inline;
	float:left;
	position:relative;
	margin:0 5px;
}
.column-1 {
	width:130px;
}
.column-2 {
	width:260px;
}

Final HTML Backbone

Below is the final structure of our HTML Document with different menu containers and columns.


<li><a href="#">Home</a>
    <div class="menu-container-2"> <!--Home Start -->

      <div class="column-2">
        <h2>CSS 3 Menu</h2>
      </div>
      <div class="column-2">
        <p>You can add links ,text , images  etc...</p>
      </div>
    </div>
    <!-- End Home -->
  </li>
  <li><a href="#">Tutorials</a>
    <div class="menu-container-4"><!-- Start tutorial menu section ( 2nd menu ) -->

      <div class="column-1">
        <h3>Microsoft Tech</h3>
        <ul>
          <li><a href="#">Visual Basic .Net</a></li>
          <li><a href="#">MS Visual C++</a></li>
          <li><a href="#">C Sharp .Net</a></li>
          <li><a href="#">ASP .Net</a></li>
          <li><a href="#">Webservices</a></li>
        </ul>
      </div>
      <div class="column-1">
        <h3>Multimedia Tools</h3>
        <ul>
          <li><a href="#">Photoshop</a></li>
          <li><a href="#">Dreamweaver</a></li>
          <li><a href="#">After Effect</a></li>
          <li><a href="#">Cinema 4D</a></li>
          <li><a href="#">Flash</a></li>
        </ul>
      </div>
      <div class="column-1">
        <h3>Web</h3>
        <ul>
          <li><a href="#">PHP</a></li>
          <li><a href="#">HTML / CSS</a></li>
          <li><a href="#">Javascript</a></li>
          <li><a href="#">ASP .Net</a></li>
          <li><a href="#">Flex</a></li>
        </ul>
      </div>
      <div class="column-1">
        <h3>Other</h3>
        <ul>
          <li><a href="#">Blogging</a></li>
          <li><a href="#">Wordpress</a></li>
          <li><a href="#">Java</a></li>
          <li><a href="#">Web 2.0</a></li>
          <li><a href="#">XML</a></li>
        </ul>
      </div>
    </div>
  <!-- END tutorial menu section ( 2nd menu ) -->
  </li>
  <li><a href="#">Latest Tuts</a>
    <div class="menu-container-2"><!-- Latest Tuts start -->

      <div class="column-2">
        <h3>YouHack.me Tutorial</h3>
      </div>
      <div class="column-2">
          <a href="#">A title 1 here </a>
          <a href="#">A title 2 here </a>
          <a href="#">A title 3 here </a>
 </div>
    </div>
    <!-- Latest Tuts END -->
  </li>
  <li><a href="#">How it works</a>
    <div class="menu-container-2"><!-- START - How it works-->

      <div class="column-1">
        <h3>Users</h3>
        <ul>
          <li><a href="#">Photoshop</a></li>
          <li><a href="#">Xcode</a></li>
          <li><a href="#">After Effect</a></li>
        </ul>
      </div>
      <div class="column-1">
        <h3>Contributors</h3>
        <ul>
          <li><a href="#">Photoshop</a></li>
          <li><a href="#">Xcode</a></li>
          <li><a href="#">After Effect</a></li>
        </ul>
      </div>
    </div>
    <!-- END - How it works -->
  </li>
  <li class="menu-right"><a href="#">Login</a>
    <div class="menu-container-2 align-right"> <!--Login section - START  --> 

      <form class="form">
        <div class="column-2">
          <p class="name">
            <input type="text" name="login" id="name" value="username"
                                onfocus="if (this.value == 'username') this.value ='';"
                                onblur="if (this.value =='') this.value = 'username';"
                            />
          </p>
        </div>
        <div class="column-2">
          <p class="name">
            <input type="password" name="pass" id="name" value="Pass"
                                onfocus="if (this.value == 'Pass') this.value ='';"
                                onblur="if (this.value =='') this.value = 'Pass';"
                            />
          </p>
        </div>
        <div class="column-1">
          <p class="submit">
            <input type="submit" value="Login" />
          </p>
        </div>
      </form>
    </div>
    <!--Login section - END  -->
  </li>
  <li class="menu-right"><a href="#">Useful Links</a>
    <div class="menu-container-1 align-right"><!-- External social links - START  -->

      <div class="column-1">
        <ul class="l1">
          <li><a href="#">Forum</a></li>
          <li><a href="#">Blog</a></li>
          <li><a href="#">Facebook</a></li>
          <li><a href="#">Twitter</a></li>
          <li><a href="#">Youtube</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </div>
    </div>
    <!-- External social links - END   -->
  </li>
</ul>

Some CSS style has been skipped such as aligning the login menu to the right so as to keep it simple to understand .You can download the full source code from above and play with it so that you can get a better understanding of how things work.

Tagged as: css3 menu, dropdown menu, navigation menu, slick css3 menu

{ 17 comments… read them below or add one }

Mrtnb December 18, 2011 at 5:01 pm

Hi Hyder,

Thank you for this drop down menu. That’s what I needed. It’ll look better if color of hover effect’s as same as dropdown div’s color, in my opinion.

Shahbaz Ahmed Bhatti December 26, 2011 at 5:44 pm

Wao that nice tutorials

inhimak December 30, 2011 at 10:02 pm

Hey Hyder,
Thanks for this nice CSS3 based drop down navigation bar. This article have full information for learners.

Alinu January 1, 2012 at 12:53 am

Hyder Thanks !!

Was searching the web for some css3 drop down menus and i didn’t even think about column oriented one. Thanks a lot.

Kevin January 7, 2012 at 12:39 am

This is a great, clean looking drop down menu — thanks!!

I’ve been customizing it for our application/web site, and the weird thing is I’m getting it to display locally (on my machine — in IE, Firefox & Chrome) yet when I look at it online (after, of course, uploading all of the files to the server), I get nothing. An absolutely blank screen.

Anyone have any suggestions?

(I know the files are there bec. when I delete the index file, I get the error message of the page not there.)

Kevin January 7, 2012 at 12:40 am

Oh yeah, the blank screen I get when looking at the remote site is in all 3 browsers I mentioned.

Hyder January 7, 2012 at 9:33 am

Whats the link to the online version ?

Kevin January 7, 2012 at 4:34 pm

It’s crazy bec. when I view the source, there is nothing there…which I guess explains the blank screen but I’ve been designing & maintaining our site for over 10 years and this hasn’t happened.

Kevin January 7, 2012 at 5:56 pm: Ok, don’t know if it is bec. our server is a Linux server vs. a Windows server…but I went back to files that I knew (previously) worked on our site and looked at the code.

I ended up changing several lines of codes (slight tweaks), and in this order:

From:

To:

It still didn’t work, so I eliminated the following code on line 7:

But alas, it still didn’t work, so I deleted the first line of code…

and that didn’t fix it. So, I went…

From:

To:

AND IT WORKED!!!!!!!!!!!!!!!!!! FINALLY!!!!!!!!!!!!!!!

So, it is working in all 3 browsers (not just locally but also) on the server!!!!!

Kevin January 7, 2012 at 5:59 pm

Looks like I can’t post code here.

It was the lines of code in lines 1, 2 and 3, that when changed, caused it to display properly.

Kevin January 8, 2012 at 4:10 pm

Ok, last question: is there a way to add sub-menu items (children)? I still need to go down a couple of levels. (We have that many options on our web site.)

Thanks in advance!

ton January 16, 2012 at 9:56 am