Dear all
This is my
another blog for how we can create a menu with submenu using HTML and CSS. This
is a very important topic, because by this method you can show your own
creativity. This is an extension of my previous block in which I had
taught creation of simple HTML menu using CSS styling. If you want to go
through this blog then please click here. In this blog I had already discussed
that we can create menu using either only HTML file having <STYLE> tag in
it or we can create an external CSS file also. So the same procedure we can
follow in this program code also.
In this blog, I
am creating only one HTML file having <STYLE> tag ( embedded style sheet)
in the same file, if you want to create an external STYLESHEET, just copy the
<STYLE> tag in separate file and save it with the extension .css and link
it with the HTML file.
So start
creating a HTML file as, I had already discussed about this, menu in a website
is created using unordered list tag as in the following program:-
First of all we
have to decide the levels of our menu to be design and then we will nest the
unordered list to that level only.
Figure 1
<html>
<head><title></title>
</head>
<body >
<h1>
Navigation Menu </h1>
<ul
id="navmenu">
<li><a
href="#">Hyperlink Menu 1</a> </li>
<li><a
href="#">Hyperlink Menu 2</a><span
class="darrow">▼</span>
<ul class="sub1">
<li><a
href="#">Hyperlink 2.1</a> </li>
<li><a
href="#">Hyperlink 2.2</a>
</li>
<li><a
href="#">Hyperlink 2.3</a> </li>
<li><a
href="#">Hyperlink 2.4</a> </li>
<li><a
href="#">Hyperlink 2.5</a> </li>
</ul>
</li>
<li><a
href="#">Hyperlink Menu 3</a> </li>
<li><a
href="#">Hyperlink Menu 4</a> <span class="darrow">▼</span>
<ul class="sub1">
<li><a
href="#">Hyperlink 4.1</a> </li>
<li><a
href="#">Hyperlink 4.2</a>
</li>
<li><a
href="#">Hyperlink 4.3</a> <span class="rarrow">▶</span>
<ul
class="sub2">
<li><a
href="#">Hyperlink 4.3.1</a> </li>
<li><a
href="#">Hyperlink 4.3.2</a>
</li>
<li><a
href="#">Hyperlink 4.3.3</a> </li>
<li><a
href="#">Hyperlink 4.3.4</a> </li>
<li><a
href="#">Hyperlink 4.3.5</a> </li>
</ul>
</li>
<li><a
href="#">Hyperlink 4.4</a> </li>
<li><a
href="#">Hyperlink 4.5</a> </li>
</ul>
</li>
<li><a
href="#">Hyperlink Menu 5</a> </li>
</ul>
<div
id="bg"> </div>
</body>
</html>
After execution
of the above .HTML code in the browser, we will got the following figure which
is actually my target to achieve for the creation of a menu. This is the first
step of the menu designing using HTML and CSS. This is a HTML design now we
will add styles using CSS in it so that it will convert in an attractive
DROPDOWM menu. So now follow the further steps for adding CSS styles in the
same program.
Figure 2
This is a
complete HTML Program using HTML and CSS. To understand all the CSS rules, add
one rule and execute and check the output, you will find the required result.
<html>
<head><title></title>
<style>
*{
margin:0px;
padding:0px;
}
body
{
font-family:verdana;
background-color:#ABC;
Padding:50px;
}
h1
{
text-align:center;
border-bottom:
2px solid #009;
margin-bottom:50px;
}
ul#navmenu,ul.sub1,ul.sub2
{
list-style-type:none;
}
ul#navmenu li{
width:170px;
text-align:center;
position:relative;
float:left;
margin-right:
4px;
background-color:black;
}
ul#navmenu a{
text-decoration:none;
display:block;
width:170 px;
height:25px;
line-height:25px;
background-color:#000;
border-radius:5px;
color:#fff;
}
ul#navmenu .sub1
li
{
}
ul#navmenu .sub1
a{
margin-top:3px;}
ul#navmenu .sub2
a{
margin-left:10px;}
ul#navmenu li:hover
> a
{
background-color:
#555;
}
ul#navmenu
li:hover a:hover
{
background-color:#555;
}
ul#navmenu
ul.sub1
{
display:none;
position:absolute;
top:26px;
left:0px;}
ul#navmenu
ul.sub2
{
display:none;
position:absolute;
top:0px;
left:160px;
}
ul#navmenu
li:hover .sub1{
display:block;
}
ul#navmenu .sub1
li:hover .sub2{
display:block;
}
.darrow
{
font-size:6pt;
position:absolute;
top:5px;
right:4px;
background-color:#FFF;
}
.rarrow
{
font-size:6pt;
position:absolute;
top:5px;
right:4px;
background-color:#FFF;
}
#bg{
align:center;
height:500px;
width:1000px;
background-color:#FF0;
background-image:url("HomePageImageforRCCodemantra.jpg");
}
</style>
</head>
<body >
<h1>
Navigation Menu </h1>
<div>
<ul
id="navmenu">
<li><a
href="#">Hyperlink Menu 1</a> </li>
<li><a
href="#">Hyperlink Menu 2</a><span
class="darrow">▼</span>
<ul class="sub1">
<li><a
href="#">Hyperlink 2.1</a> </li>
<li><a
href="#">Hyperlink 2.2</a>
</li>
<li><a
href="#">Hyperlink 2.3</a> </li>
<li><a
href="#">Hyperlink 2.4</a> </li>
<li><a
href="#">Hyperlink 2.5</a> </li>
</ul>
</li>
<li><a
href="#">Hyperlink Menu 3</a> </li>
<li><a
href="#">Hyperlink Menu 4</a> <span
class="darrow">▼</span>
<ul class="sub1">
<li><a
href="#">Hyperlink 4.1</a> </li>
<li><a
href="#">Hyperlink 4.2</a>
</li>
<li><a
href="#">Hyperlink 4.3</a> <span
class="rarrow">▶</span>
<ul
class="sub2">
<li><a
href="#">Hyperlink 4.3.1</a> </li>
<li><a
href="#">Hyperlink 4.3.2</a>
</li>
<li><a
href="#">Hyperlink 4.3.3</a> </li>
<li><a href="#">Hyperlink
4.3.4</a> </li>
<li><a
href="#">Hyperlink 4.3.5</a> </li>
</ul>
</li>
<li><a
href="#">Hyperlink 4.4</a> </li>
<li><a
href="#">Hyperlink 4.5</a> </li>
</ul>
</li>
<li><a
href="#">Hyperlink Menu 5</a> </li>
</ul>
</div>
<div
id="bg">
</div>
</body>
</html>
Figure 3
