Három szintes, horizontális CSS-menü lépésenként

Kiinduló megjelenés (...itt látható a lépések eredménye...) A végeredmény és működés.

Minden lépés után érdemes figyelni, kipróbálni a középső blokkot!
(Tesztelve 2013.08.03-án Firefox, Opera, Chrome és IE-8 alatt)

Formáz:                 

Aktívál:           

Elrejt:   



<!-- HTML kód -->
<div id="menu_outer_h">
 <ul class="menu">
  <li class="sub"><a href="#">Menü 1</a>
   <ul>
    <li class="sub-nota"><a href="#">Almenü 11</a>
     <ul>
      <li><a href="#">Almenü 111</a></li>
      <li><a href="#">Almenü 112</a></li>
     </ul>
    </li>
    <li class="sub-nota"><a href="#">Linkdoboz 12</a>
     <ul>
      <li class="linkdoboz">
       <a href="#">Link1</a><a href="#">Link2</a><a href="#">Link3</a><a href="#">Link4</a><a href="#">Link5</a>
       <a href="#">Link6</a><a href="#">Link7</a><a href="#">Link8</a><a href="#">Link9</a><a href="#">Link10</a>
       <a href="#">Link11</a><a href="#">Link12</a><a href="#">Link13</a><a href="#">Link14</a><a href="#">Link15</a>
       <a href="#">Link16</a><a href="#">Link17</a><a href="#">Link18</a><a href="#">Link19</a>
      </li>
     </ul>
    </li>
   </ul>
  </li>
  <li><a href="#" class="ketsor">Menü 2, kétsoros szöveg</a></li>
  <li class="sub"><a href="#">Menü 3</a>
   <ul>
    <li class="sub-nota"><a href="#">Linkdoboz 31</a>
     <ul>
      <li class="linkdoboz_l">
       <a href="#">Link1</a><a href="#">Link2</a><a href="#">Link3</a><a href="#">Link4</a><a href="#">Link5</a>
       <a href="#">Link6</a><a href="#">Link7</a><a href="#">Link8</a><a href="#">Link9</a><a href="#">Link10</a>
       <a href="#">Link11</a><a href="#">Link12</a><a href="#">Link13</a><a href="#">Link14</a><a href="#">Link15</a>
       <a href="#">Link16</a><a href="#">Link17</a><a href="#">Link18</a><a href="#">Link19</a>
      </li>
     </ul>
    </li>
    <li class="sub-nota"><a href="#">Almenü 32</a>
     <ul>
      <li><a href="#">Almenü 321</a></li>
      <li><a href="#" class="ketsor">Almenü 322, amely kétsoros</a></li>
     </ul>
    </li>
   </ul>
  </li>
 </ul>
</div>
<!-- CSS kód -->
#menu_outer_vl{width:114px;position:relative;margin:10px 0 0 0;z-index:500;padding:0;float:left;height:140px;padding-bottom:3px;}
/* LÉPÉSEK KÓDJAI */

(Vissza a prog.hu tesztekre.)