<html>
<head>
<title>CSS Menu</title>
<style >
#navigation li ul
{
list-style: none;
margin: 0;
padding: 0;
visibility:hidden;
position: absolute;
z-index: 99999;
visibility:hidden;
}
ul#navigation li:hover > ul
{
visibility:visible;
}
ul#navigation
{
float:left;
border-right:1px solid #c4dbe7;
}
ul#navigation li ul li a
{
width:100px;
height:10px;
font-size:8px;
border-right:1px solid #C2C2C2;
background-image: linear-gradient(bottom, rgb(32,217,217) 23%, rgb(59,255,245) 62%);
background-image: -o-linear-gradient(bottom, rgb(32,217,217) 23%, rgb(59,255,245) 62%);
background-image: -moz-linear-gradient(bottom, rgb(32,217,217) 23%, rgb(59,255,245) 62%);
background-image: -webkit-linear-gradient(bottom, rgb(32,217,217) 23%, rgb(59,255,245) 62%);
background-image: -ms-linear-gradient(bottom, rgb(32,217,217) 23%, rgb(59,255,245) 62%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.23, rgb(32,217,217)),
color-stop(0.62, rgb(59,255,245))
);
}
ul#navigation li a
{
padding:10px 25px;
color:#616161;
display:inline-block;
text-decoration:none;
border-right:1px solid #fff;
border-left:1px solid #C2C2C2;
border-top:1px solid #fff;
background-image: linear-gradient(bottom, rgb(32,217,217) 23%, rgb(59,255,245) 62%);
background-image: -o-linear-gradient(bottom, rgb(32,217,217) 23%, rgb(59,255,245) 62%);
background-image: -moz-linear-gradient(bottom, rgb(32,217,217) 23%, rgb(59,255,245) 62%);
background-image: -webkit-linear-gradient(bottom, rgb(32,217,217) 23%, rgb(59,255,245) 62%);
background-image: -ms-linear-gradient(bottom, rgb(32,217,217) 23%, rgb(59,255,245) 62%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.23, rgb(32,217,217)),
color-stop(0.62, rgb(59,255,245))
);
}
ul#navigation ul
{
top: 45px;
left: 1px;
width:100px;
}
ul#navigation li a:hover
{
background-image: linear-gradient(bottom, rgb(135,245,245) 23%, rgb(185,250,246) 62%);
background-image: -o-linear-gradient(bottom, rgb(135,245,245) 23%, rgb(185,250,246) 62%);
background-image: -moz-linear-gradient(bottom, rgb(135,245,245) 23%, rgb(185,250,246) 62%);
background-image: -webkit-linear-gradient(bottom, rgb(135,245,245) 23%, rgb(185,250,246) 62%);
background-image: -ms-linear-gradient(bottom, rgb(135,245,245) 23%, rgb(185,250,246) 62%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.23, rgb(135,245,245)),
color-stop(0.62, rgb(185,250,246))
);
color:#282828;
}
ul#navigation li
{
display:inline;
font-size:12px;
font-weight:bold;
margin:0;
padding:0;
float:left;
position:relative;
border-top:1px solid #c4dbe7;
border-bottom:2px solid #c4dbe7;
}
</style>
</head>
<body>
<ul id="navigation">
<li><a href="http://www.dotnetstadium.com">DotnetStadium</a></li>
<li><a href="#">Services</a>
<ul>
<li><a href="#">WebSite Development</a></li>
<li><a href="#">N/W Management</a></li>
<li><a href="#">Software Management</a></li>
<li><a href="#">Product Consultation</a></li>
</ul>
</li>
<li><a href="www.dotnetstadium.com">Downloads</a>
<ul>
<li><a href="#">softwares</a></li>
<li><a href="#">games</a></li>
<li><a href="#">themes</a></li>
</ul>
</li>
</ul>
</body>
</html>