Popout Vertical Menu for WordPress website using HTML and CSS

I designed a popout vertical menu for wordpress for a previous employer but they never liked it or used it.  So here it is for everyone to use!  It only uses CSS and HTML so it can be used anywhere!

To see it in action, select all of the code, cut and paste it into notepad.  Save it as "vertmenu.html" then find the file that you just saved and double click on it.

Here is a picture of it in action:

 

<style type="text/css">
#navigation {width: 180px; font-size: 1em; Font-family: arial;}
#navigation ul { margin: 0px;  padding: 0px; }
ul.top-level { background: #CCf; }
#navigation li { list-style: none; }
  ul.top-level li {
    border-bottom: #fff solid;
    border-top: #fff solid;
    border-width: 1px; 
  }
#navigation a {
  color: #000;
  cursor: pointer;
  display:block;
  height:25px;
  line-height: 25px;
  text-indent: 10px;     
  text-decoration:none;
  width:100%; 
  }
#navigation a:hover{ text-decoration:underline; }
#navigation li:hover {background: #DDF; position:top;  }
  ul.sub-level { display:none; width:600px; height:220px; }
  li:hover .sub-level {
    background: #EEF;
    border: #fff solid;
    border-width: 1px;
    display: block;
    position: absolute;
    left: 180px;
    top: 5px;   }
  ul.sub-level li {
    border: none;
    float:left;
    width:180px;
    }
  
#navigation .sub-level { background: #EEF; }
 /*IE RESET HELPER*/
 li:hover .sub-level .sub-level { display:none; }
 .sub-level li:hover .sub-level { display:block; }     

 
</style>

<div id="navigation">
<ul class="top-level">
<li>
<a href="http://www.gentech.com/about-gentech/" title="About us">About us</a>
<ul class="sub-level">
<li>
<a href="http://www.gentech.com/gentech-contact-information/" title="How to Contact GenTech ">Contact us</a>
</li>
<li>
<a href="http://www.gentech.com/gentech-catalog/" title="GenTech  Catalog">Our Catalog</a>
</li>
<li>
<a href="http://www.gentech.com/gentech-employment/" title="GenTech Employment"> Employment Openings</a>
</li>
<li>
<a href="http://www.gentech.com/gentech-financing/" title="GenTech Financing">Our Financing</a>
</li>
<li>
<a href="http://www.gentech.com/guide-to-mass-specs/" title="Compare Mass Spectrometer 
Features">Guide to MS</a>
</li>
<li>
<a href="http://www.gentech.com/gentech-history/" title="GenTech History">Our History</a>
</li>
<li class="cat-item cat-item-14">
<a href="http://www.gentech.com/gentech-terms/" title="GenTech Term and Conditions">Our Terms</a>
</li>
<li>
<a href="http://www.gentech.com/gentech-testimonials/" title="GenTech  

Testimonials">Customer Testimonials</a>
</li>
<li>
<a href="http://www.gentech.com/gentech-warranty/" title="GenTech  

Warranty">Our Warranty</a>
</li>
<li>
<a href="http://www.gentech.com/10-reasons-to-choose-gentech/" title="10 Reasons to Choose 
GenTech">Why Choose GenTech</a>
</li>
<li>
<a href="http://www.gentech.com/useful-links/" title="Useful Analytical Equipment 
Links">Useful Links</a>
</li>
</ul>
</li>
<li>
<a href="http://www.gentech.com/gc/" title="Used Gas Chromatography Equipment"> GC </a>
<ul class="sub-level">
 <li><a href="http://www.gentech.com/category/gc/agilenthp-gc/" title="Used Agilent/HP Gas 
Chromatography">Agilent/HP GC</a>
 </li>
 <li>
 <a href="http://www.gentech.com/category/gc/perkin-elmer-gc/" title="Used Perkin Elmer 
Gas Chromatography">Perkin Elmer GC</a>
 </li>
 <li><a href="http://www.gentech.com/category/gc/shimadzu-gc/" title="Used Shimadzu Gas 
