Slash Coding

  • Android Development
  • CSS
  • Subscribe
  • About Us
  • Contact Us
You are here: Home / Web Development / CSS / A Professional Drop Down Menu with CSS

A Professional Drop Down Menu with CSS

By Aneesh Bhatnagar

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.

Drop Down Menu ScreenshotOne 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.
    Drop Down Menu Preview without CSS

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!

Drop Down Menu Screenshot

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.

Did you enjoy this article?
Subscribe to our email alerts when we post something new so you don't miss out.

About Aneesh Bhatnagar

Aneesh Bhatnagar is a freelance web developer, who specializes in front-end website development with HTML5, CSS3 and jQuery. He believes in transforming the entire web into a Responsive Web. He also specializes in use of Bootstrap framework to get websites up and running.

Comments

  1. sumera says

    January 23, 2017 at 2:23 pm

    hello Aneesh
    I was in search of horizontal menus for my website from past 2weeks. and got link of this page from google search. I will go through it now. GOD bless u for helping others in need.

Search Slash Coding

Follow Us

RSS Feeds Facebook Twitter Follow Google+

Categories

  • Android Development
  • C++
  • Developer Tips
  • Slash Coding
  • Web Development
    • CSS
    • JavaScript
    • jQuery
    • PHP

Recently Published

  • Moving Ahead from Front End and Android Development
  • How to Export a Project from Android Studio
  • What is jQuery? Let’s Answer this Common Question today!
  • Mobile App Prototyping : Pixate Studio
  • How to Create a Countdown Timer using jQuery

Subscribe to Email Alerts

Eager to learn more from Slash Coding?
Sign up for daily email updates when anything new comes up. Get it straight in your inbox.

Follow Us on Social Media

RSS Feeds Facebook Twitter Follow Google+

Copyright © 2025 · Slash Coding · Powered by the Genesis Framework
Sitemap | Privacy Policy | About | Contact

×
Get Notified of the new Tutorials when they are posted!
Never miss any article update from Slash Coding. Subscribe to email alerts today!