CSS :
<style type="text/css">
/* CSS code */#menu
{
background: #333;
height: 120px;
width: 500px;
}
#menu ul
{
margin: 0;
padding: 0;
}
#menu ul a
{
text-decoration: none;
}
#menu ul li
{
list-style: none;
float: left;
position: relative;
}
#menu ul li a
{
background: #333;
color: #fff;
border: 1px solid #333;
display: block;
padding: 4px;
width: 154px;
}
#menu ul ul
{
padding: 0;
overflow: hidden;
}
#menu ul ul li
{
float: none;
display: none;
border-bottom: 1px solid #ccc;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
}
#menu ul ul li a
{
background: #f0f0f0;
color: #333;
border: none;
}
#menu ul ul li a:hover
{
background: #ccc;
}
#menu ul li a:hover, #menu ul li:hover ul li
{
display: block !important;
}
/* HTML code */
</style>
HTML :
<form id="form1" runat="server">
<div>
<div id="menu">
<ul>
<li><a href="#">
<img src="Images/Car.jpg" alt="Alternate Text" /></a>
<ul>
<li><a href="#">
<img src="Images/Volvo.jpg" alt="Alternate Text" />
Volvo</a></li>
<li><a href="#">
<img src="Images/bmw.jpg" alt="Alternate Text" />
bmw</a></li>
<li><a href="#">
<img src="Images/Subaru.jpg" alt="Alternate Text" />
Subaru</a></li>
</ul>
</li>
<li><a href="#">
<img src="Images/Boat.jpg" alt="Alternate Text" /></a>
<ul>
<li><a href="#">
<img src="Images/SeaRay.jpg" alt="Alternate Text" />Sea Ray</a></li>
<li><a href="#">
<img src="Images/Whaler.jpg" alt="Alternate Text" />Whaler</a></li>
<li><a href="#">
<img src="Images/FairLine.jpg" alt="Alternate Text" />Fair Line</a></li>
</ul>
</li>
<li><a href="#">
<img src="Images/Bike.jpg" alt="Alternate Text" /></a>
<ul>
<li><a href="#">
<img src="Images/Yamaha.jpg" alt="Alternate Text" />
Yamaha</a></li>
<li><a href="#">
<img src="Images/Suzuki.jpg" alt="Alternate Text" />
Suzuki</a></li>
<li><a href="#">
<img src="Images/Rider.jpg" alt="Alternate Text" />
Rider</a></li>
</ul>
</li>
</ul>
</div>
</div>
</form>