Creating dropdown navigation using only css - html

Question

I have a ul list with nested ul elements. Currently it goes 3 levels deep. (main navigation, child, grandchild). I can't seem to get the dropdowns to work. Unforunately, I do not have the ability to place id's in the (ul) items. The best I could do i wrap the ul in a div with an ID on it. Any idea how I could do this? Here's the code I was working with, and I'm sorry if my css looks bad or makes no sense. I'm a novice at this.
Code
http://jsfiddle.net/grem28/ZhNDZ/1/ (jsfiddle for CSS)
<div id="nav">
<ul>
<li id="but_products" >Products
<ul>
<li id="but_boilers" >Boilers</li>
</ul>
</li>
<li id="but_resources" >Resources
<ul>
<li id="but_engineeringLibrary" >Engineering Library
<ul>
<li id="but_detroit" >Detroit Radiant MEA numbers</li>
</ul>
</li>
</ul>
</li>
<li id="but_contactUs" >Contact Us</li>
</ul>
</div>
damien

Answer 1

Here's an example of a functioning 3-tier CSS drop-down navigation system:
HTML
<nav>
<ul>
<li>
Menu One
<ul>
<li>
Menu One Item One
<ul>
<li>Menu One Item One Submenu Item One</li>
<li>Menu One Item One Submenu Item Two</li>
<li>Menu One Item One Submenu Item Three</li>
<li>Menu One Item One Submenu Item Four</li>
</ul>
</li>
<li>
Menu One Item Two
<ul>
<li>Menu One Item Two Submenu Item One</li>
<li>Menu One Item Two Submenu Item Two</li>
<li>Menu One Item Two Submenu Item Three</li>
<li>Menu One Item Two Submenu Item Four</li>
</ul>
</li>
<li>
Menu One Item Three
<ul>
<li>Menu One Item Three Submenu Item One</li>
<li>Menu One Item Three Submenu Item Two</li>
<li>Menu One Item Three Submenu Item Three</li>
<li>Menu One Item Three Submenu Item Four</li>
</ul>
</li>
<li>
Menu One Item Four
<ul>
<li>Menu One Item Four Submenu Item One</li>
<li>Menu One Item Four Submenu Item Two</li>
<li>Menu One Item Four Submenu Item Three</li>
<li>Menu One Item Four Submenu Item Four</li>
</ul>
</li>
</ul>
</li>
<li>
Menu Two
<ul>
<li>Menu Two Item One</li>
<li>Menu Two Item Two</li>
<li>Menu Two Item Three</li>
<li>Menu Two Item Four</li>
</ul>
</li>
</ul>
</nav>
CSS
body { font-family: Helvetica, Arial, Sans-serif; line-height: 1.5em; }
a:hover { color: #cc0000; }
/* Hide submenu */
nav ul > li > ul,
nav ul > li > ul > li > ul { display:none; }
/* Layout menubar and menus */
nav { background:#ddd; padding:0.25em 0.5em; }
nav > ul > li { cursor: pointer; display:inline-block; padding:0 1em; }
nav > ul > li > ul { background: #ddd; padding:0.5em; position: absolute; z-index: 1000; }
nav > ul > li > ul > li > ul { background: #ccc; padding:0.5em; position: absolute; left: 90%; top: 0; z-index: 1001; }
/* show submenu on hover */
nav ul > li:hover > ul,
nav ul > li > ul > li:hover > ul { display:block; width:10em; }
Fiddle: http://jsfiddle.net/kboucher/nrAPu/
Hope this helps.