Многоуровневое меню по данному css коду

[Vladimirko]

Доброй ночи.
Подскажите пожалуйста, как реализовать многоуровневость/вложеность.
Есть код.

#nav {
   margin:0 5%;
   padding: 0;
   list-style: none;
   }
   
#nav ul {
   padding:0.1em 0 0 0;
   margin:0;
   list-style: none;
   background:transparent;
   }

#nav a {
   color:#c6c8c9;
   display: block;
    font-weight: bold;
   padding: 0.5em;
   }
   
#nav a:hover {
   background: #237ab2;
   color: #fff;
   display: block;
   text-decoration: none;
   padding: 0.5em;
}

#nav li {
   float: left;
   margin: 0;
   text-transform:uppercase;
   padding: 0 2em 0 0;
}
   
#nav li li {
   float: left;
   margin: 0;
   padding: 0;
   width: 14em;
   }
   
#nav li li a, #nav li li a:link, #nav li li a:visited {
   background: #165279;
   color: #c6c8c9;
   width: 14em;
   float: none;
   margin: 0;
   padding: 0.5em ;
   border-bottom: 1px solid #aaa;
   }
   
#nav li li a:hover, #nav li li a:active {
   background: #237ab2;
   color: #fff;
   }

#nav li ul {
   position: absolute;
   width: 10em;
   left: -999em;
   }

#nav li:hover ul {
   left: auto;
   display: block;
   }
   
#nav li:hover ul, #nav li.sfhover ul {
   left: auto;
   }

В данный момент создаю меню так:
<div>
<ul #id=nav>
<li>...
<li>...
</ul>
</div>

Получаю выпадающее меню:
Меню
-подменю

Нужно ж реализовать следующие уровни:
Меню
-подменю > подподменю

Т.е. чтобы "подподменю" располагалось горизонтально и на том же уровне, что и "подменю".