How do I get the sub-menu to stick around even on hovering over the sub-menu itself ? Right now the sub-menu closes because it's linked to an :hover of the a element.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<style type="text/css">
.flex
{
display:flex;
flex-direction: row;
}
#top-menu-1 > div
{
position:relative;
}
#top-menu-1 > div > a
{
font-size: 24px;
padding:15px 15px;
color:#000;
text-decoration:none;
}
#top-menu-1 > div > a:hover + div
{
display:block;
}
#top-menu-1 > div > div
{
position: absolute;
margin-top:10px;
display:none;
box-sizing: border-box;
width: 900px;
height: 327px;
border-radius: 6px;
box-shadow: 0 0 17px 0 rgba(0, 0, 0, 0.22);
background-color: #ffffff;
padding:20px;
z-index: 1;
}
</style>
</head>
<body>
<div id="top-menu-1" class="flex">
<div>
<a href="#">Menu 1</a>
<div>
Sub-Menu Content
</div>
</div>
<div>
<a href="#">Menu 2</a>
</div>
<div>
<a href="#">Menu 3</a>
</div>
<div>
<a href="#">Menu 4</a>
</div>
</div>
</body>
</html>