Cómo crear un menú multi-nivel con HTML y CSS

<style>
#menucompleto
{
  margin-top:15px;
}

#menucompleto ul
{
  list-style:none;
  position:relative;
  float:left;
  margin:0;
  padding:0;
}

#menucompleto ul a
{
  display:block;
  color:#333;
  text-decoration:none;
  font-weight:700;
  font-size:12px;
  line-height:32px;
  padding:0 15px;
  font-family:"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif;
}

#menucompleto ul li
{
  position:relative;
  float:left;
  margin:0;
  padding:0;
}

#menucompleto ul li.menuprincipal
{
  background:#ddd;
}

#menucompleto ul li:hover
{
  background:#f6f6f6;
}

#menucompleto ul ul
{
  display:none;
  position:absolute;
  top:100%;
  left:0;
  background:#fff;
  padding:0;
}

#menucompleto ul ul li
{
  float:none;
  width:200px;
}

#menucompleto ul ul a
{
  line-height:120%;
  padding:10px 15px;
}

#menucompleto ul ul ul
{
  top:0;
  left:100%;
}

#menucompleto ul li:hover > ul
{
  display:block;
}
</style>

<nav id="menucompleto">
<ul>
  <li class="menuprincipal"><a href="#">IncioMenu</a></li>
  <li><a href="#">Categoria 1</a>
    <ul>
      <li><a href="#">Sub Categoria 1</a></li>
      <li><a href="#">Sub Categoria 2</a></li>
      <li><a href="#">Sub Categoria 3</a></li>
      <li><a href="#">Sub Categoria 4</a>
        <ul>
          <li><a href="#">Sub Categoria 1</a>
            <ul>
              <li><a href="#">Sub Sub 1</a></li>
              <li><a href="#">Sub Sub 2</a></li>
              <li><a href="#">Sub Sub 3</a></li>
                <li><a href="#">Sub Sub 4</a></li>
            </ul>
          </li>
          <li><a href="#">Sub Categoria 2</a></li>
        </ul>
      </li>
      <li><a href="#">Sub Categoria 5</a></li>
    </ul>
  </li>
  <li><a href="#">Categoria 2</a>
    <ul>
      <li><a href="#">Sub Categoria 1</a></li>
      <li><a href="#">Sub Categoria 2</a></li>
      <li><a href="#">Sub Categoria 3</a></li>
    </ul>
  </li>
  <li><a href="#">Categoria 3</a>
    <ul>
      <li class="dir"><a href="#">Sub Categoria 1</a></li>
      <li class="dir"><a href="#">Sub Categoria 2</a>
        <ul>
          <li><a href="#">Categoria 1</a></li>
          <li><a href="#">Categoria 2</a></li>
          <li><a href="#">Categoria 3</a></li>
          <li><a href="#">Categoria 4</a></li>
          <li><a href="#">Categoria 5</a></li>
        </ul>
      </li>
      <li><a href="#">Sub Categoria 3</a></li>
      <li><a href="#">Sub Categoria 4</a></li>
      <li><a href="#">Sub Categoria 5</a></li>
    </ul>
  </li>
  <li><a href="#">Categoria 4</a></li>
  <li><a href="#">Categoria 5</a></li>
  <li><a href="#">Categoria 6</a></li>
  <li><a href="#">Categoria 7</a></li>
</ul>
</nav>

 <div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Categorias
  <span class="caret"></span></button>
  <ul class="dropdown-menu">
    <li><a href="#">HTML</a></li>
    <li><a href="#">CSS</a></li>
    <li><a href="#">JavaScript</a></li>
  </ul>
</div>