Add second level to existing nav bar Dropdown menu - html

Question

I have a nice drop down menu in a nav bar. I want to add a second level to it so the second-level menu options pop out to the right from the current drop down options. I found the code for this online a long time ago, forget where.. I don't have enough CSS experience to work it out.
The HTML code - only showing one menu for brevity:
<table border=0 align=center width=900>
<tr>
<td>
<header class="site-header-wrap">
</header>
<div class="menu-wrap">
<nav class="menu">
<ul class="clearfix menu">
<!-- NETWORK -->
<li>NETWORK<span class="arrow">▼</span>
<ul class="sub-menu">
<li>BY CLIENT</li>
<li>BY FIREWALL</li>
<li>BY SWITCH</li>
<li>BY ROUTER</li>
<li>ROUTER INTERFACES</li>
</ul>
</li>
</ul>
</nav>
</div>
</td>
</tr>
</table>
the CSS code:
.clearfix:after {
display:block;
clear:both;
content:'';
}
a, a:visited, a:active
{
font-family: arial, verdana;
color: #003333;
font-size: 11px;
text-decoration: underline;
}
a:hover
{
#color: #666666;
color: #534F85;
text-decoration: underline;
}
/*This is for the color of nav panel */
/*----- Menu Outline -----*/
.menu-wrap {
width:100%;
box-shadow:1px 1px 3px rgba(0,0,0,0.2);
background:#282467;
background-image: linear-gradient(to right, rgba(0, 0, 0, 0), #7E2F86, #282467, #B2377E, #282467, #282467, #B2377E, #282467, #7E2F86, rgba(0, 0, 0, 0));
}
.menu {
width:900px;
margin:0px auto;
}
.menu li {
margin:0px;
list-style:none;
/*----- font-family:'Ek Mukta'; -----*/
}
.menu a {
transition:all linear 0.15s;
color:#ffffff;
text-decoration:none;
font-weight:bold;
}
/*This is for the hover text color in the nav panel */
.menu li:hover > a, .menu .current-item > a {
text-decoration:none;
color:#A9A7C2;
font-weight:bold;
}
.menu .arrow {
font-size:11px;
line-height:0%;
}
/*----- Top Level -----*/
.menu > ul > li {
float:left;
display:inline-block;
position:relative;
font-size:12px;
text-decoration:none;
font-family:trebuchet ms,arial,helvetica,sans-serif;
font-weight:bold;
white-space: nowrap;
}
.menu > ul > li > a {
padding:20px 11px;
display:inline-block;
text-shadow:0px 1px 0px rgba(0,0,0,0.4);
}
.menu > ul > li:hover > a, .menu > ul > .current-item > a {
background:#3D3976;
}
/*----- Bottom Level -----*/
.menu li:hover .sub-menu {
z-index:1;
opacity:1;
}
.sub-menu {
width:190%;
padding:2px 6px;
position:absolute;
top:100%;
left:0px;
z-index:-1;
opacity:0;
transition:opacity linear 0.15s;
box-shadow:0px 2px 3px rgba(0,0,0,0.2);
background:#534F85;
}
.sub-menu li {
display:block;
font-size:14px;
}
.sub-menu li a {
padding:3px 15px;
display:block;
}
.sub-menu li a:hover, .sub-menu .current-item a {
background:#282467;
}
So for instance, I want to add 2 submenus under the FIREWALL option for types of firewalls, cisco and paloalto. I tried this:
<li>BY FIREWALL
<ul>
<li>CISCO</li>
<li>PALOALTO</li>
<ul>
<li>
of course it doesn't work. Do I need another class, say something like second-level-menu ? and if so, what does that look like?

Answer 1

For Example:
In CSS:
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: ''; }
In Html:
<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>