Menu CSS – Odd behavior

How can I implement This menu with a CSS menu? It seems that if I copy parts of the code from it, it applies it to the UL items instead of how it should work.

This is my current CSS:

`#nav { height:35px; float:left; }
#nav li { display:block; float:left; margin-right:30px; position:relative; padding-top:13px; height:35px; }
#nav li a { font-size:14px; color:#FFF; font-weight:bold }
#nav li ul { left:-20000px; position:absolute; z-index:1; top:45px; width:200px; }
#nav li ul li { float:none; background-color:#fff; height:30px; margin:0; padding:9px 0 0 10px; }
#nav li:hover ul { left:0; }
#nav li ul li ul { top:-20000px; }
#nav li ul li:hover ul { left:140px; top:0; }
#nav li ul li ul li ul { top:-20000px; }
#nav li ul li ul li:hover ul { left:140px; top:0; }