Get your spot

Style #1 CSS Menu



This menu is called “Style1″ and I’m not sure why.

The Menu

FAQ

  • Entire menu system is less than 3KB.
  • 2 image files, 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, css, and images. The “Services” tab has the ON state by adding the “current” class to the A tag.

CSS

<style type="text/css">
<!–
#styleone{position:relative;display:block;height:21px;font-size:11px;font-weight:bold;background:transparent url(/code/style1/images/bgOFF.gif) repeat-x top left;font-family:Arial,Verdana,Helvitica,sans-serif;border-bottom:1px solid #d9d9d9;}
#styleone ul{margin:0;padding:0;list-style-type:none;width:auto;}
#styleone ul li{display:block;float:left;margin:0 1px 0 0;}
#styleone ul li a{display:block;float:left;color:#034895;text-decoration:none;padding:3px 20px 0 20px;height:18px;}
#styleone ul li a:hover,#styleone ul li a.current{color:#034895;background:transparent url(/code/style1/images/bgON.gif) repeat-x top left;}
–>
</style>

HTML

<div id="styleone">
	<ul>
		<li><a href="http://www.13styles.com/css-menus/style1/" title="css menus">Home</a></li>
		<li><a href="http://www.13styles.com/css-menus/style1/" title="css menus">About Us</a></li>
		<li><a href="http://www.13styles.com/css-menus/style1/" title="css menus" class="current">Services</a></li>
		<li><a href="http://www.13styles.com/css-menus/style1/" title="css menus">Our Work</a></li>
		<li><a href="http://www.13styles.com/css-menus/style1/" title="css menus">Contact Us</a></li>
	</ul>
</div>