Двух уровневое меню

[Bizon4ik]

Добрый день.

Подскажите, пожалуйста, как можно сделать двух уровневое меню при помощи nav?

[ils]

<nav>
   <ul>
      ...
      двухуровневое меню
      ...
   </ul>
</nav>

[pismenny]

<ul id="nav">
   <li><a href="#">Graphic</a></li>
   <li><a href="#">Soft</a>
      <ul>
         <li><a href="#">HTML</a></li>
         <li><a href="#">CSS</a>
            <ul>
               <li><a href="#">Tutorial</a></li>
               <li><a href="#">Snippets</a></li>
               <li><a href="#">Review</a></li>
            </ul>
         </li>
         <li><a href="#">Design</a></li>
      </ul>
   </li>
   <li><a href="#">About</a></li>
   <li><a href="#">Contact</a></li>
   <li><a href="#">Read more</a></li>
</ul>

#nav, #nav ul {
   list-style:none;
   margin:0;
   padding:0;
   background-color: #444444;
   font:12px/28px Verdana, Arial, Helvetica, sans-serif;
   }

#nav {
height:28px;
width:660px;
border:1px solid #000;
   }

   #nav li {
   float:left;
   position:relative;
   }

      #nav li:hover, #nav li.jshover {
      background-color: #333;
      }

#nav a {
   display:block;
   width:80px;
   color:#fff;
   padding:0 20px;
   text-align:center;
   text-decoration:none;
   border-right:1px solid #000;
   }

   #nav a:hover {
      background-color:#ccc;
      color:#000;
      }

#nav ul {
   border:1px solid #000;
   border-top:0;
   border-bottom:0;
   visibility:hidden;
   width:118px;
   position:absolute;
   top:28px;
   left:0;
   }

   #nav ul a {
      border:0;
      border-bottom:1px solid #000;
      width:78px;
      }

#nav li:hover ul, #nav li.jshover ul {visibility:visible;}

   #nav li:hover li ul, #nav li.jshover li ul {
      border-top:1px solid #000;
      top:-1px;
      left:118px;
      visibility:hidden;
      }

#nav li:hover li:hover ul, #nav li.jshover li.jshover ul {
   visibility:visible;
   }

Посмотрите этот код, <nav> добавить будет несложно.