10 Image Free Sexy CSS Menu and How to Create One

Categories: CSS, Freebies, Tutorial | May 21, 2009

css_menu_post
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.
list1
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. 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 white_menu

If you enjoyed this post, get free updates by email or RSS.

Posted Under: CSS, Freebies, Tutorial

Tagged: css rounded, Menus, navigation

sarav says:

February 4, 2010 at 5:37 am

very nice to use but it is not working in IE…..

Julia says:

January 26, 2010 at 1:51 pm

Thanks for the menu.

IT Freak says:

January 2, 2010 at 3:26 am

Thanks for the menu. It’ll come quite handy for me for sure

Nathan says:

December 5, 2009 at 7:15 am

Thank for the tutorial.
J-Cutie
Nathan´s last blog : WPB Magazine No.48 [2009]

Sérafina says:

November 7, 2009 at 10:29 am

Thank you for the great tip, i bookmark your site

Referencement says:

November 6, 2009 at 5:13 pm

Thank you for you post, it very instructive for me.

kurye says:

October 14, 2009 at 4:53 am

thank you for share

eric says:

October 8, 2009 at 9:43 am

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/

nata says:

August 7, 2009 at 3:56 am

good thanks your link menu…..

krishna says:

May 28, 2009 at 5:02 am

It worked perfect for me dude. Thanks for this Cool guideline

Roberto says:

May 27, 2009 at 8:43 pm

Interesting. Will try it. Thanks for sharing.

Kawsar Ali says:

May 26, 2009 at 9:13 pm

@Josh: I will check it and get back to you.

Josh says:

May 26, 2009 at 9:10 am

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

May 26, 2009 at 9:07 am

IE8 is not rendering the corners!