10 Image Free Sexy CSS Menu and How to Create One

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 









very nice to use but it is not working in IE…..
Thanks for the menu.
Thanks for the menu. It’ll come quite handy for me for sure
Thank for the tutorial.
J-Cutie
Nathan´s last blog : WPB Magazine No.48 [2009]
Thank you for the great tip, i bookmark your site
Thank you for you post, it very instructive for me.
thank you for share
Hi! Your blog is simply super. you have create a differentiate. Thanks for the sharing this website. it is very useful professional knowledge. Great idea you know about company background. Increasing your web traffic and page views Add, add your website in http://www.directory.itsolusenz.com/
good thanks your link menu…..
It worked perfect for me dude. Thanks for this Cool guideline
Interesting. Will try it. Thanks for sharing.
@Josh: I will check it and get back to you.
IE8 doesn’t render rounded corners. I get a JS error:
Webpage error details
User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0; Trident/4.0; SLCC1; .NET CLR 2.0.50727; InfoPath.2; .NET CLR 3.5.21022; MS-RTC LM 8; .NET CLR 3.5.30729; .NET CLR 3.0.30618)
Timestamp: Tue, 26 May 2009 14:09:47 UTC
Message: Not implemented
Line: 135
Char: 21
Code: 0
URI: http://desizntech.info/demo/CSS_menu/jquery.corner.js
IE8 is not rendering the corners!
@Simon:Yah it is a nice tool. Thanks for recommend
Don’t forget about IzzyMenu – online menu builder, it’s great & free tool
Simon’s last blog post..10 Best CSS Practices to Improve Your Code
nice post
thank you! That looks like a great resource.
Great tut for CSS beginners. Thanks as always.
Montana’s last blog post..Variety leads to consumer happiness.
@Benjamin DeBell: Thanks for comment
Thanks for the post, these menus look really good and tutorials really make it easy to understand when it comes to creating my own.
Ugh i thought you said sexy…then I saw them. Its near impossible to have nice nav without any image whatsoever. Good attempt though.
Vinnie’s last blog post..Switching Companies over from Outlook to Google Apps
@David Hucklesby: Thanks for the suggestions. I guess if users download they should modify it like you said.
Nice. Couple of points though:
1. 18pt text displays at 30px on my IBM laptop
2. Some browsers increase line-height when text-size is increased, while others do not.
Suggestion: use font-size: 1.5em and line-height: 1.25 (no units).
Hope this helps.
A good place to start when you want something quick and dirty (if the client doesn’t think “OMG, this is great! KEEP IT!”.
Thank you.
@Damery: Please Check again. Added a mirror download link. Sorry about that
We are downloading an empty zip file…whats up?
useful resources of css menus, many thanks..
joyologo design shop 2.0’s last blog post..zip logo design fermuar
@Rahul: Just checked seem to be working. Click on Image Free CSS Menu . should work. Thanks
Yo mate, the download link doesn’t work. Plz check.
Rahul’s last blog post..Global fight against Polio
Very sexy CSS menu indeed. Downloading…
Rahul’s last blog post..Global fight against Polio