13 Styles Simple Menu Restyled by me

---

Link to 13 Styles web site.

The example above is the 13 Styles Basic Menu restyled into a bar menu. Two images are used in this example. The images can be resized to the width of 1 pixel and repeated. The border colors and height have also been changed. Very versitle one level menu. Images were taken from the Fox Menu.

HTML for 13 Styles Simple Menu Restyled

<div id="simplemenu2">
<div id="simple_menu2">
<ul>
<li><a href="" title="">Home</a></li>
<li><a href="" title="">About Us</a></li>
<li><a href="" title="" class="current">Services</a></li>
<li><a href="" title="">Our Work</a></li>
<li><a href="" title="">Contact Us</a></li>
</ul>
</div>
</div>

CSS for 13 Styles Simple Menu Restyled

#simplemenu2 {background:#fc0 url(images/restyled/foxmenu_bg-OFF.jpg) repeat-x;border:1px solid #68d;}
ul#simple-menu2{list-style-type:none;width:100%;height:24px; font-family:"Trebuchet MS",Arial,sans-serif;font-size:13px;font-weight:bold; margin:0;padding:0px 0 0 0;}
ul#simple-menu2 li{display:block;float:left; margin:0 0px 0 0px;height:24px;}
ul#simple-menu2 li.left{margin:0;}
ul#simple-menu2 li a{display:block;float:left;color:#fff; background:#4A6867 url(images/restyled/foxmenu_bg-OFF.jpg) repeat-x;line-height:24px;text-decoration:none; padding:0 17px 0 18px;height:24px;border-left:1px solid #68d;border-right:1px solid #ddd;}
ul#simple-menu2 li a.right{padding-right:19px;}
ul#simple-menu2 li a:hover{background:#2E4560 url(images/restyled/foxmenu_bg-OVER.jpg) repeat-x;}
ul#simple-menu2 li a.current{color:#2E4560;background:#fff ;}
ul#simple-menu2 li a.current:hover{color:#fff;background:#fff url(images/restyled/foxmenu_bg-OVER.jpg) repeat-x;}

Images for 13 Styles Simple Menu Restyled

foxmenu_bg-OFF.jpg

foxmenu_bg-OVER.jpg