MrBool
You must be logged in to give feedback. Click here to login
[Close]

You must be logged to download.

Click here to login

[Close]

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

[Close]

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

How to Create Menu with SubMenu using CSS/HTML

This article will cover the creating of a CSS menu using the HTML Div tags. It will demonstrate the functionality by giving some examples on to play with different types of menus.

[close]

You didn't like the quality of this content?

Would you like to comment what you didn't like?

Introduction:

This tutorial will deal with menu designing in CSS. You know that one of the most important parts of website is navigation menu, which is very decorative and interactive section of page. At the end of this tutorial you will be able to create interactive navigation menu.

Note: You can also check it out this article and learn how to create a Metro Style Menu

We will start menu designing by creating a container using a div box. My div box will contain id of navigation. A navigation menu always requires Standard HTML as a basic tool for menu designing. In following script we will use a div tag, <ul> and <li> tags and create menu options.

Following listed script will display simple vertical menu with sub menu, which compile the basic idea of menu designing.

Listing 1: Script of Vertical Menu and Submenu
<html>
<head>
<title>Example of HTML Menu</title>
</head>
<body>
<div id="navigation">
        <ul> <li><a href="#">News</a>
                <ul> <li>National News</li> <li>International News</li> <li>Sports News </li> <li>Hollywood news</li> </ul>
            </li>
            <li>
            <a href="#">Technology</a>
                <ul> <li>IT/Software </li> <li>Hardware</li> <li>Iphone</li> <li>Neuro-Science</li> </ul> 
            </li>
            <li>
            <a href="#">Sports</a>
                <ul> <li>Cricket</li> <li>Tenis</li> <li>Badminton</li> <li>Hockey</li> </ul>
            </li>
            <li>
            <a href="#">Contry</a>
                <ul> <li>India</li> <li>Shree lanka </li> <li>Bangaladesh</li> <li>England</li> </ul>
            </li>
        </ul>
    </div>
</body>
</html>
 
Above figure is simple menu with submenu created by div tag which contains four main menu and 16 submenu (4 submenu for each main menu) and we have used standard HTML as a baseline. In this example we can remove bullets and the margins and padding from the list.

Figure 1: Above figure is simple menu with submenu created by div tag which contains four main menu and 16 submenu (4 submenu for each main menu) and we have used standard HTML as a baseline. In this example we can remove bullets and the margins and padding from the list.

Horizontal Menu:

Following section contains the description of linear menu (horizontal menu). Where the “li” elements will be displayed as inline elements, this forces the list to be in one line. The “ul” element has a full width and each hyperlink in the list has a width of 7px. Also we have added some colors to make it interactive

Listing 2: Script of Horizontal Menu and Submenu

<!DOCTYPE html>
<html>
<head>
<title>Example of HTML Menu</title>
<style type="text/css">
ul
{
list-style-type:none;
margin:1;
padding:1;
padding-top:7px;
padding-bottom:5px;
}
li
{
display:inline;
}
a:link,a:visited
{
font-weight:bold;
color:#CC3DD;
background-color:#90EE90;
text-align:center;
padding:6px;
text-decoration:italic;
text-transform:uppercase;
}
a:hover,a:active
{
background-color:#FF1493;
}
</style>
</head>
<body>
<ul>
<li><a href="#News">News</a></li>
<li><a href="#Technology">Technology</a></li>
<li><a href="#Sports">Sports</a></li>
<li><a href="#Country">Country</a></li>
<li><a href="#Video">Video</a></li>
<li><a href="#Download">Download</a></li>
</ul>
</body>
</html>
Above figure is simple menu items in horizontal way

Figure 2: Above figure is simple menu items in horizontal way.

Submenu/Dropdown Menu in horizontal Main Menu:

This section will explain the drop down menu or submenu in horizontal Menu. In modern interactive web designing, drop down menus appear very frequently. After entry of CSS higher version, it became possible to create similar effects using standard HTML technologies, a significant number of people who have difficulty with hand control or eye blindness can use a keyboard or other text device for accessing drop down menu. Listed script will compile the idea of dropdown menu in horizontal way.

Listing 3: Script to Sub Menu/Dropdown Menu

<html>
<head>
<title>Example of HTML Menu</title>
<style type="text/css" media="screen">
#horizontalmenu ul {
padding:1; margin:1; list-style:none;
}
#horizontalmenu li {
float:left; position:relative; padding-right:100; display:block;
border:4px solid #CC55FF; 
border-style:inset;
}
#horizontalmenu li ul {
    display:none;
position:absolute;
}
#horizontalmenu li:hover ul{
    display:block;
    background:red;
height:auto; width:8em; 
}
#horizontalmenu li ul li{
    clear:both;
border-style:none;}
</style>
</head>
<body>
<div id="horizontalmenu">
        <ul> <li><a href="#">News</a>
                <ul> <li><a href="#">National</a></li> <li><a href="#">International</a></li> <li><a href="#">Sport</a></li> <li><a href="#">Hollybood</a></li> </ul>
            </li>
            <li>
            <a href="#">Technology</a>
		<ul> <li><a href="#">IT/Software</a></li> <li><a href="#">Hardware</a></li> <li><a href="#">Iphone</a></li> <li><a href="#">Neuro-Science</a></li> </ul>
                
            </li>
            <li>
            <a href="#">Sports</a>
                <ul> <li><a href="#">Cricket</a></li> <li><a href="#">Tenis</a></li> <li><a href="#">Badminton</a></li> <li><a href="#">Hockey</a></li> </ul>
            </li>
            <li>
            <a href="#">Country</a>
                <ul> <li><a href="#">India</a></li> <li><a href="#">America</a></li> <li><a href="#">France</a></li> <li><a href="#">Pakistaan</a></li> </ul>
        
            </li>
        </ul>
</div>
</body>
</html>
 
Menu done

Figure 3: Menu done

Conclusion:

This tutorial cover the basic knowledge of CSS menus. We have seen three kinds of menus including submenus. Go through the examples given with this tutorial and let us know your queries at mrbool site. We will answer as soon as possible.



I am Software Developer from India. I hold B.Tech. in Computer Science & Engineering. I am having 2+ years experience of developing Web applications and Websites using HTML, JavaScript, CSS, C#.NET etc..

What did you think of this post?

Did you like the post?

Help us to keep publishing good contents like this.

SUPPORT US

funded

remaining

[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually � in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits � in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login