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.
No comments:
Post a Comment