CINXE.COM

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml" dir="ltr" lang="en-US"> <head><script type="text/javascript" src="https://web-static.archive.org/_static/js/bundle-playback.js?v=7YQSqjSh" charset="utf-8"></script> <script type="text/javascript" src="https://web-static.archive.org/_static/js/wombat.js?v=txqj7nKC" charset="utf-8"></script> <script>window.RufflePlayer=window.RufflePlayer||{};window.RufflePlayer.config={"autoplay":"on","unmuteOverlay":"hidden"};</script> <script type="text/javascript" src="https://web-static.archive.org/_static/js/ruffle/ruffle.js"></script> <script type="text/javascript"> __wm.init("https://web.archive.org/web"); __wm.wombat("http://bavotasan.com/tutorials/a-sleek-navigation-menu-with-css3/","20101212085551","https://web.archive.org/","web","https://web-static.archive.org/_static/", "1292144151"); </script> <link rel="stylesheet" type="text/css" href="https://web-static.archive.org/_static/css/banner-styles.css?v=p7PEIJWi" /> <link rel="stylesheet" type="text/css" href="https://web-static.archive.org/_static/css/iconochive.css?v=3PDvdIFv" />  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <meta name="googlebot" content="index,archive,follow,noodp"/> <meta name="robots" content="all,index,follow"/> <meta name="msnbot" content="all,index,follow"/> <meta name="description" content="I'm in the middle of working on a new layout and design for Themes by bavotasan.com and I have been tossing around a few ideas for my main navigation menu...."/> <meta name="keywords" content="css,css3,horizontal menu,menu,nav menu,navigation menu,"/> <title>A Sleek Navigation Menu with CSS3 | bavotasan.com</title> <link rel="stylesheet" href="https://web.archive.org/web/20101212085551cs_/http://bavotasan.com/wp-content/themes/bavotasan-2010/style.css?ver=1.0.8" type="text/css" media="screen"/> <link rel="shortcut icon" href="https://web.archive.org/web/20101212085551im_/http://bavotasan.com/favicon.ico"/> <link rel="pingback" href="http://bavotasan.com/xmlrpc.php"/> <link rel="alternate" type="application/rss+xml" title="bavotasan.com 禄 Feed" href="https://web.archive.org/web/20101212085551/http://feeds.feedburner.com/bavotasan"/> <script type="text/javascript" src="https://web.archive.org/web/20101212085551js_/http://bavotasan.com/wp-includes/js/jquery/jquery.js?ver=1.4.2"></script> <link rel="index" title="bavotasan.com" href="http://bavotasan.com/"/> <link rel="start" title="Removing Images from a WordPress Post: Redux" href="http://bavotasan.com/tutorials/removing-images-from-a-wordpress-post/"/> <link rel="prev" title="A Basic jQuery Slideshow" href="https://web.archive.org/web/20101212085551/http://bavotasan.com/tutorials/a-basic-jquery-slideshow/"/> <link rel="next" title="Using CSS Resets" href="https://web.archive.org/web/20101212085551/http://bavotasan.com/tutorials/using-css-resets/"/> <link rel="canonical" href="https://web.archive.org/web/20101212085551/http://bavotasan.com/tutorials/a-sleek-navigation-menu-with-css3/"/> <link rel="shortlink" href="https://web.archive.org/web/20101212085551/http://bit.ly/cHyigp"/> <script type="text/javascript" src="https://web.archive.org/web/20101212085551js_/http://ajax.googleapis.com/ajax/libs/swfobject/2.1/swfobject.js"></script> <meta property="fb:page_id" content="137456822940271"/> <meta property="fb:admins" content="586505548"/> <meta property="og:site_name" content="bavotasan.com"/> <meta property="og:title" content="A Sleek Navigation Menu with CSS3"/> <meta property="og:description" content="I鈥檓 in the middle of working on a new layout and design for Themes by bavotasan.com and I have been tossing around a few ideas for my main navigation menu. I don鈥檛 want anything too elaborate and I feel that jQuery would be better used elsewhere, so I decided to go with only CSS3. I [...]"/> <meta property="og:type" content="article"/> <meta property="og:image" content="https://web.archive.org/web/20101212085551im_/http://bavotasan.com/wp-content/uploads/2010/09/menu.jpg"/> </head> <body class="single single-post postid-2893"> <div id="bodywrap">  <script type="text/javascript"> (function(){ var bsa = document.createElement('script'); bsa.type = 'text/javascript'; bsa.async = true; bsa.src = '//web.archive.org/web/20101212085551/http://s3.buysellads.com/ac/bsa.js'; (document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(bsa); })(); </script>   <div id="header"> <div id="topmenu" class="menu-top-menu-container"><ul id="menu-top-menu" class="menu"><li id="menu-item-2254" class="menu-item menu-item-type-custom menu-item-2254"><a href="https://web.archive.org/web/20101212085551/http://themes.bavotasan.com/">Themes by bavotasan.com</a></li> <li id="menu-item-2255" class="menu-item menu-item-type-custom menu-item-2255"><a href="https://web.archive.org/web/20101212085551/http://themes.bavotasan.com/support/">Support Forum</a></li> <li id="menu-item-2259" class="menu-item menu-item-type-custom menu-item-2259"><a href="https://web.archive.org/web/20101212085551/http://themes.bavotasan.com/affiliates">Affiliates</a></li> <li id="menu-item-2256" class="menu-item menu-item-type-post_type menu-item-2256"><a href="https://web.archive.org/web/20101212085551/http://bavotasan.com/about/">About</a></li> <li id="menu-item-2257" class="menu-item menu-item-type-post_type menu-item-2257"><a href="https://web.archive.org/web/20101212085551/http://bavotasan.com/services/">Services</a></li> <li id="menu-item-2258" class="menu-item menu-item-type-post_type menu-item-2258"><a href="https://web.archive.org/web/20101212085551/http://bavotasan.com/contact/">Contact</a></li> </ul></div> <div id="title"> <a href="https://web.archive.org/web/20101212085551/http://bavotasan.com/"> <img src="https://web.archive.org/web/20101212085551im_/http://bavotasan.com/wp-content/themes/bavotasan-2010/images/bavotasan.png" alt="bavotasan.com" width="400" height="70"/> <span id="desc"></span></a> </div> <div id="follow"> <span></span> <a href="https://web.archive.org/web/20101212085551/http://twitter.com/bavotasan" class="twitter"></a> <a href="https://web.archive.org/web/20101212085551/http://feeds.feedburner.com/bavotasan" class="rss"></a> </div> <div id="navigation" class="menu-main-menu-container"> <ul id="menu-main-menu" class="menu"> <li id="menu-item-2264"><a href="https://web.archive.org/web/20101212085551/http://bavotasan.com/"><span></span>Home</a></li> <li id="menu-item-2266"><a href="https://web.archive.org/web/20101212085551/http://bavotasan.com/category/articles/"><span></span>Articles</a></li> <li id="menu-item-2265" class="current-menu-item"><a href="https://web.archive.org/web/20101212085551/http://bavotasan.com/category/tutorials/"><span></span>Tutorials</a></li> <li id="menu-item-2267"><a href="https://web.archive.org/web/20101212085551/http://bavotasan.com/category/downloads/"><span></span>Downloads</a></li> </ul> </div> </div>  <div id="mainwrapper"> <div id="leftcontent"> <div class="posttop"> <div class="thedate"><div class="month">Sep</div><div class="day">27</div><div class="year">2010</div></div> <h1>A Sleek Navigation Menu with CSS3</h1> <br class="clear"/> <p>I’m in the middle of working on a new layout and design for <a href="https://web.archive.org/web/20101212085551/http://themes.bavotasan.com/">Themes by bavotasan.com</a> and I have been tossing around a few ideas for my main navigation menu. I don’t want anything too elaborate and I feel that jQuery would be better used elsewhere, so I decided to go with only CSS3. I plan on using rounded corners, a background gradient and a simple hover effect. All together it works quite nicely, but of course it only works on modern browsers that support CSS3 so IE users will be missing out once again.</p> <p>First we need to put together a simple menu as an unordered list:</p> <div class="wp_syntax"><table border="0" cellpadding="0" cellspacing="0"><tr><td><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #339933;"><</span>ul id<span style="color: #339933;">=</span><span style="color: #0000ff;">"main-navigation"</span><span style="color: #339933;">></span> <span style="color: #339933;"><</span>li <span style="color: #000000; font-weight: bold;">class</span><span style="color: #339933;">=</span><span style="color: #0000ff;">"first><a href="</span>http<span style="color: #339933;">:</span><span style="color: #666666; font-style: italic;">//themes.bavotasan.com">Home</a></li></span> <span style="color: #339933;"><</span>li<span style="color: #339933;">><</span>a href<span style="color: #339933;">=</span><span style="color: #0000ff;">"http://themes.bavotasan.com/category/our-themes"</span><span style="color: #339933;">></span>Themes<span style="color: #339933;"></</span>a<span style="color: #339933;">></</span>li<span style="color: #339933;">></span> <span style="color: #339933;"><</span>li<span style="color: #339933;">><</span>a href<span style="color: #339933;">=</span><span style="color: #0000ff;">"http://demos.bavotasan.com/"</span><span style="color: #339933;">></span>Demos<span style="color: #339933;"></</span>a<span style="color: #339933;">></</span>li<span style="color: #339933;">></span> <span style="color: #339933;"><</span>li<span style="color: #339933;">><</span>a href<span style="color: #339933;">=</span><span style="color: #0000ff;">"http://bavotasan.com/"</span><span style="color: #339933;">></span>Blog<span style="color: #339933;"></</span>a<span style="color: #339933;">></</span>li<span style="color: #339933;">></span> <span style="color: #339933;"></</span>ul<span style="color: #339933;">></span></pre></div></td></tr></table></div> <p>We’ll give our unordered list the ID <code>main-navigation</code> and our first list items the class <code>first</code>. You’ll see why in a second.</p> <p>Next comes the CSS:</p> <div class="wp_syntax"><table border="0" cellpadding="0" cellspacing="0"><tr><td><div class="code"><pre class="css" style="font-family:monospace;"><span style="color: #cc00cc;">#main-navigation</span> <span style="color: #00AA00;">{</span> <span style="color: #000000; font-weight: bold;">width</span><span style="color: #00AA00;">:</span> <span style="color: #933;"><span style="color: #cc66cc;">100</span>%</span><span style="color: #00AA00;">;</span> -moz-border-radius<span style="color: #00AA00;">:</span> <span style="color: #933;">8px</span><span style="color: #00AA00;">;</span> -khtml-border-radius<span style="color: #00AA00;">:</span> <span style="color: #933;">8px</span><span style="color: #00AA00;">;</span> -webkit-border-radius<span style="color: #00AA00;">:</span> <span style="color: #933;">8px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">background</span><span style="color: #00AA00;">:</span> -webkit-gradient<span style="color: #00AA00;">(</span>linear<span style="color: #00AA00;">,</span> <span style="color: #000000; font-weight: bold;">left</span> <span style="color: #000000; font-weight: bold;">top</span><span style="color: #00AA00;">,</span> <span style="color: #000000; font-weight: bold;">left</span> <span style="color: #000000; font-weight: bold;">bottom</span><span style="color: #00AA00;">,</span> from<span style="color: #00AA00;">(</span><span style="color: #cc00cc;">#444444</span><span style="color: #00AA00;">)</span><span style="color: #00AA00;">,</span> to<span style="color: #00AA00;">(</span><span style="color: #cc00cc;">#666666</span><span style="color: #00AA00;">)</span><span style="color: #00AA00;">)</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">background</span><span style="color: #00AA00;">:</span> -moz-linear-gradient<span style="color: #00AA00;">(</span><span style="color: #000000; font-weight: bold;">top</span><span style="color: #00AA00;">,</span> <span style="color: #cc00cc;">#444444</span><span style="color: #00AA00;">,</span> <span style="color: #cc00cc;">#666666</span><span style="color: #00AA00;">)</span><span style="color: #00AA00;">;</span> filter<span style="color: #00AA00;">:</span> progid<span style="color: #3333ff;">:DXImageTransform</span><span style="color: #6666ff;">.Microsoft</span>.gradient<span style="color: #00AA00;">(</span>startColorstr<span style="color: #00AA00;">=</span><span style="color: #ff0000;">'#444444'</span><span style="color: #00AA00;">,</span> endColorstr<span style="color: #00AA00;">=</span><span style="color: #ff0000;">'#666666'</span><span style="color: #00AA00;">)</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">border</span><span style="color: #00AA00;">:</span> <span style="color: #933;">1px</span> <span style="color: #993333;">solid</span> <span style="color: #cc00cc;">#444</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">list-style</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">none</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">padding</span><span style="color: #00AA00;">:</span> <span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">margin</span><span style="color: #00AA00;">:</span> <span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">float</span><span style="color: #00AA00;">:</span> <span style="color: #000000; font-weight: bold;">left</span><span style="color: #00AA00;">;</span> <span style="color: #00AA00;">}</span>   <span style="color: #cc00cc;">#main-navigation</span> li <span style="color: #00AA00;">{</span> <span style="color: #000000; font-weight: bold;">float</span><span style="color: #00AA00;">:</span> <span style="color: #000000; font-weight: bold;">left</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">border-right</span><span style="color: #00AA00;">:</span> <span style="color: #933;">1px</span> <span style="color: #993333;">solid</span> <span style="color: #cc00cc;">#777</span><span style="color: #00AA00;">;</span> <span style="color: #00AA00;">}</span>   <span style="color: #cc00cc;">#main-navigation</span> li a <span style="color: #00AA00;">{</span> <span style="color: #000000; font-weight: bold;">font</span><span style="color: #00AA00;">:</span> <span style="color: #933;">13px</span> Georgia<span style="color: #00AA00;">,</span> <span style="color: #ff0000;">"Times New Roman"</span><span style="color: #00AA00;">,</span> Times<span style="color: #00AA00;">,</span> <span style="color: #993333;">serif</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">letter-spacing</span><span style="color: #00AA00;">:</span> <span style="color: #933;">1px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">padding</span><span style="color: #00AA00;">:</span> <span style="color: #933;">12px</span> <span style="color: #933;">20px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">border-right</span><span style="color: #00AA00;">:</span> <span style="color: #933;">1px</span> <span style="color: #993333;">solid</span> <span style="color: #cc00cc;">#333</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">display</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">block</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">color</span><span style="color: #00AA00;">:</span> <span style="color: #cc00cc;">#fff</span><span style="color: #00AA00;">;</span> <span style="color: #00AA00;">}</span></pre></div></td></tr></table></div> <p>The above CSS will give us a menu that looks like this:</p> <ul id="demo-nav"> <li class="first"><a href="https://web.archive.org/web/20101212085551/http://themes.bavotasan.com/">Home</a></li> <li><a href="https://web.archive.org/web/20101212085551/http://themes.bavotasan.com/category/our-themes">Themes</a></li> <li><a href="https://web.archive.org/web/20101212085551/http://demos.bavotasan.com/">Demos</a></li> <li><a href="https://web.archive.org/web/20101212085551/http://bavotasan.com/">Blog</a></li> </ul> <p>A simple underline for the hover doesn’t quite cut it, so let’s add a cool hover effect:</p> <div class="wp_syntax"><table border="0" cellpadding="0" cellspacing="0"><tr><td><div class="code"><pre class="css" style="font-family:monospace;"><span style="color: #cc00cc;">#main-navigation</span> li a<span style="color: #3333ff;">:hover </span><span style="color: #00AA00;">{</span> <span style="color: #000000; font-weight: bold;">background</span><span style="color: #00AA00;">:</span> -webkit-gradient<span style="color: #00AA00;">(</span>linear<span style="color: #00AA00;">,</span> <span style="color: #000000; font-weight: bold;">left</span> <span style="color: #000000; font-weight: bold;">top</span><span style="color: #00AA00;">,</span> <span style="color: #000000; font-weight: bold;">left</span> <span style="color: #000000; font-weight: bold;">bottom</span><span style="color: #00AA00;">,</span> from<span style="color: #00AA00;">(</span><span style="color: #cc00cc;">#666666</span><span style="color: #00AA00;">)</span><span style="color: #00AA00;">,</span> to<span style="color: #00AA00;">(</span><span style="color: #cc00cc;">#444444</span><span style="color: #00AA00;">)</span><span style="color: #00AA00;">)</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">background</span><span style="color: #00AA00;">:</span> -moz-linear-gradient<span style="color: #00AA00;">(</span><span style="color: #000000; font-weight: bold;">top</span><span style="color: #00AA00;">,</span> <span style="color: #cc00cc;">#666666</span><span style="color: #00AA00;">,</span> <span style="color: #cc00cc;">#444444</span><span style="color: #00AA00;">)</span><span style="color: #00AA00;">;</span> filter<span style="color: #00AA00;">:</span> progid<span style="color: #3333ff;">:DXImageTransform</span><span style="color: #6666ff;">.Microsoft</span>.gradient<span style="color: #00AA00;">(</span>startColorstr<span style="color: #00AA00;">=</span><span style="color: #ff0000;">'#666666'</span><span style="color: #00AA00;">,</span> endColorstr<span style="color: #00AA00;">=</span><span style="color: #ff0000;">'#444444'</span><span style="color: #00AA00;">)</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">text-decoration</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">none</span><span style="color: #00AA00;">;</span> <span style="color: #00AA00;">}</span></pre></div></td></tr></table></div> <p>Hover over a link below to see it in action.</p> <ul id="demo-nav" class="nav2"> <li class="first"><a href="https://web.archive.org/web/20101212085551/http://themes.bavotasan.com/">Home</a></li> <li><a href="https://web.archive.org/web/20101212085551/http://themes.bavotasan.com/category/our-themes">Themes</a></li> <li><a href="https://web.archive.org/web/20101212085551/http://demos.bavotasan.com/">Demos</a></li> <li class="last"><a href="https://web.archive.org/web/20101212085551/http://bavotasan.com/">Blog</a></li> </ul> <p>All we did was reverse the gradient and it adds a cool effect. The only problem is that hovering over the first item gives us some strange squared corners. Fixing that requires some CSS styles for the list item with the classname <code>first</code>.</p> <div class="wp_syntax"><table border="0" cellpadding="0" cellspacing="0"><tr><td><div class="code"><pre class="css" style="font-family:monospace;"><span style="color: #cc00cc;">#main-navigation</span> li<span style="color: #6666ff;">.first</span> a <span style="color: #00AA00;">{</span> -moz-border-radius<span style="color: #00AA00;">:</span> <span style="color: #933;">8px</span> <span style="color: #cc66cc;">0</span> <span style="color: #cc66cc;">0</span> <span style="color: #933;">8px</span><span style="color: #00AA00;">;</span> -khtml-border-radius<span style="color: #00AA00;">:</span> <span style="color: #933;">8px</span> <span style="color: #cc66cc;">0</span> <span style="color: #cc66cc;">0</span> <span style="color: #933;">8px</span><span style="color: #00AA00;">;</span> -webkit-border-radius<span style="color: #00AA00;">:</span> <span style="color: #933;">8px</span> <span style="color: #cc66cc;">0</span> <span style="color: #cc66cc;">0</span> <span style="color: #933;">8px</span><span style="color: #00AA00;">;</span> <span style="color: #00AA00;">}</span></pre></div></td></tr></table></div> <p>Now our final menu looks and functions exactly how we want it to.</p> <ul id="demo-nav" class="nav3"> <li class="first"><a href="https://web.archive.org/web/20101212085551/http://themes.bavotasan.com/">Home</a></li> <li><a href="https://web.archive.org/web/20101212085551/http://themes.bavotasan.com/category/our-themes">Themes</a></li> <li><a href="https://web.archive.org/web/20101212085551/http://demos.bavotasan.com/">Demos</a></li> <li class="last"><a href="https://web.archive.org/web/20101212085551/http://bavotasan.com/">Blog</a></li> </ul> <div class="buttonbox"> </div> </div> <div class="post"> <div class="socialleft">If you liked this, please share it.</div> <ul class="addtoany_list"> <li><a href="https://web.archive.org/web/20101212085551/http://twitter.com/share?url=http%3A%2F%2Fbit.ly%2FcHyigp&counturl=http://bavotasan.com/tutorials/a-sleek-navigation-menu-with-css3/" class="twitter-share-button" data-count="vertical" data-via="bavotasan">Tweet</a><script type="text/javascript" src="https://web.archive.org/web/20101212085551js_/http://platform.twitter.com/widgets.js"></script></li> <li><a href="https://web.archive.org/web/20101212085551/http://www.facebook.com/sharer.php?u=http://bavotasan.com/tutorials/a-sleek-navigation-menu-with-css3/&t=A Sleek Navigation Menu with CSS3" title="Click to send this page to Facebook!" target="_blank" rel="nofollow" class="facebook-icon"></a></li> <li><a href="https://web.archive.org/web/20101212085551/http://digg.com/submit?phase=2&url=http://bavotasan.com/tutorials/a-sleek-navigation-menu-with-css3/&title=A Sleek Navigation Menu with CSS3&bodytext=I鈥檓 in the middle of working on a new layout and design for Themes by bavotasan.com and I have been tossing around a few ideas for my main navigation menu. I don鈥檛 want anything too elaborate and I feel that jQuery would be better used elsewhere, so I decided to go with only CSS3. I [...]" title="Digg" rel="nofollow" target="_blank" class="digg-icon"></a></li> <li><a href="https://web.archive.org/web/20101212085551/http://www.delicious.com/save" onclick="window.open('https://web.archive.org/web/20101212085551/http://www.delicious.com/save?v=5&noui&jump=close&url='+encodeURIComponent('https://web.archive.org/web/20101212085551/http://bavotasan.com/tutorials/a-sleek-navigation-menu-with-css3/')+'&title='+encodeURIComponent('A Sleek Navigation Menu with CSS3'),'delicious', 'toolbar=no,width=550,height=550'); return false;" class="delicious-icon"></a></li> <li><a href="https://web.archive.org/web/20101212085551/http://www.stumbleupon.com/submit?url=http://bavotasan.com/tutorials/a-sleek-navigation-menu-with-css3/&title=A Sleek Navigation Menu with CSS3" title="StumbleUpon" rel="nofollow" target="_blank" class="stumbleupon-icon"></a></li> <li><iframe src="https://web.archive.org/web/20101212085551if_/http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fbavotasan.com%2Ftutorials%2Fa-sleek-navigation-menu-with-css3%2F&layout=button_count&show_faces=false&width=100&action=like&colorscheme=light&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:21px;" allowtransparency="true"></iframe></li> </ul> </div> <div class="post"> <p class="tags">Tags: <a href="https://web.archive.org/web/20101212085551/http://bavotasan.com/tag/css/" rel="tag">css</a>, <a href="https://web.archive.org/web/20101212085551/http://bavotasan.com/tag/css3/" rel="tag">css3</a>, <a href="https://web.archive.org/web/20101212085551/http://bavotasan.com/tag/horizontal-menu/" rel="tag">horizontal menu</a>, <a href="https://web.archive.org/web/20101212085551/http://bavotasan.com/tag/menu/" rel="tag">menu</a>, <a href="https://web.archive.org/web/20101212085551/http://bavotasan.com/tag/nav-menu/" rel="tag">nav menu</a>, <a href="https://web.archive.org/web/20101212085551/http://bavotasan.com/tag/navigation-menu/" rel="tag">navigation menu</a></p> <p class="tags">Short URL: <a href="https://web.archive.org/web/20101212085551/http://bit.ly/cHyigp" title="A Sleek Navigation Menu with CSS3">http://bit.ly/cHyigp</a></p> </div> <div class="post"> <div id="crp_related"> <h3>Similar Posts</h3> <ul> <li><a href="https://web.archive.org/web/20101212085551/http://bavotasan.com/tutorials/simple-text-shadow-effect-using-css3/" rel="bookmark" title="Permanent Link to Simple Text Shadow Effect using CSS3">Simple Text Shadow Effect using CSS3</a></li> <li><a href="https://web.archive.org/web/20101212085551/http://bavotasan.com/articles/elemental-portfolio-wordpress-theme/" rel="bookmark" title="Permanent Link to Elemental Portfolio WordPress Theme">Elemental Portfolio WordPress Theme</a></li> <li><a href="https://web.archive.org/web/20101212085551/http://bavotasan.com/articles/a-new-look-for-themes-by-bavotasan-com/" rel="bookmark" title="Permanent Link to A New Look for Themes by bavotasan.com">A New Look for Themes by bavotasan.com</a></li> <li><a href="https://web.archive.org/web/20101212085551/http://bavotasan.com/tutorials/using-css-resets/" rel="bookmark" title="Permanent Link to Using CSS Resets">Using CSS Resets</a></li> <li><a href="https://web.archive.org/web/20101212085551/http://bavotasan.com/tutorials/text-rotation-css3/" rel="bookmark" title="Permanent Link to Text Rotation with CSS3">Text Rotation with CSS3</a></li> </ul> </div> <a href="https://web.archive.org/web/20101212085551/http://www.netfirms.com/web-hosting/web-hosting-business/?a_aid=4c8bb52b19602&a_bid=8f049e07" target="_top" style="float:right;"><img src="https://web.archive.org/web/20101212085551im_/http://www.webhostrevenue.com/accounts/default1/banners/300x250-us.gif" alt="Netfirms Business Hosting Plan" title="Netfirms Business Hosting Plan" width="250" height="208"/></a><img style="border:0" src="https://web.archive.org/web/20101212085551im_/http://www.webhostrevenue.com/scripts/imp.php?a_aid=4c8bb52b19602&a_bid=8f049e07" width="1" height="1" alt=""/> </div> <div class="post"> <a href="#comment_list"></a> <div id="comments"> <h3 id="comments-title">Discussion <small> 3 Comments</small> </h3> <ol class="commentlist"> <li class="comment even thread-even depth-1" id="li-comment-16349"> <div id="comment-16349"> <div class="comment-avatar"> <img alt="" src="https://web.archive.org/web/20101212085551im_/http://1.gravatar.com/avatar/f5d563f772beda3f1fc84074f569471c?s=60&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class="avatar avatar-60 photo" height="60" width="60"/> </div> <div class="comment-author"> <span class="authorname"><a href="https://web.archive.org/web/20101212085551/http://www.dailytut.com/" rel="external " class="url">Robin</a></span> <span class="commentdate"> on October 7, 2010 at 2:17 am</span> </div> <div class="comment-text"> <p>I am your big fan now <img src="https://web.archive.org/web/20101212085551im_/http://bavotasan.com/wp-includes/images/smilies/icon_smile.gif" alt=":)" class="wp-smiley"/> checking all the tutorials. Awesome trick. trying to implement one social bookmarking icon set with the same technique u explained here.</p> </div> <div class="reply"> <a rel="nofollow" class="comment-reply-link" href="/web/20101212085551/http://bavotasan.com/tutorials/a-sleek-navigation-menu-with-css3/?replytocom=16349#respond" onclick="return addComment.moveForm("comment-16349", "16349", "respond", "2893")">Reply</a> </div> </div> </li> <li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-16554"> <div id="comment-16554"> <div class="comment-avatar"> <img alt="" src="https://web.archive.org/web/20101212085551im_/http://1.gravatar.com/avatar/94f7cf52fd8b7d1d77a41735c7aaec04?s=60&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class="avatar avatar-60 photo" height="60" width="60"/> </div> <div class="comment-author"> <span class="authorname"><a href="https://web.archive.org/web/20101212085551/http://ilyaskazi.com/" rel="external " class="url">Ilyas Kazi</a></span> <span class="commentdate"> on November 2, 2010 at 12:24 am</span> </div> <div class="comment-text"> <p>Nice hack……… Could you please also guide us adding Vertical menu to this CSS3 menu..?</p> </div> <div class="reply"> <a rel="nofollow" class="comment-reply-link" href="/web/20101212085551/http://bavotasan.com/tutorials/a-sleek-navigation-menu-with-css3/?replytocom=16554#respond" onclick="return addComment.moveForm("comment-16554", "16554", "respond", "2893")">Reply</a> </div> </div> <ul class="children"> <li class="comment byuser bypostauthor even depth-2" id="li-comment-16561"> <div id="comment-16561"> <div class="comment-avatar"> <img alt="" src="https://web.archive.org/web/20101212085551im_/http://1.gravatar.com/avatar/ba043b2af6a355787f1b6fd1b1ea3eda?s=60&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class="avatar avatar-60 photo" height="60" width="60"/> </div> <div class="comment-author"> <span class="authorname"><a href="https://web.archive.org/web/20101212085551/http://bavotasan.com/" rel="external " class="url">c.bavota</a></span> <span class="commentdate"> on November 2, 2010 at 2:21 pm</span> </div> <div class="comment-text"> <p>You could just remove the <code>float:left</code> from the list item style. But you would also have to modify some other CSS to make it look right.</p> </div> </div> </li> </ul> </li> </ol> <a name="respond"></a> <div id="respond"> <h3 id="reply-title">Leave a Reply <small><a rel="nofollow" id="cancel-comment-reply-link" href="/web/20101212085551/http://bavotasan.com/tutorials/a-sleek-navigation-menu-with-css3/#respond" style="display:none;">Cancel reply</a></small></h3> <form action="https://web.archive.org/web/20101212085551/http://bavotasan.com/wp-comments-post.php" method="post" id="commentform"> <p class="comment-notes">Your email address will not be published. Required fields are marked <span class="required">*</span></p> <p class="comment-form-author"><label for="author">Name</label> <span class="required">*</span><br/><input id="author" name="author" type="text" value="" size="30"/></p> <p class="comment-form-email"><label for="email">Email</label> <span class="required">*</span><br/><input id="email" name="email" type="text" value="" size="30"/></p> <p class="comment-form-url"><label for="url">Website</label><br/><input id="url" name="url" type="text" value="" size="30"/></p> <p>To enter code in the comment box, please place it between <strong><pre lang="php"> </pre></strong> tags. You don't have to convert any characters to their hex/HTML code. Just add your code the way you would to any code editor.</p> <p class="comment-form-comment"><textarea id="comment" name="comment" cols="45" rows="8" aria-required="true"></textarea></p> <p class="form-submit"> <input name="submit" type="submit" id="submit" value="Post Comment"/> <input type="hidden" name="comment_post_ID" value="2893" id="comment_post_ID"/> <input type="hidden" name="comment_parent" id="comment_parent" value="0"/> </p> <input type="hidden" id="akismet_comment_nonce" name="akismet_comment_nonce" value="514deafd84"/> </form> </div> </div> </div> </div>  <div id="sidebar"> <div id="search"> <form method="get" id="searchform" action="https://web.archive.org/web/20101212085551/http://bavotasan.com/"> <div> <input type="text" class="search_input" value="Search" name="s" id="s" onfocus="if (this.value == 'Search') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search';}"/> <input type="hidden" id="searchsubmit" value="Search"/> </div> </form> <div class="arrow"></div> </div> <div id="sideads">  <div id="bsap_1237633" class="bsarocks bsap_8982c17d635c33dbe23a7ef930777c37"></div>  <br class="clear"/>  <div id="bsap_1237624" class="bsarocks bsap_8982c17d635c33dbe23a7ef930777c37"></div>  </div> <br class="clear"/> <div class="line"></div> <div class="side-widget"> <h4>Most Popular Posts</h4> <ul class="wppp_list"> <li><a href="https://web.archive.org/web/20101212085551/http://bavotasan.com/tutorials/creating-a-jquery-mouseover-fade-effect/" title="Creating a Mouseover Fade Effect with jQuery ">Creating a Mouseover Fade Effect with jQuery </a></li> <li><a href="https://web.archive.org/web/20101212085551/http://bavotasan.com/tutorials/a-simple-mouseover-hover-effect-with-jquery/" title="A Simple Mouseover Hover Effect with jQuery">A Simple Mouseover Hover Effect with jQuery</a></li> <li><a href="https://web.archive.org/web/20101212085551/http://bavotasan.com/downloads/full-sizebackground-image-jquery-plugin/" title="Full Size Background Image jQuery Plugin">Full Size Background Image jQuery Plugin</a></li> <li><a href="https://web.archive.org/web/20101212085551/http://bavotasan.com/downloads/magazine-basic-free-wordpress-theme/" title="Magazine Basic v2.6 WordPress Theme">Magazine Basic v2.6 WordPress Theme</a></li> <li><a href="https://web.archive.org/web/20101212085551/http://bavotasan.com/tutorials/processing-multiple-forms-on-one-page-with-php/" title="Processing Multiple Forms on One Page with PHP">Processing Multiple Forms on One Page with PHP</a></li> <li><a href="https://web.archive.org/web/20101212085551/http://bavotasan.com/tutorials/how-to-create-a-twitter-feed-on-your-web-site/" title="How to Create a Twitter Feed on Your Web Site">How to Create a Twitter Feed on Your Web Site</a></li> <li><a href="https://web.archive.org/web/20101212085551/http://bavotasan.com/tutorials/retrieve-the-first-image-from-a-wordpress-post/" title="Retrieve and Display Images from a WordPress Post">Retrieve and Display Images from a WordPress Post</a></li> <li><a href="https://web.archive.org/web/20101212085551/http://bavotasan.com/tutorials/limiting-the-number-of-words-in-your-excerpt-or-content-in-wordpress/" title="Excerpt or Content Word Limit in WordPress: Redux">Excerpt or Content Word Limit in WordPress: Redux</a></li> <li><a href="https://web.archive.org/web/20101212085551/http://bavotasan.com/downloads/6-free-vinyl-record-vectors/" title="6 Free Vinyl Record Vectors">6 Free Vinyl Record Vectors</a></li> <li><a href="https://web.archive.org/web/20101212085551/http://bavotasan.com/downloads/12-free-illustrator-vector-buttons/" title="12 Free Illustrator Vector Buttons">12 Free Illustrator Vector Buttons</a></li> </ul> </div> <div id="affiliates-ads"> <a href="https://web.archive.org/web/20101212085551/http://themes.bavotasan.com/" class="themes"></a> <a href="https://web.archive.org/web/20101212085551/http://bavotasan.com/downloads/delete-duplicate-posts-pro-wordpress-plugin/" class="deletedupes"></a> <a href="https://web.archive.org/web/20101212085551/https://secure1.inmotionhosting.com/cgi-bin/gby/clickthru.cgi?id=tinkerpriest&page=7" class="inmotion"></a> </div> <div class="line"></div> <div class="side-widget redlink"> <h4>Get a Premium Theme for FREE</h4> <p><a href="https://web.archive.org/web/20101212085551/https://secure1.inmotionhosting.com/cgi-bin/gby/clickthru.cgi?id=tinkerpriest" class="wordpress-logo"></a>Don't have a Web site? How would you like to have WordPress and a <a href="https://web.archive.org/web/20101212085551/http://themes.bavotasan.com/category/premium-themes">Themes by bavotasan.com</a> Premium theme installed and configured for <em>FREE</em>? All you need to do is <a href="https://web.archive.org/web/20101212085551/https://secure1.inmotionhosting.com/cgi-bin/gby/clickthru.cgi?id=tinkerpriest">sign up with InMotion Hosting through this link</a>. <br/> <br/> <a href="https://web.archive.org/web/20101212085551/http://bavotasan.com/free-premium-theme/" class="fr"><em>Click here for more information »</em></a> </p> </div> <div class="side-widget"> <h4>Support c.bavota</h4> <p>If you would like to support <a href="https://web.archive.org/web/20101212085551/http://bavotasan.com/">c.bavota</a> and <a href="https://web.archive.org/web/20101212085551/http://bavotasan.com/">bavotasan.com</a>, please use the donate link below. Any amount, even $1.00, is appreciated (a man's gotta eat, ya know).</p> <a href="https://web.archive.org/web/20101212085551/https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=5745952" id="donate" class="fr">Donate</a> </div> </div> </div> </div>  <div class="whiteline"></div> <div id="footer"> <div id="bottombar"> <a href="javascript:void(0)" class="backtotop">Back to Top<span></span></a> <div class="col col1"> <h4 class="one"><span></span>Stay in Touch</h4> <a href="https://web.archive.org/web/20101212085551/http://twitter.com/bavotasan" class="footer-twitter"><span></span>Follow me on Twitter</a><br/> <a href="https://web.archive.org/web/20101212085551/http://bavotasan.com/feed/" class="footer-rss"><span></span>Subscribe to my RSS Feed</a> <br class="clear"/> <h4 class="two"><span></span>Stay in Tune</h4> <div class="tweets"></div> </div> <div class="col col2"> <h4 class="three"><span></span>Downloads</h4> <ul> <li><a href="https://web.archive.org/web/20101212085551/http://bavotasan.com/downloads/my-first-vanilla-plugin/">My First Vanilla Plugin</a></li> <li><a href="https://web.archive.org/web/20101212085551/http://bavotasan.com/downloads/delete-duplicate-posts-pro-wordpress-plugin/">Delete Duplicate Posts Pro WordPress Plugin</a></li> <li><a href="https://web.archive.org/web/20101212085551/http://bavotasan.com/downloads/feed-me-seymour-free-wordpress-theme/">Feed Me, Seymour 1.2</a></li> <li><a href="https://web.archive.org/web/20101212085551/http://bavotasan.com/downloads/magazine-basic-free-wordpress-theme/">Magazine Basic v2.6 WordPress Theme</a></li> <li><a href="https://web.archive.org/web/20101212085551/http://bavotasan.com/downloads/sliderota-jquery-plugin/">Sliderota jQuery Plugin</a></li> <li><a href="https://web.archive.org/web/20101212085551/http://bavotasan.com/downloads/full-sizebackground-image-jquery-plugin/">Full Size Background Image jQuery Plugin</a></li> <li><a href="https://web.archive.org/web/20101212085551/http://bavotasan.com/downloads/easy-overlay-modal-window-jquery-plugin/">Easy Overlay Modal Window jQuery Plugin</a></li> <li><a href="https://web.archive.org/web/20101212085551/http://bavotasan.com/downloads/snowblind-free-wordpress-theme/">Snowblind Free WordPress Theme</a></li> <li><a href="https://web.archive.org/web/20101212085551/http://bavotasan.com/downloads/8-free-colorful-background-textures-for-designers/">8 Free Colorful Background Textures for Designers</a></li> <li><a href="https://web.archive.org/web/20101212085551/http://bavotasan.com/downloads/stationery-premium-wordpress-theme/">Stationery Premium WordPress Theme</a></li> </ul> </div> <div class="col col3"> <h4 class="four"><span></span>Tutorials</h4> <ul> <li><a href="https://web.archive.org/web/20101212085551/http://bavotasan.com/tutorials/simple-text-shadow-effect-using-css3/">Simple Text Shadow Effect using CSS3</a></li> <li><a href="https://web.archive.org/web/20101212085551/http://bavotasan.com/tutorials/default-custom-background-wordpress-3/">How to Set a Default Custom Background in WordPress 3.0</a></li> <li><a href="https://web.archive.org/web/20101212085551/http://bavotasan.com/tutorials/add-a-copyright-notice-to-copied-text/">Add a Copyright Notice to Copied Text</a></li> <li><a href="https://web.archive.org/web/20101212085551/http://bavotasan.com/tutorials/meta-descriptions-wordpress/">Meta Descriptions for WordPress</a></li> <li><a href="https://web.archive.org/web/20101212085551/http://bavotasan.com/tutorials/turning-on-php-errors/">Turning On PHP Errors</a></li> <li><a href="https://web.archive.org/web/20101212085551/http://bavotasan.com/tutorials/using-css-resets/">Using CSS Resets</a></li> <li><a href="https://web.archive.org/web/20101212085551/http://bavotasan.com/tutorials/a-sleek-navigation-menu-with-css3/">A Sleek Navigation Menu with CSS3</a></li> <li><a href="https://web.archive.org/web/20101212085551/http://bavotasan.com/tutorials/a-basic-jquery-slideshow/">A Basic jQuery Slideshow</a></li> <li><a href="https://web.archive.org/web/20101212085551/http://bavotasan.com/tutorials/text-rotation-css3/">Text Rotation with CSS3</a></li> <li><a href="https://web.archive.org/web/20101212085551/http://bavotasan.com/tutorials/adding-tweet-button-wordpress/">Adding a Tweet Button to WordPress</a></li> </ul> </div> </div> </div> <div id="copyright"> <div id="copyright-wrapper"> Copyright © 2010 <a href="https://web.archive.org/web/20101212085551/http://bavotasan.com/">bavotasan.com</a>. All Rights Reserved. Powered by <a href="https://web.archive.org/web/20101212085551/http://www.wordpress.org/">WordPress</a>. </div> </div> <script src="https://web.archive.org/web/20101212085551js_/http://stats.wordpress.com/e-201049.js" type="text/javascript"></script> <script type="text/javascript"> st_go({blog:'5317602',v:'ext',post:'2893'}); var load_cmc = function(){linktracker_init(5317602,2893,2);}; if ( typeof addLoadEvent != 'undefined' ) addLoadEvent(load_cmc); else load_cmc(); </script> <script type="text/javascript" src="https://web.archive.org/web/20101212085551js_/http://bavotasan.com/wp-content/themes/bavotasan-2010/js/coolstuff.js"></script> <script type="text/javascript"> hs.graphicsDir = 'https://web.archive.org/web/20101212085551/http://bavotasan.com/images/graphics/'; hs.outlineType = 'rounded-white'; hs.outlineWhileAnimating = true; hs.showCredits = false; </script>  </body> </html>