html - ul does not go back to vertical - html

Question

I have this simple menu with submenu.
<div id="menu_footer_bg">
<div id="menu_line"></div>
<ul id="menu_footer">
<li>About</li>
<li>Works
<ul>
<li>Electroacoustic</li>
<li>Instrumental</li>
</ul>
</li>
<li>Projects</li>
</ul>
</div>
and a simple css.
#menu_footer_bg {
position: fixed;
top: calc(100% - 50px);
height: 50px;
width: 100%;
opacity: 0.99;
background-color: rgb(20, 20, 20);
}
ul#menu_footer {
padding: 0;
margin-left: 18%;
margin-top: 1%;
}
ul#menu_footer li {
display: inline;
}
ul#menu_footer a {
color: white;
padding: 5px 20px;
text-decoration: none;
font-family: "Comic Sans MS", cursive, sans-serif;
border-radius: 4px 4px 4px 4px;
}
ul#menu_footer a:hover {
background-color: orange;
}
ul#menu_footer li ul {
clear:both;
position:absolute;
background-color: rgb(20, 20, 20);
display:none;
margin-bottom:-20px;
}
ul#menu_footer li:hover ul {
display:block;
bottom: 100%;
}
ul#menu_footer li ul li {
clear:both;
border-style:none;
padding: 20px;
}
I would like the menu to be horizontal and the submenu to be vertical.
Reading here and there I thought that this code was right - adding "display:inline" within the "li" tag of the menu.
But now, also the submenu is horizontal and I don't know how to rool back to vertical.

Answer 1

Read about > (Direct Child) css selector. Your styles for li are applying to all children but we need only for direct children of #menu_footer_bg
#menu_footer_bg {
position: fixed;
top: calc(100% - 50px);
height: 50px;
width: 100%;
opacity: 0.99;
left: 0;
background-color: rgb(20, 20, 20);
}
ul#menu_footer {
padding: 0;
margin-left: 18%;
margin-top: 1%;
}
ul#menu_footer > li {
display: inline-block;
vertical-align: top;
position: relative;
}
ul#menu_footer a {
display: block;
color: white;
padding: 5px 20px;
text-decoration: none;
font-family: "Comic Sans MS", cursive, sans-serif;
border-radius: 4px 4px 4px 4px;
}
ul#menu_footer a:hover {
background-color: orange;
}
ul#menu_footer li ul {
position:absolute;
background-color: rgb(20, 20, 20);
display:none;
left: 0;
bottom: 100%;
list-style: none;
padding: 0;
}
ul#menu_footer li:hover ul {
display: block;
}
<div id="menu_footer_bg">
<div id="menu_line"></div>
<ul id="menu_footer">
<li>About</li>
<li>Works
<ul>
<li>Electroacoustic</li>
<li>Instrumental</li>
</ul>
</li>
<li>Projects</li>
</ul>
</div>

Answer 2

Add this in your CSS
ul#menu_footer li ul li{
display: block;
}
Working Fiddle

Answer 3

Just add this to your code
ul#menu_footer li ul li {
clear:both;
border-style:none;
padding: 20px;
display:block;
}
https://jsfiddle.net/adit_999/6tuc1rqz/