Create a Dropdown Menu Using CSS3


Hey Guys, How is Going there? Hope everything is well. Today we want to teach you that how to make pure CSS3 Navigation Menu step by step. View Demo

Dropdown Menu CSS3

Step 1 – HTML Markup

We will create an unordered list with a list item and an anchor tag for each menu link. To create the sub menu add another unordered list inside of the list.

<ul class="menu">

    <li><a href="#">My dashboard</a></li>
    <li><a href="#">Likes</a></li>
    <li><a href="#">Views</a>

        <ul>
            <li><a href="#" class="documents">Documents</a></li>
            <li><a href="#" class="messages">Messages</a></li>
            <li><a href="#" class="signout">Sign Out</a></li>
        </ul>

    </li>
    <li><a href="#">Uploads</a></li>
    <li><a href="#">Videos</a></li>
    <li><a href="#">Documents</a></li>

</ul>

Step 2 – Menu Layout

We will start to remove the margin, padding, border and outline from all the elements of the menu. Then we will add a fixed width and height to the menu, rounded corners and the CSS3 gradients. To align the links horizontally we will float the lists to left. We also need to set the position to relative because we will need that to align the sub menus.

.menu,
.menu ul,
.menu li,
.menu a {
 margin: 0;
 padding: 0;
 border: none;
 outline: none;
}

.menu {
 height: 40px;
 width: 505px;

 background: #4c4e5a;
 background: -webkit-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
 background: -moz-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
 background: -o-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
 background: -ms-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
 background: linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);

 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
 border-radius: 5px;
}

.menu li {
 position: relative;
 list-style: none;
 float: left;
 display: block;
 height: 40px;
}

We will hide the sub menu temporarily to be easier to style the first level.

.menu ul { display: none; }

Step 3 – Menu Links

To style the menu links we will add some basic CSS properties like font, color, padding, etc. Then we will add a dark text shadow and a color transition to create a smooth effect when the color changes on hover state. To create the links separator add a border to the left and right and then we will remove the left border from the first link and the right border from the last link. For the hover state we will only change the text color.

.menu li a {
    displayblock;
    padding0 14px;
    margin6px 0;
    line-height28px;
    text-decorationnone;

    border-left1px solid #393942;
    border-right1px solid #4f5058;

    font-familyHelveticaArialsans-serif;
    font-weightbold;
    font-size13px;

    color#f3f3f3;
    text-shadow1px 1px 1px rgba(0,0,0,.6);

    -webkit-transition: color .2s ease-in-out;
    -moz-transition: color .2s ease-in-out;
    -o-transition: color .2s ease-in-out;
    -ms-transition: color .2s ease-in-out;
    transition: color .2s ease-in-out;
}

.menu li:first-child a { border-leftnone; }
.menu li:last-child a{ border-rightnone; }

.menu li:hover > a { color#8fde62; }

Step 4 – Sub Menu

First let’s remove this line of code that we have added on the second step.

.menu ul { display: none; }

Now we will style the sub menu. We will start to position the sub menu 40px from the top and 0px from the left of the menu item and add bottom rounded corners. We will set the opacity to 0 and on hover state to 1 to create the fade in/out effect. For the slide down/up effect we need to set the list height to 0px when is hidden and to 36px on hover state.

.menu ul {
    positionabsolute;
    top40px;
    left0;

    opacity: 0;
    background#1f2024;

    -webkit-border-radius: 0 0 5px 5px;
    -moz-border-radius: 0 0 5px 5px;
    border-radius: 0 0 5px 5px;

    -webkit-transition: opacity .25s ease .1s;
    -moz-transition: opacity .25s ease .1s;
    -o-transition: opacity .25s ease .1s;
    -ms-transition: opacity .25s ease .1s;
    transition: opacity .25s ease .1s;
}

.menu li:hover > ul { opacity: 1; }

.menu ul li {
    height0;
    overflowhidden;
    padding0;

    -webkit-transition: height .25s ease .1s;
    -moz-transition: height .25s ease .1s;
    -o-transition: height .25s ease .1s;
    -ms-transition: height .25s ease .1s;
    transition: height .25s ease .1s;
}

.menu li:hover > ul li {
    height36px;
    overflowvisible;
    padding0;
}

We will set the width of the sub menu links to 100px. Instead of left and right borders we will add a bottom one and remove it from the last link.

.menu ul li a {
    width100px;
    padding4px 0 4px 40px;
    margin0;

    bordernone;
    border-bottom1px solid #353539;
}

.menu ul li:last-child a { bordernone; }

To finish it we only need to add an icon to each sub menu link. To do it we will create a custom class for each one and add a background image.

.menu a.documents { backgroundurl(../img/docs.png) no-repeat 6px center; }
.menu a.messages { backgroundurl(../img/bubble.png) no-repeat 6px center; }
.menu a.signout { backgroundurl(../img/arrow.png) no-repeat 6px center; }

Conclusion

We’ve successfully created this pure CSS3 dropdown menu. If you have any question let me know in the comments. Also don’t forget to leave some feedback and share it with your friends. Follow us if you want to be the first to know about the latest tutorials and articles .

Download FREE     View Demo

Advertisements

16 thoughts on “Create a Dropdown Menu Using CSS3

  1. This is a comment to the webmaster. Your website:https://2designers.wordpress.com/2012/09/26/create-dropdown-menu/ is missing out on at least 300 visitors per day. I came to this page via Google but it was hard to find as you were not on the first page of search results. I have found a website which offers to dramatically increase your traffic to your website: http://voxseo.com/traffic/. I managed to get over 10,000 visitors per month using their services, you could also get lot more targeted visitors than you have now. Hope this helps 🙂 Take care.

  2. You could certainly see your enthusiasm within the work you write. The sector hopes for even more passionate writers like you who aren’t afraid to say how they believe. At all times go after your heart. “A second wife is hateful to the children of the first a viper is not more hateful.” by Euripides.

  3. Pretty great post. I just stumbled upon your weblog and wanted to mention that I have really loved surfing around your blog posts. After all I’ll be subscribing to your feed and I am hoping you write again very soon!

  4. whoah this blog is fantastic i love reading your articles. Keep up the good work! You know, lots of people are searching around for this information, you can help them greatly.

  5. Thanks for the sensible critique. Me and my neighbor were just preparing to do a little research about this. We got a grab a book from our local library but I think I learned more from this post. I am very glad to see such fantastic info being shared freely out there.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s