menu mockup

The key is to put the the submenu inside a list element (or something standing in as one). the CSS is the part that tells how it works

by Matt Rummler

HTML

<p>Here's a list</p>
      <div id="menu1">
        <ul>
        <!-- use the li not the div but was interesting to test with the div and find out that it does work
        <li>
        -->
        <li class="dropdown">
           <a href="#" class="hide">[hide]</a>
           <ol id="list" class="closed">
              <li>item 1</li>
              <li>item 2</li>
              <li>item 3</li>
           </ol>
        <!--
         </li>
        -->
        </li>
        </ul>
      </div>
   <p>...</p>

CSS

.closed{visibility: hidden;}
      #menu1>ul>.dropdown:hover ol{visibility: visible; }
      .dropdown{transition: 3s;}
/*      @media print { .hide, .show { display: none; } }
*/