Inline submenu when hover - html

Question

This is my current menu:
And here what I want:
First submenu is inline, and the child is dropdown.
I'm trying to change the ul li a display to inline-block but seems like it not working at all. How I suppose to do to make the submenu hover inline, and the child of the submenu dropdown?
Thank you so much.
#info {
top: 8%;
color: #fff;
height: auto;
font-family: arial;
left: 0px;
position: absolute;
width: 72px;
z-index: 40;
border-radius: 4px;
background: dimgrey;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
background: #efefef;
padding: 0;
list-style: none;
position: relative;
display: inline-table;
}
nav ul:after {
content: "";
clear: both;
display: inline;
}
nav ul li {
position:relative;
width:70px;
}
nav ul li:hover {
background: #4b4b4b;
}
nav ul li:hover a {
color: #fff;
}
nav ul li:hover button{
color: #fff;
}
nav ul li a {
display: block;
padding: 12px 20px;
color: #757575;
text-decoration: none;
}
nav ul li button{
display: block;
padding: 12px 25px;
color: #757575;
text-decoration: none;
}
nav ul ul {
background: #5f6975;
border-radius: 0px;
padding: 0;
position: absolute;
top:0;
left:100%;
}
nav ul ul li {
float: none;
position: relative;
}
nav ul ul li a {
padding: 12px 25px;
color: #fff;
}
nav ul ul li button{
padding: 12px 25px;
color: #fff;
height: 50px; width: 100px; margin-bottom: 2px; font-size: 18px;
}
nav ul ul li a:hover {
background: #4b4b4b;
}
nav ul ul ul {
position: absolute;
left: 100%;
top:0;
}
.menu-container {padding: 19px 0; width: 70px; float: left;}
.clear {clear: both;}
ul{list-style:none;
border:0;outline:none;margin:0;padding:0;}
/* Vertical Mega Menu Styles */
.mega-menu{
font: bold 13px Arial, sans-serif;
line-height: 16px;
background: #333;
border-left: 1px solid #1B1B1B;
position: relative; /* Required */
}
.mega-menu li a {
display: block;
color: #fff;
padding: 12px 20px 12px 20px;
text-shadow: 1px 1px 1px #000;
text-decoration: none;
border-top: 1px solid #555;
border-bottom: 1px solid #222;
border-right: 1px solid #1B1B1B;
}
.mega-menu li button {
display: block;
color: #fff;
text-shadow: 1px 1px 1px #000;
text-decoration: none;
border-top: 1px solid #555;
border-bottom: 1px solid #222;
border-right: 1px solid #1B1B1B;
}
.mega-menu li a:hover, .mega-menu li.mega-hover a {
background: #4b4b4b;
color: #fff;
border-right: 1px solid #4b4b4b;
}
<div id="info">
<!--
<li><button id="FreehandPolyline">Freehand Polyline</button></li>
<li><button id="Triangle">Triangle</button></li>
<li><button id="Extent">Rectangle</button></li>
<li><button id="Circle">Circle</button></li>
<li><button id="Ellipse">Ellipse</button></li>
<li><button id="Polygon">Polygon</button></li>
<li><button id="FreehandPolygon">Freehand Polygon</button></li> -->
<!-- <div id="menu_plotting" >Menu plotting</div> -->
<nav class="menu-container clear">
<ul id="mega-1" class="mega-menu">
<li>
<a title="Plotting Toolbar"><img src="assets/icon/pencil.png" width="30" height="30"></a>
<ul>
<li><a title="Arrows"><img src="assets/icon/arrow.png" width="30" height="30"></a>
<ul>
<li>
<a title="Straight Arrow" onClick="urlicon('arrow','')" style="cursor: pointer;">
<img src="assets/icon/arrow0.png" width="30" height="30"></a>
<!-- <a id="a" class="btn btn-info" onclick="arrow_('arrow')" style="cursor: pointer;">
<img src="icon/arrow.png" width="30" height="30"></a> -->
</li>
<li>
<a title="Down Arrow" onClick="urlicon('arrow_l','')" style="cursor: pointer;">
<img src="assets/icon/bawah.png" width="30" height="30"></a>
</li>
<li>
<a title="Up Arrow" onClick="urlicon('arrow_a','')" style="cursor: pointer;"> <img src="assets/icon/atas.png" width="30" height="30"></a>
</li>
</ul>
</li>
<li><a title="Polyline"><img src="assets/icon/polyline-48.png" width="30" height="30"></a>
<ul>
<li><a title="Polyline" id="Polyline" onClick="urlicon('polyline','')"><img src="assets/icon/polyline.png" width="30" height="30">
</a>
</li>
<li><a title="Freehand Polyline" id="FreehandPolyline"><img src="assets/icon/freepolyline.png" width="30" height="30"></a></li>
</ul>
</li>
<li><a title="Polygon"><img src="assets/icon/polygon.png" width="30" height="30"></a>
<ul>
<li><a title="Polygon" id="Polygon" onClick="urlicon('polygon','')">
<img src="assets/icon/polygon.png" width="30" height="30">
</a>
</li>
<li><a title="Triangle" id="Triangle"><img src="assets/icon/triangle.png" width="30" height="30"></a></li>
<li><a title="Rectangle" id="Extent"><img src="assets/icon/rectangle.png" width="30" height="30"></a></li>
<li><a title="Circle" id="Circle"><img src="assets/icon/circle.png" width="30" height="30"></a></li>
<li><a title="Ellipse" id="Ellipse"><img src="assets/icon/ellips.png" width="30" height="30"></a></li>
<li><a title="Freehand Polygon" id="FreehandPolygon"><img src="assets/icon/freepolygon.png" width="30" height="30"></a></li>
</ul>
</li>
<li>
<a title="Text" onClick="select_text()"> <img src="assets/icon/font.png" alt="Text" width="30" height="30"> </a>
</li>
</ul>
</li>
<li><a title="Radar"><img src="assets/icon/radar.png" width="30" height="30"></a></li>
<li><a title="Manuver"><img src="assets/icon/airplane.png" width="30" height="30"></a></li>
<!-- ASOPS -->
<?php } if ($list['asisten']==1 || $list['asisten']==6) {?>
<li>
<a title="Obstacle" onClick="select_obst()"><img src="assets/icon/obstacle.png" width="30" height="30"></a>
</li>
<li>
<a title="Strength" onClick="select_kekuatan()"><img src="assets/icon/streng.png" width="30" height="30"></a>
</li>
<li>
<a title="Unit" onClick="select_unit()"><img src="assets/icon/icons8-Org Unit-48.png" width="30" height="30"></a>
</li>
<li>
<a title="Situation" onClick="select_situasi()"><img src="assets/icon/warning.png" width="30" height="30"></a>
</li>
<?php if($list['asisten']==6 && $_SESSION['menu_'] == "menu"){ ?>
<script type="text/javascript">
document.getElementById("info3").style.display = "block";
</script>
<?php
}
}
} ?>
</ul>
</nav>
<div style="font-size: 13px; margin-left: -20px;" id="nm_scen"><?php echo $_SESSION['scen1']; ?></div>
</div>

