How To Create A Simple Drop Down Menu With CSS3

    written by Simone D'Amico

    In this tutorial, we will show you how to create a beautiful drop down menu using CSS3. We are going to create the menu without using Javascript, only CSS properties.

    You can see the final result by clicking on the image below to view the demo:

    drop down menu demo

    The HTML code

    First, we have to put into html file the code for the menu. We will use a simple multi level unordered list, here is our markup:

    <ul id="nav">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li class="sub"><a href="#">Products</a>
            <ul>
                <li><a href="#">Product 1</a></li>
                <li><a href="#">Product 2</a></li>
                <li><a href="#">Product 3</a></li>
                <li><a href="#">Product 4</a></li>
                <li><a href="#">Product 5</a></li>
            </ul>
        </li>
        <li class="sub"><a href="#">Services</a>
            <ul>
                <li><a href="#">Service 1</a></li>
                <li><a href="#">Service 2</a></li>
                <li><a href="#">Service 3</a></li>
                <li><a href="#">Service 4</a></li>
                <li><a href="#">Service 5</a></li>
            </ul>
        </li>
        <li><a href="#">Contacts</a></li>
    </ul>
    

    We have used the sub class because we need to round only the upper corner of the menu items that contain an extra level.

    The CSS code

    The creation of CSS code consists of two main phases:

    1. structure code
    2. design code

    The first step will allow us to create the layout structure of the menu and the drop-down effect. Before starting our code, we need to include into the CSS file a CSS reset. We have chosen the famous Eric Meyer’s CSS reset.

    Now we can create the structure and the drop down effect with the following code:

    #nav {
      margin: 50px;
      z-index: 10;
      display: block;
    }
    #nav li { float: left; }
    #nav li:hover { position: relative }
    
    #nav li a { display: block; }
    
    #nav li ul {
      margin-top: -2px;
      display: none;
    }
    #nav li:hover ul {
      display:block;
      position:absolute;
    }
    
    #nav li ul li a {
      width: 150px;
    }
    

    After that, we can add the style to the each element. First, let’s pick up beautiful City Lights background for the page.

    drop down menu background

    The CSS code we’re going to integrate within the preceding code is as follows:

    #nav li:hover > a {
        background: #021A1A;
    
        box-shadow: 5px 5px 25px #000;
        -moz-box-shadow: 5px 5px 25px #000;
        -webkit-box-shadow: 5px 5px 25px #000;
    
        border-radius: 10px;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
    }
    #nav li.sub:hover > a {
        border-radius: 10px 10px 0 0;
        -moz-border-radius: 10px 10px 0 0;
        -webkit-border-radius: 10px 10px 0 0;
    }
    
    #nav li a {
        color: #fff;
        font-weight: bold;
        text-decoration: none;
        padding: 12px;
    }
    #nav li a:hover { background-color: #021A1A; }
    
    #nav li ul {
        background: #fff;
        margin-top: -2px;
    }
    
    #nav li ul {
        background: rgba(255,255,255,0.5);
        padding: 10px 5px;
    
        box-shadow: 5px 5px 25px #000;
        -moz-box-shadow: 5px 5px 25px #000;
        -webkit-box-shadow: 5px 5px 25px #000;
    
        border-radius: 0px 15px 15px 15px;
        -moz-border-radius: 0px 15px 15px 15px;
        -webkit-border-radius: 0px 5px 5px 5px;
    }
    #nav li ul li a, #nav li ul li a:hover {
        background: transparent;
        color: #000;
        width: 150px;
        font-size: 0.95em;
        font-weight: normal;
    }
    #nav li ul li a:hover { text-decoration: underline;
        box-shadow: none;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
    
        border-radius: 0;
        -moz-border-radius: 0;
        -webkit-border-radius: 0;
    }
    

    As you have seen, we have used many new properties from CSS3 as box-shadow, border-radius and rgba.

    You can see the final CSS code below:

    body {
        background: #000 url(citylights_medium.jpg) no-repeat;
        font: 12px Arial, Helvetica, sans-serif;
    }
    
    #nav {
        margin: 50px;
        z-index: 10;
        display: block;
    }
    
    #nav li { float: left; }
    #nav li:hover { position: relative }
    
    #nav li:hover > a {
        background: #021A1A;
    
        box-shadow: 5px 5px 25px #000;
        -moz-box-shadow: 5px 5px 25px #000;
        -webkit-box-shadow: 5px 5px 25px #000;
    
        border-radius: 10px;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
    }
    
    #nav li.sub:hover > a {
        border-radius: 10px 10px 0 0;
        -moz-border-radius: 10px 10px 0 0;
        -webkit-border-radius: 10px 10px 0 0;
    }
    
    #nav li a {
        color: #fff;
        font-weight: bold;
        text-decoration: none;
        padding: 12px;
        display: block;
    }
    #nav li a:hover { background-color: #021A1A; }
    
    #nav li ul {
        background: #fff;
        margin-top: -2px;
        display: none;
    }
    #nav li:hover ul {
        display:block;
        position:absolute;
    }
    
    #nav li ul {
        background: rgba(255,255,255,0.5);
        padding: 10px 5px;
    
        box-shadow: 5px 5px 25px #000;
        -moz-box-shadow: 5px 5px 25px #000;
        -webkit-box-shadow: 5px 5px 25px #000;
    
        border-radius: 0px 15px 15px 15px;
        -moz-border-radius: 0px 15px 15px 15px;
        -webkit-border-radius: 0px 5px 5px 5px;
    }
    #nav li ul li a, #nav li ul li a:hover {
        background: transparent;
        color: #000;
        width: 150px;
        font-size: 0.95em;
        font-weight: normal;
    }
    #nav li ul li a:hover { text-decoration: underline;
        box-shadow: none;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
    
        border-radius: 0;
        -moz-border-radius: 0;
        -webkit-border-radius: 0;
    }
    

    The menu that we have created is compatible with all new versions of each browser (Firefox, Safari, Opera, Chrome, IE). It works also with IE8 and degrades rather well with IE7.

    You can view the final result by clicking on the image above:

    drop down menu demo

    The package is available for download by clicking on:

    download drop down menu files

    Web hosting reviews: don’t get confused in selection, simply go through web hosting services and reviews.

    Unlock the key of your success for 350-029 exams & microsoft mcp by using our latest 70-516 and pass4sure 70-643 prep resources and cpa course.

     
    Authored by

    Simone D'Amico is a web designer, web developer and blogger from Italy. Check out his portfolio or his personal blog. You can follow him on Twitter.

    Enjoyed this story?

    Please leave your comment about this post on the comment section below. If you liked it tell your friends by tweeting it. You can also subscribe to our feed by rss or email.

