/*---Creating a Popup Menu with CSS---*/
.box{
position:fixed;
top: 0.1%;
left: 14px;
display: inline-block;
cursor: pointer;
}
ul{
list-style-type: none;
}
ul li{
font-family: Lato;
padding: 10px;
}
ul li a{
text-decoration: none;
color: black;
}
ul li:hover{
background-color: bisque;
}
.box1{
position: absolute;
top:3%;
left:15px;
z-index: 1;
background-color: floralwhite;
max-width: 260px;
box-sizing: border-box;
box-shadow: 2px 5px 15px black;
display: none;
}
.box2{
position: absolute;
top:3%;
left:8%;
z-index: 2;
background-color: floralwhite;
max-width: 260px;
box-sizing: border-box;
box-shadow: 2px 5px 15px black;
display: none;
}
.box:hover .box1{
display: block;
}
#nav li:focus .box2 {
display:block;
}<!--box-->
<div class="box">
<img src="https://img.icons8.com/ios-filled/344/menu-rounded.png"
height="35px"width="35px" id="menu">
<!--box1-->
<div class="box1">
<ul>
<li id="nav"><a href="#">item1 »</a></li>
<li><a href="#">item2</a></li>
<li><a href="#" >item3</a></li>
<li><a href="#">item4</a></li>
<li><a href="#" >item5</a></li>
<li><a href="#">item6</a></li>
</ul>
</div>
</div>
<!--box2-->
<div class="box2">
<ul>
<li><a href="#">sub-item1</a></li>
<li><a href="#">sub-item2</a></li>
<li><a href="#">sub-item3</a></li>
<li><a href="#">sub-item4</a></li>
</ul>
</div> I am attempting to design a popup menu that shows up when you click or hover over a small image (essentially an icon) using only HTML and CSS without using JavaScript. However, I am encountering an issue where the main menu appears but the sub-menu does not appear when focusing on a specific item from the list. Is there something I can do to fix this problem? My goal is to create a very simple menu.