drop down css menu banner

How to build a CSS3 drop down menu

by Hyder

in Html & CSS

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 :

  1. Rounded Corners for the top right and left corners .
  2. Gradient effect on the whole menu .
  3. 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.

Related Posts

  1. Google Plus Photo stack animation using Jquery and CSS3
  2. Create fancy contact form with CSS 3 and jQuery
  3. Create Google Plus-Style Button using CSS3
After Post

{ 19 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.

Reply

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

Wao that nice tutorials

Reply

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.

Reply

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.

Reply

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.)

Reply

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.

Reply

Hyder January 7, 2012 at 9:33 am

Whats the link to the online version ?

Reply

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.

Reply

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!!!!!

Reply

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.

Reply

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!

Reply

ton January 16, 2012 at 9:56 am

Nice article!

Also can you please share how to add delay to the dropdown on mouse over?

Thanks

Reply

Kate February 1, 2012 at 8:52 pm

This menu is gorgeous and I’ve implemented it on 2 websites. Thanks for sharing.

Reply

madhan February 22, 2012 at 5:30 am

its awesome.. but my query is how to apply active state for this menu when a mouse button is pressed..

Reply

suresh.s.muttagi March 21, 2012 at 8:59 am

Thank u very much . your explanations with output photos are sufficient to understand. once again thanks a lot

Reply

suresh.s.muttagi March 21, 2012 at 9:00 am

Thank u very much . your explanations with output photos are sufficient to understand.

Reply

sevent March 21, 2012 at 1:49 pm

beautiful,…than’s guys.

Reply

Nathan July 29, 2012 at 5:12 am

This is just what I needed! Thanks!
I have a question, though, how would I prevent the top menu from pushing the rest of the items to the right when I hover if I have more than one row of navigation? (I’d like to make it so that it could work on mobile devices) The Second row is fine, it’s just the first row that does this to me.

Reply

Nadia August 10, 2012 at 3:51 pm

Hi
Thanks for taking your time to explain this. How do I use images instead of background colors etc?

Reply

Leave a Comment

Previous post:

Next post: