hover menu

hover menu

by Steven Martin

HTML

<div class="dropdownwrap">
    <div class="nav">
        <ul class="dropdown">
            <li><a href="#">Sustainability</a></li>
            <li><a href="#">Urbanisation</a></li>
            <li><a href="#">Water</a></li>
            <li><a href="#">Water resources management</a></li>
        </ul>
    </div>
</div>

CSS

.nav ul.dropdown {padding:0; width:385px; background-color:#30332e}
.nav ul.dropdown li {display: block; width: 300px;}
.nav ul.dropdown li.odd {margin:0;}

.nav ul.dropdown li a {float:left; width:165px; padding:5px 0 5px 20px; border-bottom:1px #424540 solid; font-size:1.1em;  background:#30332e url('../img/arrow_dropdown.png') no-repeat scroll left top; color:#fff;}


.nav ul.dropdown li a:hover {background:#85c446 url('../img/arrow_dropdown.png') no-repeat scroll -260px top;}