CSS Dropdown menus

Nice simple horizontal and vertical menu

by secretgspot

HTML

<div id="content">
  <ul id="horizontal-navigation">
    <li class=""> <a href="#">Parent Item 1</a> </li>
    <li class=""> <a href="#">Parent Item 2</a>
      <ul>
        <li class=""> <a href="#">Child Item 1</a> </li>
        <li class=""> <a href="#">Child Item 2</a> </li>
        <li class=""> <a href="#">Child Item 3</a> </li>
      </ul>
    </li>
    
    <!-- Begin parent item -->
    <li class=""> <a href="#">Parent Item 3</a>
      
      <!-- Begin Child Items Group-->
      <ul>
      
        <!-- Begin Child Item-->
        <li class=""> <a href="#">Child Item 1</a> </li>
        <li class=""> <a href="#">Child Item 2</a> </li>
        
      </ul>
      <!-- End Child Items Group-->
      
    </li>
    <!-- End parent item -->
    
    <li class=""> <a href="#">Parent Item 4</a> </li>
  </ul>
  
  <ul id="vertical-navigation">
    <li class=""> <a href="#">Parent Item 1</a> </li>
    <li class=""> <a href="#">Parent Item 2</a>
      <ul>
        <li class=""> <a href="#">Child Item 1</a> </li>
        <li class=""> <a href="#">Child Item 2</a> </li>
        <li class=""> <a href="#">Child Item 3</a> </li>
      </ul>
    </li>
    
    <!-- Begin parent item -->
    <li class=""> <a href="#">Parent Item 3</a>
      
      <!-- Begin Child Items Group-->
      <ul>
      
        <!-- Begin Child Item-->
        <li class=""> <a href="#">Child Item 1</a> </li>
        <li class=""> <a href="#">Child Item 2</a> </li>
        
      </ul>
      <!-- End Child Items Group-->
      
    </li>
    <!-- End parent item -->
    
    <li class=""> <a href="#">Parent Item 4</a> </li>
  </ul>
</div>

CSS

body {
    font-family: "Century Gothic", Verdana, Arial, Sans-Serif;
    font-size: 62.5%;
    background: #eee;
    position: relative;
    height: 100%;
    margin: 0;
    padding: 0;
    behavior: url("csshover3.htc"); 
}

h2 {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-style: italic;
    font-size:36px;
    position: relative;
    margin: 0 auto;
    width: 950px;
    top: 20px;
}

#content {
    position: relative;
    margin: 0 auto;
    width: 950px;
    top: 80px;
    height: 520px;
}

/* Horizontal Navigation */
#horizontal-navigation {
    width: 400px;
    float: left;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 1.2em;
}


/* CSS for each Parent Item */
#horizontal-navigation li
{
    clear: both;
    height: 2em;
}

#horizontal-navigation li a
{
    float: left;
    display: block;
    padding: 4px;
    text-decoration: none;
    color: #666;
    text-transform: uppercase;
    margin-bottom: 5px;
    margin-right: 10px;
}

/* 
Change background color and font color 
of parent items when mouse hover 
*/
#horizontal-navigation li:hover a,
#horizontal-navigation li a:hover
{
    background: #999;
    color: #fff;    
}




/* 
Applie to group of Child Items
Each Child Item will be invisible by default
*/
#horizontal-navigation ul {display: none;}

/* Each Child Item will be visible if mouse hover */
#horizontal-navigation li:hover ul {display: block;}

#horizontal-navigation ul
{
    list-style: none;
    float: left;
    margin: 0;
    padding: 4px 8px;    
}

#horizontal-navigation ul li
{
    float: left;
    clear: none;
    margin: 0;
    padding: 0;
    width: auto;
    height: auto;
    color: #999;
}


/* 
Reset and re style 
link of each child item
*/
#horizontal-navigation li:hover ul li a,
#horizontal-navigation ul li a
{
    display: inline;
    padding: 0 6px 0 0;
    float: none;
    text-transform: lowercase;
    color: #999;
    background: none;
}

#horizontal-navigation li:hover ul li...