ul#nav {
  margin: 0;
  padding: 0;
  list-style: none;
  width: 100px; /* Width of Menu Items */
  border-bottom: 1px solid #ccc;


  }

ul#nav li {
  position: relative;
  }

li ul {
  position: absolute;
  left: 70px; /* Set 1px less than menu width */
  top: 0;
  border-left: 0;
  display: none;
}

/* Styles for Menu Items */
ul#nav li a {
  display: block;
  text-decoration: none;
  color: #ffffff;  /* Color of text */
  background: #334d80; /* IE6 Bug */ /* Sets color of button */
  padding: 5px;
  border: 1px solid #ccc;
  border-bottom: 0;
  margin-left: -5px;
  width:100px;   /* Controls the width of the button */
}

/* Fix IE. Hide from IE Mac \*/
/* html ul li { float: left; height: 1%; }  */
/* html ul li a { height: 1%; }*/
/* End */

ul#nav li a:hover {
  color: #ff0000; 
  background: #f9f9f9; 
  width:100px;
} /* Hover Styles */
    
li#nav ul li a { padding: 2px 5px; } /* Sub Menu Styles */
    
li:hover  ul,  li.hover ul { display: block;
color: #33ff99;} /* The magic */