How to make a Sleek Dropdown Navigation Menu Using CSS

By | October 7, 2013

So, guys today I’ve come up with a dropdown menubar created using pure CSS (and bit of CSS3). Well, I’m going to start a series of tutorials on navigation menus that will include tips and tricks and all the professional ways that’ll help you to create a navigation bar. Let’s start our tutorial on this sleek dropdown menu.
(Note: Use Codepen.io to practice all the tutorials. It gives a great user experience and real-time loading of code.)

Live Demo

dropdown menu using css

Step-1: Creating Skeleton of the Menubar

We will follow the traditional way by creating


Step-2: Making Menubar come alive

I hope that you’re trying out the code simultaneously on codepen. Now, it’s time make your menubar come alive by applying CSS. First of all we make the submenus disappear, because we want them to appear only when the specific

  • is hovered.
nav ul ul {
display: none;
}

nav ul li:hover > ul {
display: block;

    }

So the above code says don’t display the submenu temporarily by display:none and make it appear when the

  • is hovered. In the second chunk of code we have the child selector ( > ) to access the
      of the submenu. So, as you see in above image the submenu

        is hidden.

 

Now we will add some styles, make the menu bar horizontal and add some width.

nav ul{
 background: #AC2828;
 background: linear-gradient(top, #AC2828 0%, #A31010 100%);
 background: -moz-linear-gradient(top, #AC2828 0%, #A31010 100%);
 background: -webkit-linear-gradient(top, #AC2828 0%,#A31010 100%);
 box-shadow: 0px 0px 8px #A31010;
 padding: 0 20px;
 border-radius: 10px; 
 list-style: none;
 position: relative;
 display: inline-table;
}

nav ul li {
 float: left;
 border-right:1px solid #8A0000;
}

nav ul li:last-child{
 border-right:none;
}

nav ul li:hover {
  background: #4b545f;
  background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
  background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
  background: -webkit-linear-gradient(top, #811919 0%,#680000 40%);
}

nav ul li:hover a {
   color: #fff;
}

nav ul li a {
   font-family: 'Pathway Gothic One', sans-serif;
   font-size:18px;
   display: block;
   padding: 14px 40px;
   color: #fff; text-decoration: none;
}

Here, lets start from styling of the main

      . The lis-style of

        is set to none (obvious!). Gradients are added for cool look. The inline-table property adjusts the width to make the submenu fit in. Setting position : relative the submenus can be absolutely positioned with respect to main menu.

Step-3: Manipulating Submenu

Now, we style the submenu. Right now the submenus are appearing horizontal within the main menu. So to make go vertical we will have to set the float value none for the submenu

  • .
dropdown menu
nav ul ul {
background: #811919; border-radius: 0px; padding: 0;
position: absolute; 
}
nav ul ul li {
float: none; 
border-top: 1px solid #680000;
border-bottom: 1px solid #8F3333;
position: relative;
}
nav ul ul li a {
padding: 14px 40px;
color: #fff;
}

nav ul ul li a:hover {

background: #AC2828;
}
The border-radius and padding are set to 0 for

    element of submenus. Because we don’t want the same padding and radius(not needed) to be inherited from the main menu

  • . The position is set absolute as mentioned above to make the submenu relative to the main menu.

Final Product: Completed CSS Dropdown Menu bar

dropdown menu completed css

 

3 thoughts on “How to make a Sleek Dropdown Navigation Menu Using CSS

  1. Gretchen

    Hi,
    I am trying to build a website of my own and searched for some instructions on how to do a dropdown navigation bar. I loved your instructions as they broke it down and made it easy to understand. My only problem is that I can’t get my nav bar to like a block. It’s that first step, it won’t make it block-style.

    Do you have any suggestions on what could be wrong?

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *