Pop Out CSS Menu | Design Shack

Pop Out CSS Menu : 11th July 2007

Example

This is a simple menu, coded semantically with XHTML and CSS. It uses a list to show the menu, and generates the layout of the links from the CSS file. You will need to download our style sheet, download the whatever:hover file from Peter Nederlof to get the menu working in Internet Explorer. You add the following HTML to your code, altering it to fit your needs:

HTML Code

<div id="menu">
<ul>
  <li><h2>Navigation Menu</h2>
    <ul>
      <li><a href="" title="">Option 1</a>
        <ul>
          <li><a href="" title="">Sub Option 1</a></li>
          <li><a href="" title="">Sub Option 2</a></li>
          <li><a href="" title="">Sub Option 3</a></li>
        </ul>
      </li>
    </ul>
    <ul>
      <li><a href="" title="">Option 2</a>
        <ul>
          <li><a href="" title="">Sub Option 1</a></li>
          <li><a href="" title="">Sub Option 2</a></li>
          <li><a href="" title="">Sub Option 3</a></li>
        </ul>
      </li>
    </ul>
    <ul>
      <li><a href="" title="">Option 3</a>
        <ul>
          <li><a href="" title="">Sub Option 1</a></li>
          <li><a href="" title="">Sub Option 2</a></li>
          <li><a href="" title="">Sub Option 3</a></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>				
</div>

CSS Code

You can download a copy of the CSS code for this example, then copy and paste it into the <head></head> section of your page. Combine that with the whatever:hover file from above in the same directory, and the detailed HTML code – you’ll have a beautiful popup menu in no time!