Dropdown hover

by 3axap

HTML

<div class="menu">
    <ul>
        <li><div class="btn">HOVER</div>
            <ul>
                <li><a href="#">Menu Item</a></li>
                <li><a href="#">Menu Item</a></li>
            </ul>
        </li>
    </ul>
    
</div>

CSS

.btn{
    display: block;
	width: 68px;
	height: 22px;
	padding-top: 70px;
	font-weight: bold;
	float: left;
	padding-right:30px;
    text-align:center;
}

.btn{
	background: url("http://www.aidancotter.com/images/face.png") no-repeat -5px 0px;
}

.btn:hover{
    background-position: -5px -120px;
}

.menu ul li{
	list-style:none;
}

.menu
{
	display: inline;
	float: left;
	padding-right:30px;
    padding:20px 0 0 20px;
}

a {
    text-decoration:none;
    color:#000;
}

.menu ul li ul{
	display:none;
    background:#78a802;
    position:absolute;
    width:200px;
    color:#fff;
    margin-top:90px;
}

.menu ul li:hover ul{
    display:block;
	padding:15px;
	line-height:30px;

}

.menu ul li a:hover{
    color:#fff;
}
li:hover div{  background-position: -5px -120px; color:green}