<style>

#menu {

width: 12em;

background: #eee;

}

  #menu ul {

list-style: none;

margin: 0;

padding: 0;

}

#menu a, #menu h2 {

font: bold 11px/16px arial, helvetica, sans-serif;

display: block;

border-width: 1px;

border-style: solid;

border-color: #ccc #888 #555 #bbb;

margin: 0;

padding: 2px 3px;

}

​

#menu h2 {

color: #fff;

background: #000;

text-transform: uppercase;

}

​

#menu a {

color: #000;

background: #efefef;

text-decoration: none;

}

​

#menu a:hover {

color: #a00;

background: #fff;

}

​

#menu ul ul ul {

position: absolute;

top: 0;

left: 0;

}

#menu li {position: relative ;}

​

#menu ul ul ul {

position: absolute;

top: 0;

    left: 100%; /* everything goes to opposite direction why?? :( */

width: 100%;

}

​

div#menu ul ul ul,

  div#menu ul ul li:hover ul ul 

{display: none;}

​

  div#menu ul ul li:hover ul,

  div#menu ul ul ul li:hover ul 

{display: block;}

  */

​

</style>

​

​

<div id="menu">

<ul>

  <li><h2>CSS Drop Down Menus</h2>

    <ul>

      <li><a href="http://www.seoconsultants.com/tips/css/#cssmenus" title="SEO Consultants Directory">CSS Hover Navigation</a>

        <ul>

          <li><a href="../css-dropdown-menus.html" title="tanfa Introduction">Intro for CSS Enthusiasts</a></li>

          <li><a href="index.html" title="Plain HTML Code">Demonstration HTML</a></li>

          <li><a href="http://www.xs4all.nl/~peterned/csshover.html" title="whatever:hover file">csshover.htc file</a></li>

        </ul>

      </li>

    </ul>

  </li>

</ul>

​

<ul>

  <li><h2>Vertical CSS Pop-Out Menu</h2>

    <ul>

      <li><a href="http://www.seoconsultants.com/css/menus/vertical/" title="SEO Consultants Vertical Example">SEO Consultants Sample</a></li>

      <li><a href="vs7.html" title="Complete Example">tanfa Demo example</a>

        <ul>

          <li><a href="index.html#">tanfa Tutorial</a><!-- link to seo vertical tut -->     

            <ul>

              <li><a href="vs1.html" title="Vertical Menu - Page 1">Stage 1</a></li>

              <li><a href="vs2.html" title="Vertical Menu - Page 2">Stage 2</a></li>            

              <li><a href="vs3.html" title="Vertical Menu - Page 3">Stage 3</a></li>

              <li><a href="vs4.html" title="Vertical Menu - Page 4">Stage 4</a></li>

              <li><a href="vs5.html" title="Vertical Menu - Page 5">Stage 5</a></li>            

              <li><a href="vs6.html" title="Vertical Menu - Page 6">Stage 6</a></li>

            </ul>

          </li>

        </ul>

      </li>

    </ul>

  </li>

</ul>

​

<ul>

  <li><h2>Horizontal Drop & Pop Menu</h2>

    <ul>

      <li><a href="http://www.seoconsultants.com/css/menus/horizontal/" title="SEO Consultants Directory Example">SEO Consultants Sample</a></li>

      <li><a href="hs7.html">tanfa Demo example</a><!-- fully working sample -->

        <ul>

          <li><a href="index.html#">tanfa Tutorial</a><!-- link to horizontal tut -->       

            <ul>

              <li><a href="hs1.html" title="Horizontal Menu - Page 1">Stage 1</a></li>

              <li><a href="hs2.html" title="Horizontal Menu - Page 2">Stage 2</a></li>          

              <li><a href="hs3.html" title="Horizontal Menu - Page 3">Stage 3</a></li>

              <li><a href="hs4.html" title="Horizontal Menu - Page 4">Stage 4</a></li>

              <li><a href="hs5.html" title="Horizontal Menu - Page 5">Stage 5</a></li>          

              <li><a href="hs6.html" title="Horizontal Menu - Page 6">Stage 6</a></li>

            </ul>

          </li>

        </ul>

      </li>

    </ul>

  </li>

</ul>                           

</div>

​