9 Comments
ADD COMMENT
  • webbografico says:

    October 5, 2010

    very nice article and neat design. I like it!!

    good work Simone, kudos to you

  • Clipping Path says:

    October 5, 2010

    Awesome post! thanks a lot for sharing..

  • Simone D'Amico says:

    October 5, 2010

    Thank you too mates for comments. :)

  • Jonath Lee says:

    October 6, 2010

    Nice simple design and great CSS3 drop down example. Kudos.
    Definitely must download.

  • Federico Capoano says:

    October 6, 2010

    Quite nice, I think the use of CSS3 is not really essential if not for rounded corners and shadows that from a design point of view are quite discutible depending on personal tastes (some designers love it and some hate it).

  • Simone D'Amico says:

    October 6, 2010

    @Federico:
    you’re right. In the tutorial CSS3 is used only for rounded-corners and shadows and it’s not essential but I love the features introduced by the CSS3 and when it’s possible I want to use them!

  • Dan Howard says:

    October 6, 2010

    Sooo many hover menus. What I’d like to know is how to make a click menu. More like a regular windows menu.

  • Atlanta Web Design says:

    November 2, 2010

    Nice work! Good use of CSS3 in this tutorial.

  • lucky_girl says:

    February 18, 2011

    Great post. You seem to have a good understanding that how to create a professional drop down menu. I like your menu design,come on!