This pure CSS menu with infinite sub menus technique makes use of CSS2 selectors so it will not work in IE6 and below without help from JavaScript. With that said, this pure CSS menu with infinite sub menus technique will work in:

This pure CSS menu with infinite sub menus technique  only uses 10 CSS rules making it EXTREMELY light weight. This technique also overcomes some funky IE bugs such as Ghost Hovers and Z-Indexing issues via pure CSS.

The CSS

#nav, .nav, #nav .nav li { margin:0px; padding:0px; }
#nav li {float:left; display:inline; cursor:pointer; list-style:none; padding:0px 10px 0px 10px; border:1px #000 solid; position:relative;}
#nav li ul.first {left:-1px; top:100%;}

li, li a {color:#000; text-decoration:none;}
#nav .nav li { width:100%; text-indent:10px; line-height:30px; margin-right:10px; border-top:1px #000 solid; border-bottom:1px #000 solid; 
border-left:none; border-right:none; background:#fff;}
#nav li a {display:block; width:inherit; height:inherit;}

ul.nav { display:none; }
#nav li:hover > a, #nav li:hover { color:#fff; background:#000; }
li:hover > .nav { display:block; position:absolute; width:200px; top:-2px; left:50%; z-index:1000; border:1px #000 solid; } 
li:hover { position:relative; z-index:2000; }

The HTML

<ul id="nav">
    <li>Menu 1
        <ul class="nav first">
            <li>Menu 1</li>
            <li>Menu 2</li>
            <li>Menu 3</li>
            <li>Menu 4
	        <ul class="nav">
	            <li>Menu 1</li>
	            <li>Menu 2</li>
	            <li>Menu 3</li>
	            <li>Menu 4</li>
	        </ul>			
	    </li>
        </ul>
    </li>
    <li>Menu 2</li>
    <li>Menu 3</li>
    <li>Menu 4</li>
</ul>