HTML list can be used to create any menu by using CSS code. How you can create a transparent drop-down menu using CSS is shown in this tutorial. Flow the steps properly to create the menu.
Steps:
1. Add the following code in the body section to design a menu by using unordered list.
<ul id=”menu”>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>Trees</a>
<ul>
<li><a href=”#”>Flower</a></li>
<li><a href=”#”>Fruit</a>
<ul>
<li><a id=”m” href=”#”>Mango</a></li>
<li><a id=”a” href=”#”>Apple</a></li>
</ul>
</li>
<li><a href=”#”>Vegetables</a></li>
</ul>
</li>
<li><a href=”#”>Services</a></li>
<li><a href=”#”>Contact Us</a></li>
</ul>
2. Select any image for background and add as body background image by using the following CSS code.
<style>
body {
background-image:url(bg.jpg);
}
</style>
3. Add the following css in the header section for ‘li’ tag
#menu li
{ list-style-type:none;
float:left;
position:relative;
width:120px;
}
4.Add the following css for ‘a’ tag.
#menu a{
text-decoration:none;
background-color:#CFF;
display:block;
font-weight:bold;
text-align:center;
height:25px;
color: #33F;
opacity: 0.7;
margin-top:2px;
}
5. Add the following css for nested ‘ul’ tag
#menu ul{
display:none;
margin:0;
padding:0;
position:absolute;
top:20px;
}
6. Add the following css for li hover action
#menu li:hover>ul{
display:block;
}
7. Set position for nested ‘ul’
#menu ul ul {
left:120px;
top:0;
}
8. Set background color for li hover and focus ‘a’ tag
#menu li:hover>a, menu a:focus {
background-color:#FCF;
}
9. Select any two images as icon image and add the following css for adding icon image.
#m{background: url(mango.jpg) no-repeat;}
#a{background: url(apple.png) no-repeat;}
10. Check the output.
The steps are shown in the following video link.
