How to create a pure dropdown CSS menu easily

We all know that easy-to-use navigation is the very important section for any website. The navigation of the website is responsible for creating a good or bad user experience. The navigation that we are going to create in this tutorial will be a pure CSS menu with a dropdown.CSS is the language we use to style an HTML document. Pure CSS is a CSS framework. Pure CSS is developed by Yahoo and is used for creating faster, attractive, and responsive websites. Now if you don’t know what a pure CSS menu is, let me tell you that a pure CSS menu is nothing but a menu without use of any sort of images. With the help of Pure CSS, we can easily create such dropdown menus. Ok now let’s proceed to our tutorial to see the step by step process of building pure CSS dropdown menu. A dropdown menu is the collection of menu items. First of all open up your favorite text or code editor and let’s create a pure dropdown CSS menu easily.

Before we begin

I assume that you have opened your text editor. Ok now create a new document and save it as menu.html. In this tutorial we will be writing our CSS code inside our ‘menu.html’ page. So lets sit straight and jump in to the HTML code.

The HTML Code

Here is the html code that you are going to write in your body section of menu.html page. I have skipped the html, head, and body tags in this tutorial to save your time creating a pure dropdown CSS menu. But you have to write this code in the body section only.

<div id="ajonav">
<ul>
<li>
   <a href="#">Articles</a>
  </li>
<li>
   <a href="#">Coding</a>
   <ul>
<li><a href="#">CSS</a></li>
<li><a href="#">HTML</a></li>
<li><a href="#">Javascript</a></li>
<li><a href="#">PHP</a></li>
</ul>
</li>
<li>
   <a href="#">Design</a>
   <ul>
<li><a href="#">Photoshop</a></li>
<li><a href="#">UI Design</a></li>
</ul>
</li>
<li>
   <a href="#">Inspiration</a>
  </li>
<li>
   <a href="#">Freebies</a>
  </li>
</ul>
</div>

Output

The Output you are looking in the above picture is the skeleton of our pure dropdown css menu. To make it alive let’s proceed towards the css code.

The CSS code

Now lets start styling our pure CSS menu with CSS. In this tutorial we are using internal cascading style sheet To start coding our CSS we need to write <style type=”text/css”></style> in between the head tags.
First of all we will add styling to #ajonav id and then we have to remove the bullets from ul and li tags. To do this write down the following code in between the style tags.

#ajonav{margin: auto;width: 550px;}
/*
 ******************************************************
 *Design the main ul
 ******************************************************
*/ 
 #ajonav ul {
 background-color: #000; 
 padding: 0 20px;
 list-style: none;/*To remove the bullets*/
 position: relative;
 display: inline-block;
 }

/*
************************************
*Design the main ul li
************************************
*/
#ajonav ul li {
float: left;
border-right: 1px solid #ccc;
}
#ajonav ul li:hover {
background-color: cornflowerblue;
}
#ajonav ul li:nth-child(5){border-right:none; }

After styling the list items it’s time to stylize the anchor tags i.e.(<a></a>). We need to add some padding to the anchor tags in order to make our pure dropdown css menu look bigger and better.

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

#ajonav ul li a {
color: #E4E4E4;
text-decoration: none;
padding: 15px 20px;
display: block;
font-family: sans-serif,serif;
}

Now let’s start the styling of dropdown menu. The dropdown menu has submenus of particular menu item. In the language of coding I will say that the dropdown menu is nothing but an Unordered List (UL) inside another Unordered List’s List Item (LI). So go ahead and grab the following code.

/*
 ************************************
 *(Dropdown) Design the sub ul li
 ************************************
*/
/*
 ******************************************************
 *Hide the submenu ul at start
 ******************************************************
*/ 
 #ajonav ul ul{visibility:hidden;display: none;}
/*
 ******************************************************
 *Show the submenu when li gets hover
 ******************************************************
*/ 
 #ajonav ul li:hover > ul {visibility:visible;display: block;}
 #ajonav ul ul {
 position: absolute;
 background-color: rgb(0,0,0);
 padding: 0px;  
 }

#ajonav ul ul li {
position: relative;
float: none;
border-top: 1px solid #727272;
}

#ajonav ul ul li a {
padding: 15px 20px;
color: #fff;
}

#ajonav ul ul li a:hover {
background-color: cornflowerblue;
}

Output

Conclusion

That’s it. You have created a pure CSS dropdown menu easily. If you want a readymade pure CSS dropdown menu then you can download it from here. If you have any problems with creating the pure dropdown CSS menu please comment below.