html - css のみを使用してドロップダウン ナビゲーションを作成する

Question

ulネストされたul要素を持つリストがあります。現在、それは 3 レベルの深さになります。（メインナビゲーション、子、孫）。ドロップダウンを機能させることができないようです。残念ながら、(ul) アイテムに ID を配置する機能がありません。私ができる最善のことは、IDを付けてラップすることですul。divどうすればこれを行うことができますか？これが私が作業していたコードです。CSS の見栄えが悪い場合や意味をなさない場合は申し訳ありません。私はこれで初心者です。

コード
http://jsfiddle.net/grem28/ZhNDZ/1/ (CSS の jsfiddle)

<div id="nav">
    <ul>
        <li id="but_products" ><a href="/products">Products</a>
            <ul>
                <li id="but_boilers" ><a href="/products/boilers">Boilers</a></li>
            </ul>
        </li>
        <li id="but_resources" ><a href="/resources">Resources</a>
            <ul>
                <li id="but_engineeringLibrary" ><a href="/resources/engineering_library">Engineering Library</a>
                    <ul>
                        <li id="but_detroit" ><a href="/resources/engineering_library/detroit_radiant_mea_numbers">Detroit Radiant MEA numbers</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li id="but_contactUs" ><a href="/contact_us">Contact Us</a></li>
    </ul>
</div>

ダミアン