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.