Multi-tiered CSS and HTML Dropdown Menu
This is a multi-tiered dropdown menu using only CSS and HTML
by XstreamINsanity
HTML
<ul> <li> <a href="#">Home</a> </li> <li> <a href="#">Forums</a> <ul> <li> <a href="#">Baseball</a> <ul> <li> <a href="#">Trading</a> </li> <li> <a href="#">Personal Collections</a> </li> <li> <a href="#">Box Breaks</a> </li> </ul> </li> <li> <a href="#">Basketball</a> <ul> <li> <a href="#">Trading</a> </li> <li> <a href="#">Personal Collections</a> </li> <li> <a href="#">Box Breaks</a> </li> </ul> </li> <li> <a href="#">Football</a> <ul> <li> <a href="#">Trading</a> </li> <li> <a href="#">Personal Collections</a> </li> <li> <a href="#">Box Breaks</a> </li> </ul> </li> <li> <a href="#">Hockey</a> <ul> <li> <a href="#">Trading</a> </li> <li> <a href="#">Personal Collections</a> </li> <li> <a href="#">Box Breaks</a> </li> </ul> </li> </ul> </li> </ul>
CSS
ul { margin: 0; padding: 0; list-style: none; width: 100px; border-bottom: 1px solid #ccc; } a { color: #777; } a:hover { background-color: #fff; } ul li { position: relative; } li ul { display: inline; position: absolute; left: 99px; top: 0; display: none; } li ul li ul { width: 150px; } ul li a { display: block; text-decoration: none; background: #bad8f8; padding: 2px 0 2px 10px; border: 1px solid #ccc; border-bottom: 0; } li:hover > ul { display: block; }