<nav> innerhalb von <nav> oder doch lieber ul li ul li?

[Jochen]

Guten Morgen,

ich wollte die unten gezeigte Navigation nachbauen. Meine Idee war erst folgende:

<nav>
  <ul>
   <li>Shop</li>
   <li>Staubsauger</li>
   <li>Ventilatoren &amp; Heizlüfter
	<ul>
	  <li>Ventilatoren &amp; Heizlüfter</li>
	  <li>Ventilatoren</li>
	  <li>Heizlüfter</li>
	  <li>Luftbefeuchter</li>
	  <li>Garantieregistrierung</li>
	</ul>
   </li>
   <li>Händetrockner</li>
   <li>Leuchten</li>
   <li>Mein Konto</li>
  </ul>
</nav>

Auf dem Bild unten stehe ich, dass es ein <nav> innerhalb von <nav> gibt, was ist nun richtig um so eine Klappnavigation zu erreichen? Mir kommt es hier auf den Pfeil nach oben an, den würde ich sehr gerne integrieren.

Mein CSS dazu würde ich so aufbauen

nav {
    width: 100%;
}

nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

nav ul li {
    width: 13em;
    display: inline-block;
}

nav ul li:last-child {
    width: 9em;
}

nav ul ul {
    display: none;
}

nav ul li:hover ul {
    display: block;
    left: 27em;
    position: absolute;
    width: 13em;
}