CSS3 - Display div h3 elements horizontally on hover with absolute position - html

Question

I am trying to display h3 elements of parent div on hover horizontally,
as shown in screenshot below:
If I try position: absolute, all the h3 elements are collapsing, which results in another issue: I am not able to hover and get the list of h3, as they are collapsed.
codepen url :https://codepen.io/divyar34/pen/PpjrYO
HTML:
<ul>
<li>
aaa
<div>
<div>
<h3>111</h3>
<ul>
<li>zz1</li>
<li>zz2</li>
</ul>
</div>
<div>
<h3>1112</h3>
<ul>
<li>zz11</li>
<li>zz21</li>
</ul>
</div>
<div>
<h3>1113</h3>
<ul>
<li>zz1</li>
<li>zz2</li>
</ul>
</div>
</div>
</li>
<li>
bb
<div>
<div>
<h3>2220</h3>
<ul>
<li>yy</li>
<li>yyyy</li>
</ul>
</div>
<div>
<h3>2221</h3>
<ul>
<li>yy1</li>
<li>yyyy1</li>
</ul>
</div>
</div>
</li>
<li>
cc
<div>
<div>
<h3>3330</h3>
<ul>
<li>ccccc</li>
<li>dddd</li>
</ul>
</div>
<div>
<h3>3331</h3>
<ul>
<li>ccccc</li>
<li>dddd</li>
</ul>
</div>
<div>
<h3>3332</h3>
<ul>
<li>ccccc</li>
<li>dddd</li>
</ul>
</div>
<div>
<h3>3333</h3>
<ul>
<li>ccccc</li>
<li>dddd</li>
</ul>
</div>
</div>
</li>
</ul>
CSS:
a{
text-decoration:none;
padding: 5px;
border-radius: 10px;
color:white;
background:rgb(0,176,240);
border:none;
}
ul li{
list-style-type:none;
display:inline;
cursor:pointer;
float: left;
width: auto;
padding-left: 6px;
}
ul li:hover a{
background:orange;
}
ul li:hover ul{
width: 100%;
visibility: visible;
}
ul li ul{
display:block;
padding-left:5px;
padding-top:5px;
visibility: hidden;
position: absolute;
left: 0;
line-height: 40px;
}
div ul{
width:100%
}
ul li div{
visibility: hidden;
position:absolute;
}
ul li div div ul{
display:none;
}
ul li:hover div{
visibility: visible;
}
ul li div div{
display:block;
}
ul li ul li div div h3{
display:inline;
text-decoration:none;
padding: 5px;
border-radius: 10px;
color:white;
background:rgb(0,176,240);
border:none;
}

Answer 1

MAJOR EDITS: to accommodate the OP's added info on the issue
First of all, you are using a lot of nested div and ul, so you should consider using classes to avoid unnecessary confusion. Alternatively, If using classes affects some functionalities, then make use of CSS Selectors, instead.
Run the working snippet below, or
Use this JSFiddle if you want to play around, further.
/* New plus Modified CSS */
/*General CSS*/
li{
list-style-type:none;
display:inline;
cursor:pointer;
float: left;
width: auto;
padding-left: 6px;
}
li a{
text-decoration:none;
padding: 5px;
border-radius: 10px;
color:white;
background:rgb(0,176,240);
border:none;
}
li a + div div,
h3 + ul li {
border: solid 1px grey;
display: inline-block;
margin: 10px 2px;
padding: 0 10px;
}
li a + div,
h3 + ul {
padding-left:5px;
padding-top:5px;
position: absolute;
left: 0;
line-height: 40px;
visibility: hidden;
}
/*END General CSS*/
/*Hover CSS*/
li:hover a{
background:orange;
}
li:hover a + div,
li a + div div:hover h3 + ul {
visibility: visible;
}
/*END Hover CSS*/
/* END New plus Modified CSS */
<ul>
<li>
aaa
<div>
<div>
<h3>111</h3>
<ul>
<li>zz1</li>
<li>zz2</li>
</ul>
</div>
<div>
<h3>1112</h3>
<ul>
<li>zz11</li>
<li>zz21</li>
</ul>
</div>
<div>
<h3>1113</h3>
<ul>
<li>zz1</li>
<li>zz2</li>
</ul>
</div>
</div>
</li>
<li>
bb
<div>
<div>
<h3>2220</h3>
<ul>
<li>yy</li>
<li>yyyy</li>
</ul>
</div>
<div>
<h3>2221</h3>
<ul>
<li>yy1</li>
<li>yyyy1</li>
</ul>
</div>
</div>
</li>
<li>
cc
<div>
<div>
<h3>3330</h3>
<ul>
<li>ccccc</li>
<li>dddd</li>
</ul>
</div>
<div>
<h3>3331</h3>
<ul>
<li>ccccc</li>
<li>dddd</li>
</ul>
</div>
<div>
<h3>3332</h3>
<ul>
<li>ccccc</li>
<li>dddd</li>
</ul>
</div>
<div>
<h3>3333</h3>
<ul>
<li>ccccc</li>
<li>dddd</li>
</ul>
</div>
</div>
</li>
</ul>