<div id="headermenu">
<ul >
<li id="menu1"><a href="#"><img src="images/menu1.png"/></a></li>
<li id="menu2"><a href="#"><img src="images/menu2.png"/></a>
<ul class="submenu2">
<li><a href="#">submenu2</a></li>
<li><a href="#">submenu2</a></li>
<li><a href="#">submenu2</a></li>
<li><a href="#">submenu2</a></li>
<li><a href="#">submenu2</a></li>
<li><a href="#">submenu2</a></li>
<li><a href="#">submenu2</a></li>
<li><a href="#">submenu2</a></li>
</ul>
</li>
<li id="menu3"><a href="#"><img src="images/menu3.png" /></a></li>
<li id="menu4"><a href="#"><img src="images/menu4.png"/></a></li>
<li id="menu5"><a href="#"><img src="images/menu5.png"/></a></li>
</ul>
</div>
css
#headermenu ul ul {
display: none;
}
#headermenu ul{
padding:0;
margin:0;
white-space:nowrap;
}
#headermenu ul li{
width: 20%;
list-style-type:none;
display:inline-block;
margin-bottom:15px;
float:left;
left:0;
}
#menu1:hover{
background: url('images/menu1hover.png');
}
Hover functionality is not functioning properly, I am curious about how to implement hover effects on a list with images, as well as how to create a sub-list when hovering over an item. Furthermore, I would like to know the process of adding another list within a sub-list using only CSS.