Chromatography">Shimadzu GC</a>
 </li>
 <li><a href="http://www.gentech.com/category/gc/other-gc/" title="Other Gas 
Chromatography Instruments">Other GC</a>
 </li> 
 <li><a href="http://www.gentech.com/category/gc/gc-accessories/" title="Gas 
Chromatography Instrument Accessories">GC Accessories</a>
 </li>
 <li><a href="http://www.gentech.com/category/gc/gc-kits/" title="Gas Chromatography 
Installation Kits">GC Kits</a>
 </li>
 <li><a href="http://www.gentech.com/category/gc/gc-software/" title="Gas Chromatography 
Software">GC Software</a>
 </li>
</ul>
</li>
<li><a href="http://www.gentech.com/hplc/" title="Used HPLC Equipment">HPLC</a>
<ul class="sub-level">
 <li><a href="http://www.gentech.com/category/hplc/new-hplc-systems/" title="New HPLC 
Systems">New HPLC Systems</a>
 </li>
 <li><a href="http://www.gentech.com/category/hplc/agilenthp-hplc/" title="Used Agilent/HP 
HPLC Instruments">Agilent/HP HPLC</a>
 </li>
 <li><a href="http://www.gentech.com/category/hplc/perkin-elmer-hplc/" title="Used Perkin 
Elmer HPLC Instruments">Perkin Elmer HPLC</a>
 </li>
 <li><a href="http://www.gentech.com/category/hplc/shimadzu-hplc/" title="Used Shimadzu 

HPLC Instruments">Shimadzu HPLC</a>
 </li>
 <li><a href="http://www.gentech.com/category/hplc/waters-hplc/" title="Used Waters HPLC 
Instruments">Waters HPLC</a>
 </li>
 <li><a href="http://www.gentech.com/category/hplc/other-hplc/" title="Other HPLC 
Instruments">Other HPLC </a>
 </li>
 <li><a href="http://www.gentech.com/category/hplc/hplc-kits/" title="HPLC Instruments 
Installation Kits">HPLC Kits</a>
 </li>
 <li><a href="http://www.gentech.com/category/hplc/hplc-software/" title="HPLC Instrument 
Software">HPLC Software</a>
 </li>
</ul>
</li>
<li><a href="http://www.gentech.com/mass-spec/" title="Used Mass Spectrometer 
Equipment">Mass Spectrometer</a>
<ul class="sub-level">
 <li><a href="http://www.gentech.com/category/mass-spec/gcms-systems/" title="Used GC/MS 
Instruments">GC/MS Systems</a>
 </li>
 <li><a href="http://www.gentech.com/category/mass-spec/lcms-systems/" title="Used LC/MS 
Instruments">LC/MS Systems</a>
 </li>
 <li><a href="http://www.gentech.com/category/mass-spec/mass-spec-kits/" title="Mass Spec 
Instruments Installation Kits">Mass Spec Kits</a>
 </li>
 <li><a href="http://www.gentech.com/category/mass-spec/ms-accessories/" title="Mass Spec 
Instruments Accessories">MS Accessories</a>
 </li>
</ul>
</li>
<li><a href="http://www.gentech.com/aaicp/" title="Used AA/ICP Equipment">AA/ICP</a>
<ul class="sub-level">
 <li><a href="http://www.gentech.com/category/aa-icp/atomic-absorption/" title="Used AA 
Instruments">Atomic Absorption</a>
 </li>
 <li><a href="http://www.gentech.com/category/aa-icp/icp/" title="Used ICP 
Instruments">ICP Instruments</a>
 </li>
</ul>
</li>
<li><a href="http://www.gentech.com/miscellaneous/" title="Misc Analytical 
Instruments">Misc.</a>
<ul class="sub-level">
 <li><a href="http://www.gentech.com/category/misc/edwards-pumps/" title="New and Used 
Edwards Pumps">Edwards Pumps</a>
 </li>
 <li><a href="http://www.gentech.com/category/misc/other-instruments/" title="Other Used 
Instruments">Other Instruments</a>
 </li>
 <li><a href="http://www.gentech.com/category/misc/pfeiffer-pumps/" title="Used Pfeiffer 

