Free CSS Menu Code

Home >> Web Design >> Free CSS Menu Code

Want to create a horizontal CSS menu like the one I have on the top of this site? Just copy and paste the code below.

/*Paste Code Below Into CSS file (stylesheet)*/ #menu { background: #d22929; float: left; list-style: none; margin: 0; padding: 0; width: 100%; } #menu li { float: left; font-size: 10px; font-family: "Verdana", "Arial", Helvetica, sans-serif; margin: 0px 35px 0px 0px; padding: 0; } #menu a { background: #d22929; font-size: 1.2em; color: #fff; display: block; float: left; margin: 0; padding: 8px 12px; text-decoration: none; } #menu a:hover { background: #d29c1a; color: #fff; } /*Paste Code Below Into Page*/ <ul id="menu"> <li><a href="http://www.2createawebsite.com/index.html" title="Home">Home</a></li> <li><a href="http://www.2createawebsite.com/books/theperfectsiteguide.pdf" title="Free Book">Free Book</a></li> <li><a href="http://www.2createawebsite.com/traffic/create-free-blog.html" title="Blog or Website?">Blog or Static Website?</a></li> <li><a href="http://www.2createawebsite.com/prebuild/web_hosting_tips.html" title="Hosting">Web Host Comparisons</a></li> <li><a href="http://www.2createawebsite.com/prebuild/site-build-it.html">Why Buy Site Build It?</a></li> <li><a href="http://www.2createawebsite.com/other/advertise.html" title="FAQ">Advertise</a></li> </ul>

You May Also Like...

My organized directory of CSS and Photoshop videos

Post a question about CSS or HTML or learn more at my forum.

My amazing 4-year Site Build It! traffic story.

Subscribe to my blog and keep up with my weekly tips.

If you liked this, please share. Thanks!