Creating a CSS Navigation Menu (Free Code)

Home >> Web Design >> CSS Navigation Menu

Creating a CSS menu is not hard once you understand what the code does. To make it easy for you, I have provided a video and code to help you create your horizontal navigation menu.

Be sure to watch the video if you want to learn more about the actual code used.

Note: Since most WordPress themes already have horizontal menus, this tutorial is for static/HTML websites.

CSS Menu Video

CSS Menu Code

This is the code for your stylesheet.

/*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; }

HTML Code for Page

This is the code that goes in your actual HTML page.

/*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>

Learn how to position elements on a page using CSS.

If you liked this, please share. Thanks!