How to make a blur navigation menu

{ Published by Anirudh - On Wednesday, July 06, 2011 - 0 }


How to make a blur navigation menu







horizontal navigation menu with blur effect








BASIC HTML



<html>
<head>
<title>thewwwdesigners</title>
<style>
.menu{


background:#111;
margin-left:75px;
margin-top:75px;
margin-right:0;
}
.menu-in{
float:left;


}
li{
float:left;
list-style-type:none;
dispaly:inline;
}


.menu .already,.menu .already:hover{
background:#999999;color:#FFFFFF;
}


a:link{
text-decoration:none;
position:inherit;
background:#333333;
color:transparent;
text-shadow:0 0 2px #999999;
padding-right:60px;
padding-left:60px;
font-size:22pt;
font-family:"Times New Roman", Times, serif;
margin-right:1px;
margin-left:1px;
}
a:visited{
color:#FFFFFF;
}
a:hover{
background:#000000;
color:#FFFFFF;
}
a:active{color:#666666;}
.aligned{
margin-left:93px;
margin-right:109px;
height:500pt;
border-bottom:30px inset #333333 ;
border-left:30px outset transparent;
border-right:30px solid transparent;


}
hr{
width:90%;
height:2px;
align:auto;
margin-letf:93px;


}
</style>


</head>


<bodybgcolor="#000000" width=100% >
<div class="menu">
<ul class="menu-in">
<li><a class="already" href="#">Home</a></li>
<li ><a href="#">Links</a></li>
<li><a href="#">Recent Posts</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Tips</a></li>
</ul>
</div>
<hr>
<div class="aligned"></div>
</body>
</html>