Answer 1

You are almost there. You need to specify a fixed width to the inner UL because by default it will have 100% of the width of its relative positioned ancestor, and that width is not enough to have more than one item per line in the second menu level.
nav>ul>li>ul {
width: 291px
}
Hope this helps.
#info {
top: 8%;
color: #fff;
height: auto;
font-family: arial;
left: 0px;
position: absolute;
width: 72px;
z-index: 40;
border-radius: 4px;
background: dimgrey;
}
nav ul ul {
display: none;
}
nav ul li:hover>ul {
display: block;
}
nav ul {
background: #efefef;
padding: 0;
list-style: none;
position: relative;
display: inline-table;
}
nav ul:after {
content: "";
clear: both;
display: inline;
}
nav ul li {
position: relative;
width: 70px;
}
nav ul li:hover {
background: #4b4b4b;
}
nav ul li:hover a {
color: #fff;
}
nav ul li:hover button {
color: #fff;
}
nav ul li a {
display: block;
padding: 12px 20px;
color: #757575;
text-decoration: none;
}
nav ul li button {
display: block;
padding: 12px 25px;
color: #757575;
text-decoration: none;
}
nav ul ul {
background: #5f6975;
border-radius: 0px;
padding: 0;
position: absolute;
top: 0;
left: 100%;
}
nav ul ul li {
float: none;
position: relative;
display: inline-block;
}
nav ul ul li a {
padding: 12px 25px;
color: #fff;
}
nav ul ul li button {
padding: 12px 25px;
color: #fff;
height: 50px;
width: 100px;
margin-bottom: 2px;
font-size: 18px;
}
nav ul ul li a:hover {
background: #4b4b4b;
}
nav ul ul ul {
position: absolute;
left: 100%;
top: 0;
}
nav>ul>li>ul>li>ul {
top: 100%;
left: 0;
}
nav>ul>li>ul {
width: 291px
}
.menu-container {
padding: 19px 0;
width: 70px;
float: left;
}
.clear {
clear: both;
}
ul {
list-style: none;
border: 0;
outline: none;
margin: 0;
padding: 0;
}
/* Vertical Mega Menu Styles */
.mega-menu {
font: bold 13px Arial, sans-serif;
line-height: 16px;
background: #333;
border-left: 1px solid #1B1B1B;
position: relative;
/* Required */
}
.mega-menu li a {
display: block;
color: #fff;
padding: 12px 20px 12px 20px;
text-shadow: 1px 1px 1px #000;
text-decoration: none;
border-top: 1px solid #555;
border-bottom: 1px solid #222;
border-right: 1px solid #1B1B1B;
}
.mega-menu li button {
display: block;
color: #fff;
text-shadow: 1px 1px 1px #000;
text-decoration: none;
border-top: 1px solid #555;
border-bottom: 1px solid #222;
border-right: 1px solid #1B1B1B;
}
.mega-menu li a:hover,
.mega-menu li.mega-hover a {
background: #4b4b4b;
color: #fff;
border-right: 1px solid #4b4b4b;
}
<div id="info">
<!--
<li><button id="FreehandPolyline">Freehand Polyline</button></li>
<li><button id="Triangle">Triangle</button></li>
<li><button id="Extent">Rectangle</button></li>
<li><button id="Circle">Circle</button></li>
<li><button id="Ellipse">Ellipse</button></li>
<li><button id="Polygon">Polygon</button></li>
<li><button id="FreehandPolygon">Freehand Polygon</button></li> -->
<!-- <div id="menu_plotting" >Menu plotting</div> -->
<nav class="menu-container clear">
<ul id="mega-1" class="mega-menu">
<li>
<a title="Plotting Toolbar"><img src="assets/icon/pencil.png" width="30" height="30"></a>
<ul>
<li>
<a title="Arrows"><img src="assets/icon/arrow.png" width="30" height="30"></a>
<ul>
<li>
<a title="Straight Arrow" onClick="urlicon('arrow','')" style="cursor: pointer;">
<img src="assets/icon/arrow0.png" width="30" height="30"></a>
<!-- <a id="a" class="btn btn-info" onclick="arrow_('arrow')" style="cursor: pointer;">
<img src="icon/arrow.png" width="30" height="30"></a> -->
</li>
<li>
<a title="Down Arrow" onClick="urlicon('arrow_l','')" style="cursor: pointer;">
<img src="assets/icon/bawah.png" width="30" height="30"></a>
</li>
<li>
<a title="Up Arrow" onClick="urlicon('arrow_a','')" style="cursor: pointer;"> <img src="assets/icon/atas.png" width="30" height="30"></a>
</li>
</ul>
</li>
<li>
<a title="Polyline"><img src="assets/icon/polyline-48.png" width="30" height="30"></a>
<ul>
<li>
<a title="Polyline" id="Polyline" onClick="urlicon('polyline','')"><img src="assets/icon/polyline.png" width="30" height="30">
</a>
</li>
<li>
<a title="Freehand Polyline" id="FreehandPolyline"><img src="assets/icon/freepolyline.png" width="30" height="30"></a>
</li>
</ul>
</li>
<li>
<a title="Polygon"><img src="assets/icon/polygon.png" width="30" height="30"></a>
<ul>
<li>
<a title="Polygon" id="Polygon" onClick="urlicon('polygon','')">
<img src="assets/icon/polygon.png" width="30" height="30">
</a>
</li>
<li>
<a title="Triangle" id="Triangle"><img src="assets/icon/triangle.png" width="30" height="30"></a>
</li>
<li>
<a title="Rectangle" id="Extent"><img src="assets/icon/rectangle.png" width="30" height="30"></a>
</li>
<li>
<a title="Circle" id="Circle"><img src="assets/icon/circle.png" width="30" height="30"></a>
</li>
<li>
<a title="Ellipse" id="Ellipse"><img src="assets/icon/ellips.png" width="30" height="30"></a>
</li>
<li>
<a title="Freehand Polygon" id="FreehandPolygon"><img src="assets/icon/freepolygon.png" width="30" height="30"></a>
</li>
</ul>
</li>
<li>
<a title="Text" onClick="select_text()"> <img src="assets/icon/font.png" alt="Text" width="30" height="30"> </a>
</li>
</ul>
</li>
<li>
<a title="Radar"><img src="assets/icon/radar.png" width="30" height="30"></a>
</li>
<li>
<a title="Manuver"><img src="assets/icon/airplane.png" width="30" height="30"></a>
</li>
<!-- ASOPS -->
<?php } if ($list['asisten']==1 || $list['asisten']==6) {?>
<li>
<a title="Obstacle" onClick="select_obst()"><img src="assets/icon/obstacle.png" width="30" height="30"></a>
</li>
<li>
<a title="Strength" onClick="select_kekuatan()"><img src="assets/icon/streng.png" width="30" height="30"></a>
</li>
<li>
<a title="Unit" onClick="select_unit()"><img src="assets/icon/icons8-Org Unit-48.png" width="30" height="30"></a>
</li>
<li>
<a title="Situation" onClick="select_situasi()"><img src="assets/icon/warning.png" width="30" height="30"></a>
</li>
<?php if($list['asisten']==6 && $_SESSION['menu_'] == "menu"){ ?>
<script type="text/javascript">
document.getElementById("info3").style.display = "block";
</script>
<?php
}
}
} ?>
</ul>
</nav>
<div style="font-size: 13px; margin-left: -20px;" id="nm_scen">
<?php echo $_SESSION['scen1']; ?>
</div>
</div>