A Professional Drop Down Menu with CSS

Developing a menu for your webpage can sometimes be a very hard task. But if you want to create a simple menu, that looks professional, I would suggest you to do that using basic CSS and HTML. It is quick and looks professional. I earlier shared a tutorial on how to make a professional looking CSS menu, but it lacked the feature of a drop-down menu.

One of my readers emailed me asking me to write a tutorial on how to create a drop down menu. So, I would continue with the previous tutorial and design a similar looking professional drop down menu. For those of you who do not know what a drop down menu is, it is a special type of menu that displays a sub menu when you hover over a particular menu item. Again, I would use HTML and CSS ( and not HTML5) and my favorite Text Editor, Notepad++. Read more about my previous tutorial for a professional looking CSS menu without a drop down and the reason why I use Notepad++ for writing all my codes here.

• Creating a professional looking Menu with CSS
• Using Notepad++ for enhanced Programming Experience

Professional Drop-Down menu using CSS

Let’s begin with our tutorial for this article. As before, the menu construction would be divided into two parts, the first part includes the HTML code for your webpage and the second part contains the CSS styling for the menu that will be displayed to the user.

HTML Part

1. On the page where you want to put the professional drop down menu, add the following lines of code.

   <ul id="Menu">
   <li><a href="#">Home</a></li>
   <li><a href="#">About</a>
   <ul>
   <li><a href="#">About Me</a></li>
   <li><a href="#">About Slash Coding</a></li>
   </ul>
   </li>
   <li><a href="#">Services Offered</a></li>
   <li><a href="#">Partners</a></li>
   <li><a href="#">Offers</a></li>
   <li><a href="#">Contact Me</a></li>
   </ul>
   

2. Make sure that the webpage has a style sheet linked. If not, add the following line of code to the header tag to link a new style sheet called “menustyle.css“.

   	<link rel="stylesheet" type="text/<span class=" />css" href="menustyle.css" media="all" />
   

3. If you preview your HTML page at this moment, it would look something like this.
   

CSS Part

1. Create a new CSS file if you don’t have one already. If you have one already, just open it in your favorite text editor.
2. Here, paste the following lines of code to style up your main menu.

   ul#Menu{
   margin-left:50px;
   background: #000000;
   box-shadow: 0px 0px 9px rgba(0,0,0,0.5);
   padding: 0 10px;
   border-radius: 10px;
   list-style: none;
   position: relative;
   display: inline-table;
   }
   
   ul#Menu li{
   float: left;
   }
   
   ul#Menu li a{
   display: block;
   padding: 15px 20px;
   color: #757575;
   text-decoration: none;
   }
   

3. Now, you want to hide the sub-menu or the drop down menu. Do this by adding the following lines of code.

   
   ul#Menu li ul{
   list-style:none;
   display:none;
   }
   

4. Now, when someone hovers on the respective main menu element, you want the sub menu to be displayed. Do that by adding the following lines of code.

   
   ul#Menu:after{
   content: "";
   clear: both;
   display: block;
   }
   
   ul#Menu 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, #4f5964 0%,#5f6975 40%);
   }
   
   ul#Menu li:hover a{
   color: #fff;
   }
   
   ul#Menu li:hover > ul{
   display:block;
   }
   
   ul#Menu ul{
   background: #5f6975; border-radius: 0px; padding: 0;
   position: absolute; top: 100%;
   }
   
   ul#Menu ul li{
   float: none;
   border-top: 1px solid #6b727c;
   border-bottom: 1px solid #575f6a;
   position: relative;
   }
   
   ul#Menu ul li a{
   padding: 5px 40px;
   color: #fff;
   }
   
   ul#Menu ul li a:hover{
   background: #4b545f;
   }
   

5. Well, that’s all for the CSS part as well.

And this is the final output, the one I showed to you at the beginning of this tutorial!

Download Source Code

I hope this tutorial helped you make a professional looking drop down menu for your website. If you have any doubts or problems regarding this, feel free to leave a comment below or use the contact page to get in touch with me. I will be more than happy to help you with everything I can. Also, stay subscribed to Slash Coding via RSS Feeds, Facebook page or Twitter account! It’s your pick.