It has been while since we did any CSS menu post here. Who said you can’t make sexy, cool looking menu with CSS ? Today we bring you 10 Free sexy CSS menu and tutorial on how to create one. As usual they are free for personal use. Most the of menus are created using using  CSS and CSS3 propety-webkit-border-radius and -moz-border-radius. Obviously Internet Explorer does not support those properties. Too bad. However, for the sake of it one of the menus is using jQuery rounded corner plugin. So, it is rounded crossbrowser.

Menus are test in Latest version of Firefox, Safari and IE7.

Please report any bugs or improvement.

P.S. : Do not complain if the menus do not work in IE6. Not intended for it.

View Demo

Download Sexy CSS Menu | Mirror

How to create a Sexy CSS Menu?

First you have your basic HTML Mark Up. You can wrap it around with a menu wrapper if you like.

<ul id="nav_rounded_white">
<li><a href="#">Home</a></li>
<li><a href="#">Bio</a></li>
<li><a href="#">About</a></li>
<li><a href="#"> Contact </a></li>
</ul>

We get a simple menu list.

Now we need to add the magical CSS. This creates a horizontal menu.

#nav_rounded_white {
background:#fff;
padding:10px 0px 0px 20px;
height:40px;
width:auto;
list-style: none;
text-transform: lowercase;
font-family: arial, "lucida console", sans-serif;   }

#nav_rounded_white ul {
margin: 0;
padding: 0;   }

#nav_rounded_white li {
float: left;
margin: 0;
padding:0px 10px 0px 0px;   }  

Now we get a horizontal menu. Now we need to add some flavor to it. Change the color as you like.

#nav_rounded_white a {
display:block;
line-height: 30px;
margin: 0;
padding: 0 20px 0 15px;
font-size: 18pt;
color:#fff;
letter-spacing:-1px;
text-decoration: none;
-moz-border-radius:10px;
-webkit-border-radius:10px;
background:#ccccbb;

}

#nav_rounded_white a:hover {
text-decoration:none;
background:#004455;
}

And Volia! We have sexy CSS Menu