Click here to Skip to main content
Click here to Skip to main content

How to Create a Hierarchical Menu Using HTML And CSS

, 30 Apr 2014
Rate this:
Please Sign up or sign in to vote.
Friends, I am planning to write a series of articles on creating menus in different ways and this is the 1st one in the series. This post will explain how to create a simple 2 level menu using HTML and CSS only. We know there are a lot of ways to create a HTML menu …Read more →

Friends,

I am planning to write a series of articles on creating menus in different ways and this is the 1st one in the series. This post will explain how to create a simple 2 level menu using HTML and CSS only. We know there are a lot of ways to create a HTML menu but at times, we need to use only HTML/CSS in the project to create a nice menu. So, lets get started.

We will create a HTML structure as below using <ul> and <li> tags. Write the below code in your HTML file where you want to place the menu.

<div class="menu">
    <ul>
        <li><a href="#">Menu 1</a></li>
        <li><a href="#">Menu 2</a>
            <ul>
                <li><a href="#">Menu 2.1</a></li>
                <li><a href="#">Menu 2.2</a></li>
                <li><a href="#">Menu 2.3</a></li>
            </ul>
        </li>
        <li><a href="#">Menu 3</a>
            <ul>
                <li><a href="#">Menu 3.1</a></li>
                <li><a href="#">Menu 3.2</a></li>
                <li><a href="#">Menu 3.3</a></li>        
            </ul>
        </li>
    </ul>   
</div>

Now, we have the structure ready. Definitely, the current menu does not look good and we will now apply some CSS to make it look beautiful. Write the below code in the >head< section.

<style type="text/css">
.menu{
    width: 500px;
    margin: 0px auto;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 14px;
}
.menu ul li a:link, div ul li a:visited {
    display: block;
    background-color: #f1f1f1;color:#000;
    text-align: center;
    text-decoration: none;
    padding: 4px;
    border-bottom: 1px solid #fff;
    width: 150px;        
}
.menu ul li a:hover{
    background-color: #ccc;
}
.menu ul li ul li a:link, li ul li a:visited {
    display: block;
    background-color: #f1f1f1;
    color: #000;
    text-align: center;
    text-decoration: none;
    padding: 4px;
    border-bottom: 1px solid #fff;
    width: 150px;
}
.menu ul li ul li a:hover {
    background-color: #ccc;
}
.menu ul {
    list-style-type: none;
    margin: 0px;
    padding: 0px;   
}
.menu ul li {
    float: left;
    margin-left: 5px;
}
.menu ul li ul li {
    float: none;
    margin-left: 0px;
}
.menu ul li ul {
    display: none;  
}
.menu li:hover ul{
    display: block; 
}
</style>

Save the HTML file and double click on it to view on the browser. Your menu should look something like the below screesnhot.
html-css-menu

Hope you like this post! Cheers!

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

Nitesh Luharuka
Team Leader Independent IT Professional, Consultant
India India
An Independent IT Professional and Consultant on MS Technologies like .Net | MVC | Silverlight | Sharepoint | MS Project Server along with open source CMS Systems like DotNetNuke etc.
 
I am an enthusiastic technocrat who love to debug problems and solve them. I love writing articles on my website in my spare time. Please visit my Website for more details and subscribe to get technology related tips/tricks.
Follow on   Twitter   LinkedIn

Comments and Discussions

 
GeneralMy vote of 5 PinpremiumAnurag Gandhi30-Apr-14 7:13 
GeneralRe: My vote of 5 PinmemberNitesh Luharuka1-May-14 1:12 
QuestionNot an article PinprofessionalRage29-Apr-14 21:52 
AnswerRe: Not an article PinpremiumAnurag Gandhi30-Apr-14 7:21 
QuestionCSS scope PinmembercpGlenn25-Apr-14 22:55 
AnswerRe: CSS scope PinmemberNitesh Luharuka28-Apr-14 23:47 
AnswerRe: CSS scope PinmemberNitesh Luharuka29-Apr-14 5:22 
GeneralRe: CSS scope PinmembercpGlenn29-Apr-14 7:52 
GeneralRe: CSS scope PinmemberNitesh Luharuka29-Apr-14 9:04 
GeneralRe: CSS scope PinmembercpGlenn29-Apr-14 9:38 
GeneralRe: CSS scope PinmemberNitesh Luharuka29-Apr-14 15:59 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web04 | 2.8.140718.1 | Last Updated 30 Apr 2014
Article Copyright 2014 by Nitesh Luharuka
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid