CSS dropdown menu without JavaScript

If you are looking for CSS dropdown then this will be the best dropdown menu, where only the CCS styles are being used.

• Menu Item 1
  • Submenu 1
  • Submenu 2
  • Submenu 3
• Menu Item 2
  • Submenu 1
  • Submenu 2
  • Submenu 3
• Menu Item 3
• Menu Item 4
  • Submenu 1
  • Submenu 2
  • Submenu 3

CSS Code:

<style>

/* ONLY CSS dropdown menus. */
#nav {
   margin: 0;
   padding: 0;
   height: 1em; }
#nav li {
   list-style: none;
   float: left; }
#nav li a {
   display: block;
   padding: 3px 8px;
   background-color: #ff0000;
   color: #fff;
   text-decoration: none;
   border-left:#fff 1px solid;
   }
#nav li a:hover { background:#000}  
#nav li ul {
   display: none;
   width: 10em;
   background-color: #333;}
#nav li:hover ul, #nav li.hover ul {
   display: block;
   position: absolute;
   margin: 0;
   padding: 0; }
#nav li:hover li, #nav li.hover li {
   float: none; }
#nav li:hover li a, #nav li.hover li a {
   background-color: #ff0000;
   border-top: 1px solid #fff;
   color: #fff; }
#nav li li a:hover {
   background-color: #000; }
</style>

HTML Code:

<div id="wrap">
<h1>CSS Dropdown Menu</h1>
<ul id="nav">
<li><a href="#">Menu Item 1</a>
    <ul>
        <li><a href="#">Submenu 1</a></li>
        <li><a href="#">Submenu 2</a></li>
        <li><a href="#">Submenu 3</a></li>
    </ul>
</li>
<li><a href="#">Menu Item 2</a>
    <ul>
        <li><a href="#">Submenu 1</a></li>
        <li><a href="#">Submenu 2</a></li>
        <li><a href="#">Submenu 3</a></li>
    </ul>
</li>
<li><a href="#">Menu Item 3</a></li>
<li><a href="#">Menu Item 4</a>
    <ul>
        <li><a href="#">Submenu 1</a></li>
        <li><a href="#">Submenu 2</a></li>
        <li><a href="#">Submenu 3</a></li>
    </ul>
</li>
</ul>
</div>