CSS Drop Down Menu Tutorial Code

Start Page - Default Code - No CSS Applied

« return to :: vertical tutorial :: horizontal tutorial »

<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="http://www.tanfa.co.uk/css/examples/css-dropdown-menus.asp" title="tanfa Introduction">Intro for CSS Enthusiasts</a></li>
          <li><a href="http://www.tanfa.co.uk/css/examples/menu/" 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="http://www.tanfa.co.uk/css/examples/menu/vs7.asp" title="Complete Example">tanfa Demo example</a>
        <ul>
          <li><a href="#">tanfa Tutorial</a>		
            <ul>
              <li><a href="http://www.tanfa.co.uk/css/examples/menu/vs1.asp" title="Vertical Menu - Page 1">Stage 1</a></li>
              <li><a href="http://www.tanfa.co.uk/css/examples/menu/vs2.asp" title="Vertical Menu - Page 2">Stage 2</a></li>			
              <li><a href="http://www.tanfa.co.uk/css/examples/menu/vs3.asp" title="Vertical Menu - Page 3">Stage 3</a></li>
              <li><a href="http://www.tanfa.co.uk/css/examples/menu/vs4.asp" title="Vertical Menu - Page 4">Stage 4</a></li>
              <li><a href="http://www.tanfa.co.uk/css/examples/menu/vs5.asp" title="Vertical Menu - Page 5">Stage 5</a></li>			
              <li><a href="http://www.tanfa.co.uk/css/examples/menu/vs6.asp" 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="http://www.tanfa.co.uk/css/examples/menu/hs7.asp">tanfa Demo example</a>
        <ul>
          <li><a href="#">tanfa Tutorial</a>		
            <ul>
              <li><a href="http://www.tanfa.co.uk/css/examples/menu/hs1.asp" title="Horizontal Menu - Page 1">Stage 1</a></li>
              <li><a href="http://www.tanfa.co.uk/css/examples/menu/hs2.asp" title="Horizontal Menu - Page 2">Stage 2</a></li>			
              <li><a href="http://www.tanfa.co.uk/css/examples/menu/hs3.asp" title="Horizontal Menu - Page 3">Stage 3</a></li>
              <li><a href="http://www.tanfa.co.uk/css/examples/menu/hs4.asp" title="Horizontal Menu - Page 4">Stage 4</a></li>
              <li><a href="http://www.tanfa.co.uk/css/examples/menu/hs5.asp" title="Horizontal Menu - Page 5">Stage 5</a></li>			
              <li><a href="http://www.tanfa.co.uk/css/examples/menu/hs6.asp" title="Horizontal Menu - Page 6">Stage 6</a></li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>							
</div>