Menu #first-try

by sapioit

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<style>

.a2{
	list-style: none;
	padding: 0;
	margin: 0;
	text-align:center;
	vertical-align:middle;
}
.a2 li{ 
	font-size: 16px;
	list-style: none;
	display: inline-block;
	padding: 0 15px;
	background:#9FC;
}
.a2 li:first-child{
	-webkit-border-top-left-radius: 5px;
	-moz-border-radius-topleft: 5px;
	border-top-left-radius: 5px;
	-webkit-border-bottom-left-radius: 5px;
	-moz-border-radius-bottomleft: 5px;
	border-bottom-left-radius: 5px;
}
.a2 li:last-child{
	-webkit-border-top-right-radius: 5px;
	-moz-border-radius-topright: 5px;
	border-top-right-radius: 5px;
	-webkit-border-bottom-right-radius: 5px;
	-moz-border-radius-bottomright: 5px;
	border-bottom-right-radius: 5px;
}
.a2 li a{
	text-decoration:none;
	line-height:30px;
	color:#999;
}
.a2 li ul{
    position:relative;
    z-index:2000;
	display:none;
}
.a2 li ul:hover{
    dislay: ;
}
.a2 li a:hover{
	color:#fff;
}
.a2 li:hover{
	background:#7da;
}
</style>
<body>
<ul class="a2">
        <li><a href="#">Home</a></li><li><a href="#">My Sites</a>
            <ul>
                <li><a href="http://sapioit.com/">SapioiT</a></li>
                <li><a href="http://sapiomind.com/">SapioMind</a></li>
            </ul>
        </li><li><a href="#">Portfolio</a>
            <ul>
                <li><a href="http://gome.tk/">GoMe</a></li>
            </ul>
        </li><li><a href="#">Contact us</a></li>
    </ul>
</body>
</html>