Get your spot

Simple Menu CSS Menu



Let’s be honest, this menu isn’t anything unique or special… it’s a great starting point for people who are building their first few CSS menu’s. The CSS/XHTML is very clean and easy to understand. There aren’t any images for the menu, so you won’t need to open up Photoshop to customize the menu.

The Menu

FAQ

  • You can customize this menu to be any color you wish
  • Entire menu system is less than 1KB
  • 1 css file, 1 html file
  • Has been tested and works in over 150 broswer/operating system combos
  • It’s FREE for you to use

Source Code

Check out the source code below or download the zip file containing all necessary html and css. As you can see, the UL is tagged with the “simple-menu” ID. The “Home” tab has the ON state by adding the “current” class to the A tag.

CSS

<style type="text/css">
<!–
#demo-container{padding:25px 15px 0 15px;margin:0 0 15px 0;background:#67A897;}
ul#simple-menu{list-style-type:none;width:100%;position:relative;height:27px;font-family:"Trebuchet MS",Arial,sans-serif;font-size:13px;font-weight:bold;margin:0;padding:11px 0 0 0;}
ul#simple-menu li{display:block;float:left;margin:0 0 0 4px;height:27px;}
ul#simple-menu li.left{margin:0;}
ul#simple-menu li a{display:block;float:left;color:#fff;background:#4A6867;line-height:27px;text-decoration:none;padding:0 17px 0 18px;height:27px;}
ul#simple-menu li a.right{padding-right:19px;}
ul#simple-menu li a:hover{background:#2E4560;}
ul#simple-menu li a.current{color:#2E4560;background:#fff;}
ul#simple-menu li a.current:hover{color:#2E4560;background:#fff;}
–>
</style>

HTML

<div id="demo-container">
<ul id="simple-menu">
<li><a href="http://www.13styles.com/css-menus/simple-menu/" title="Home" class="current">Home</a></li>
<li><a href="http://www.13styles.com/css-menus/simple-menu/" title="Home">Resources</a></li>
<li><a href="http://www.13styles.com/css-menus/simple-menu/" title="Home">Inspiration</a></li>
<li><a href="http://www.13styles.com/css-menus/simple-menu/" title="Home">Community Forums</a></li>
<li><a href="http://www.13styles.com/css-menus/simple-menu/" title="Home">About Us</a></li>
<li><a href="http://www.13styles.com/css-menus/simple-menu/" title="Home">Contact Us</a></li>
</ul>
</div>