To decorate websites and navigate to one page another page every wesites need a menu. With css anybody can style with their own. To navigahe one page to another page and have a long menu we need multilevel menu. This post show how to create a multilevel menu using css.
Final output of multilevel horizontal menu
Create a multilevel horizontal menu
Now start coding to create a multilevel horizontal menu. For this we need css and html. The sample file structure is like.
Create a simple html file to locate links with html <ul> tags. It is a simple html file
multilevel-horizontal-menu.html
Now start to styling the html file with css. style.css
multilevel-horizontal-menu/ multilevel-horizontal-menu.html style.css back.jpg
Create a simple html file to locate links with html <ul> tags. It is a simple html file
multilevel-horizontal-menu.html
<html>
<head>
<title>Multilevel Horizontal menu</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<br/><br/>
<nav>
<ul>
<li><a href="">Home</a>
<ul>
<li><a href="">Home</a></li>
<li><a href="">Home</a></li>
<li><a href="">Home</a></li>
<li><a href="">Home</a></li>
<li><a href="">Home</a></li>
<li><a href="">Home</a></li>
</ul>
</li>
<li><a href="">Service</a>
<ul>
<li><a href="">Service</a></li>
<li><a href="">Service</a></li>
<li><a href="">Service</a></li>
<li><a href="">Service</a></li>
<li><a href="">Service</a></li>
<li><a href="">Service</a></li>
</ul>
</li>
<li><a href="">Contact Us</a>
<ul>
<li><a href="">Contact Us</a></li>
<li><a href="">Contact Us</a></li>
<li><a href="">Contact Us</a></li>
<li><a href="">Contact Us</a></li>
<li><a href="">Contact Us</a></li>
<li><a href="">Contact Us</a></li>
</ul>
</li>
<li><a href="">About Us</a>
<ul>
<li><a href="">About Us</a></li>
<li><a href="">About Us</a></li>
<li><a href="">About Us</a></li>
<li><a href="">About Us</a></li>
<li><a href="">About Us</a></li>
<li><a href="">About Us</a></li>
</ul>
</li>
<li><a href="">Others</a></li>
<li><a href="">Help</a></li>
</ul>
</nav>
<div>
<h3>Create a multilevel horizotal menu</h3>
Create a multilevel horizotal menu .Create a multilevel horizotal menu .Create a multilevel horizotal menu .Create a multilevel horizotal menu .Create a multilevel horizotal menu .Create a multilevel horizotal menu .Create a multilevel horizotal menu .Create a multilevel horizotal menu .Create a multilevel horizotal menu .Create a multilevel horizotal menu .Create a multilevel horizotal menu .Create a multilevel horizotal menu .Create a multilevel horizotal menu .Create a multilevel horizotal menu .Create a multilevel horizotal menu .Create a multilevel horizotal menu .Create a multilevel horizotal menu .Create a multilevel horizotal menu .Create a multilevel horizotal menu .Create a multilevel horizotal menu .Create a multilevel horizotal menu .Create a multilevel horizotal menu .
</div>
</body>
</html>
Now start to styling the html file with css. style.css
body{
width:600px;
margin:0 auto;
background:url("back.jpg");
}
nav{
width:600px;
background-color:cadetblue;
position:absolute;
}
ul{
list-style:none;
padding:0;
margin:0;
width:100%;
}
ul li{
float:left;
}
a{
text-decoration:none;
display:block;
padding:10px;
color:white;
font-weight:bold;
}
ul li:hover{
background-color:powderblue;
color:black;
}
ul ul li a{
padding:5px 10px;
}
ul ul{
display:none;
position:absolute;
background-color:powderblue;
clear:both;
left:0;
width:98%;
padding:1%;
margin:0px;
}
ul ul li a:hover{
background-color:#62D7DB;
-moz-border-radius:15px;
}
ul li:hover ul{
display:block;
z-index:101;
}
div {clear:both;position:relative;
top:90px;
}
Hello. Could you help me how to set the 2nd level menu to always be visible?
ReplyDeletethanks in advance
Just found the answer myself:
Deletechange
ul ul{
display:none;
to
ul ul{
display:block;
Please give me the complete code for blogger where we need copy this.......
ReplyDeleteall menus tried but not work in the blogger, before past the code could you please test in the blogger please
ReplyDelete