Adding 2nd level Dropdown Navbar to 1 level - html

Question

<nav>
<ul>
<li>What is it?</li>
<li>
Inventory
<ul>
<li>
X-box 360
<ul>
<li>Building Blocks</li>
<li>Decorations</li>
<li>Redstone & Transportation</li>
<li>Materials</li>
<li>Food</li>
<li>Tools, Weapons & Armor</li>
<li>Brewing</li>
<li>Miscellaneous</li>
</ul>
</li>
<li>PC</li>
<ul>
<li>Building Blocks</li>
<li>Decoration Blocks</li>
<li>Redstone</li>
<li>Transportation</li>
<li>Miscellaneous</li>
<li>Foodstuff</li>
<li>Tools</li>
<li>Combat</li>
<li>Brewing</li>
<li>Materials</li>
</ul>
</li>
<li>Mobile</li>
<ul>
<li>Materials</li>
<li>Tools & Weapons</li>
<li>Decoration Blocks</li>
<li>Building Blocks</li>
</ul>
</li>
<li>PS4</li>
<ul>
<li>Building Blocks</li>
<li>Decorations</li>
<li>Redstone & Transportation</li>
<li>Materials</li>
<li>Food</li>
<li>Tools, Weapons & Armor</li>
<li>Brewing</li>
<li>Miscellaneous</li>
</ul>
</li>
</nav>
That's my code so far; it does a single level drop down but I tried to add a second level by doing the same thing I did to get the first drop down and it wont work. Its for a school project and I have researched how to add a second level but nothing I've tried has helped so far, so if you guys could give me any advice, or show me where I need to add thing to make it work I would love it. Thanks!

Answer 1

First you need fix your html code, there are several error in markup, can you check if this is the desired menu, notice in your code example that you are closing li element before open ul for each submenu, this is an error, ul need to be inside li and after ul you should close parent li.
a {
color: #FFF;
}
nav {
margin: 50px 0;
background-color: #E64A19;
}
nav ul {
padding: 0;
margin: 0;
list-style: none;
position: relative;
}
nav ul li {
display:inline-block;
background-color: #E64A19;
}
nav a {
display:block;
padding:0 10px;
color:#FFF;
font-size:20px;
line-height: 60px;
text-decoration:none;
}
nav a:hover {
background-color: #000000;
}
/* Hide Dropdowns by Default */
nav ul ul {
display: none;
position: absolute;
top: 60px; /* the height of the main nav */
}
/* Display Dropdowns on Hover */
nav ul li:hover > ul {
display:inherit;
}
/* Fisrt Tier Dropdown */
nav ul ul li {
width:170px;
float:none;
display:list-item;
position: relative;
}
/* Second, Third and more Tiers */
nav ul ul ul li {
position: relative;
top:-60px;
left:170px;
}
/* Change this in order to change the Dropdown symbol */
li > a:after { content: ' +'; }
li > a:only-child:after { content: ''; }
<nav>
<ul>
<li>What is it?</li>
<li>
Inventory
<ul>
<li>
X-box 360
<ul>
<li>Building Blocks</li>
<li>Decorations</li>
<li>Redstone & Transportation</li>
<li>Materials</li>
<li>Food</li>
<li>Tools, Weapons & Armor</li>
<li>Brewing</li>
<li>Miscellaneous</li>
</ul>
</li>
<li>
PC
<ul>
<li>Building Blocks</li>
<li>Decoration Blocks</li>
<li>Redstone</li>
<li>Transportation</li>
<li>Miscellaneous</li>
<li>Foodstuff</li>
<li>Tools</li>
<li>Combat</li>
<li>Brewing</li>
<li>Materials</li>
</ul>
</li>
<li>
Mobile
<ul>
<li>Materials</li>
<li>Tools &amp; Weapons</li>
<li>Decoration Blocks</li>
<li>Building Blocks</li>
</ul>
</li>
<li>
PS4
<ul>
<li>Building Blocks</li>
<li>Decorations</li>
<li>Redstone & Transportation</li>
<li>Materials</li>
<li>Food</li>
<li>Tools, Weapons & Armor</li>
<li>Brewing</li>
<li>Miscellaneous</li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
If you don't need two first items then you need extract from the first ul to individual ul.
You will need a portion of css code to format this menu.
can you view and example here https://codepen.io/andornagy/pen/xhiJH