Drop Down Menu with Sub Menu - html

Question

I am working on a project and I'm struggling with one piece. It may be very simple, but I'm clearly over looking something. My objective is to have a menu and sub-menu populate on a hover over a specific image. When you hover over the image you'll see "categories" and to the right see the "sub-menu" to that category. I am able to get the first category to work, but unable to get any of the subsequent categories to change the "sub-menu" to the right. I've included the code below. Any help would be appreciated - I'm struggling to make this work
Menu Example:
This is my styling css:
/* Dropdown Button */
.dropbtn {
border: none;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
z-index: 1;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
float: right;
position: absolute;
background-image: url(../images/Framework-and-Navigation_03.png);
min-width: 100px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content2{
display: block;
position: relative;
z-index: 1;
color: black;
padding: 12px 16px;
text-decoration: none;
}
.dropdown-content3{
display: block;
position: relative;
z-index: 1;
color: black;
padding: 12px 16px;
text-decoration: none;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content-sub1 {
color: black;
text-decoration: none;
display: none;
z-index: 1;
}
.dropdown-content-sub2 {
color: black;
text-decoration: none;
display: none;
}
.dropdown-content-sub3 {
color: black;
text-decoration: none;
display: none;
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: inline-block;}
/* Change the sub menu */
.dropdown-content1:hover .dropdown-content-sub1 {display: block;}
.dropdown-content2:hover .dropdown-content-sub2 {display: inline-block;}
This is my menu/submenu test:
<div class="dropdown">
<center>
<input type="image" class="dropbtn" src="images/menu_07.png"/>
</center>
<div class="dropdown-content">
<table width="500" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="158">
<div class="dropdown-content1">Link 1</div>
<div>Link 2</div>
<div>Link 3</div>
</td>
<td class="dropdown-content-sub1" valign="top"><div>
Test
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>

Answer 1

See if this solves your problem :)
/* Dropdown Button */
html,
body {
font-family: arial;
padding: 0;
margin: 0;
}
a {
padding: 10px;
text-decoration: none;
display: block;
}
.menu-container {
width: 615px;
height: 200px;
background: #eee url("https://images.unsplash.com/photo-1538098269808-2ace9a4d9680?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=2a48defb8057de5b3f79b49b85c173bc&auto=format&fit=crop&w=500&q=60") no-repeat 200px 0;
display: none;
position: absolute;
top: 50px;
left: 0;
box-shadow: 0 0 8px 8px rgba(0, 0, 0, 0.3);
}
ul.menu,
ul.menu ul {
width: 200px;
padding: 0;
margin: 0;
display: none;
flex-direction: column;
}
ul.menu li,
ul.menu ul li {
background: rgba(0, 0, 0, 0.5);
height: 30px;
display: flex;
align-items: center;
}
ul.menu li a,
ul.menu ul li a {
color: white;
margin-bottom: 1px;
}
ul.menu li:hover ul,
ul.menu ul li:hover ul {
display: flex;
}
ul.menu ul {
position: absolute;
margin: 0 0 0 200px;
top: 0;
z-index: 2;
}
/* The container <div> - needed to position the dropdown content */
.nav {
background-color: black;
display: flex;
flex-direction: row;
}
.nav > .nav-item {
height: 30px;
padding: 10px;
margin-right: 2px;
background-color: rgba(255, 255, 255, 0.4);
color: white;
display: flex;
align-items: center;
}
.nav > .nav-item:hover > .menu-container,
.nav > .nav-item:hover > .menu-container > .menu {
display: flex;
}
<div class="nav">
<div class="nav-item" href="">Nav item 1
<div class="menu-container">
<ul class="menu">
<li>Menu item 1 >
<ul>
<li>Sub menu 1 item 1</li>
<li>Sub menu 2 item 2</li>
</ul>
</li>
<li>Menu item 2</li>
<li>Menu item 3 >
<ul>
<li>Sub menu 2 item 1</li>
<li>Sub menu 2 item 2</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="nav-item" href="">Nav item 2</div>
</div>