Pumps">Pfeiffer Pumps</a>
 </li>
 <li><a href="http://www.gentech.com/category/misc/varian-pumps/" title="New Varian 
Pumps">Varian Pumps</a>
 </li>
</ul>
</li>
<li><a href="http://www.gentech.com/parts-department/" title="Analytical Instrument 
Parts">Parts Department</a>
<ul class="sub-level">
 <li><a href="http://www.gentech.com/category/parts-dept/finnigan-parts/" title="Thermo 
Finnigan Instrument Parts">Thermo Finnigan Parts</a>
 </li>
 <li><a href="http://www.gentech.com/category/parts-dept/hp-parts/" title="HP Instrument 
Parts">HP Instrument Parts</a>
 </li>
  <li> <a href="http://www.gentech.com/category/parts-dept/hp-parts/1100/" title="HP 1100 
HPLC Instrument Parts">&HP 1100 HPLC Parts</a> 
  </li>
  <li> <a href="http://www.gentech.com/category/parts-dept/hp-parts/5890/" title="HP 5890 
GC Instrument Parts">&HP 5890 GC Parts</a> 
  </li>
  <li> <a href="http://www.gentech.com/category/parts-dept/hp-parts/59715972/" title="HP 
5972 MS Instrument Parts">&HP 5970-72 MS Parts</a> 
  </li>
  <li> <a href="http://www.gentech.com/category/parts-dept/hp-parts/5973/" title="HP 5973 
MS Instrument Parts">&HP 5973 MS Parts</a> 
  </li>
  <li> <a href="http://www.gentech.com/category/parts-dept/hp-parts/6890/" title="HP 6890 
GC Instrument Parts">&HP 6890 GC Parts</a> 
  </li>
  <li> <a href="http://www.gentech.com/category/parts-dept/hp-parts/7673/" title="HP 7673 
Autosampler Parts">&HP 7673 AS Parts</a> 
  </li>
 <li><a href="http://www.gentech.com/category/parts-dept/other-parts/" title="Other 
Scientific Instrument Parts">Other Instrument </a>
 </li>
 <li><a href="http://www.gentech.com/category/parts-dept/perkin-elmer-parts/" 
title="Perkin Elmer Instrument Parts">Perkin Elmer </a>
 </li>
 <li><a href="http://www.gentech.com/category/parts-dept/pfeiffer-parts/" title="Pfeiffer 
Instrument Parts">Pfeiffer Parts</a>
 </li>
 <li><a href="http://www.gentech.com/category/parts-dept/tekmar-parts/" title="Tekmar 
Instrument Parts">Tekmar Instrument Parts</a>
 </li>
 <li><a href="http://www.gentech.com/category/parts-dept/varian-parts/" title="Varian 
Instrument Parts">Varian Instrument Parts</a>
 </li>
</ul>
</li>
<li><a href="http://www.gentech.com/services-overview/" title="Analytical Instrument 
Services">Services</a>
<ul class="sub-level">
 <li><a href="http://www.gentech.com/bench-repair/" title="Analytical Instrument 
Repair">Bench Repair</a>
 </li>
 <li><a href="http://www.gentech.com/installation/" title="Analytical Instrument 
Installation">Instrument Installation</a>
 </li>
 <li><a href="http://www.gentech.com/packing-instructions/" title="Instrument Packing 
Instructions">Packing Instructions</a>
 </li>
 <li><a href="http://www.gentech.com/request-service-form/" title="Request Instrument 
Service Form">Request Service Form</a>
 </li>
 <li><a href="http://www.gentech.com/service/" title="Instrument Service 
Information">Service Information</a>
 </li>
 <li><a href="http://www.gentech.com/shipping/" title="Analytical Instrument 
Shipping">Instrument Shipping</a>
 </li>
 <li><a href="http://www.gentech.com/circuit-board-repair" title="Analytical Circuit Board 
Repair">Circuit Board Repair</a>
 </li>
</ul>
</li>
</ul>
</div>