Get a favicon spot!

CSS Menus - Style #4

Pre-built in red/grey. Top red line controlled via CSS.

This menu is called “Style4″ 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">
<!–
#stylefour{position:relative;display:block;height:39px;font-size:11px;font-weight:bold;background:transparent url(/code/style4/images/bgOFF.gif) repeat-x top left;font-family:Arial,Verdana,Helvitica,sans-serif;border-top:4px solid #B30000;}
#stylefour ul{margin:0;padding:0;list-style-type:none;width:auto;}
#stylefour ul li{display:block;float:left;margin:0;}
#stylefour ul li a{display:block;float:left;color:#666;text-decoration:none;padding:11px 20px 0 20px;height:23px;background:transparent url(/code/style4/images/bgDIVIDER.gif) no-repeat top right;}
#stylefour ul li a:hover,#stylefour ul li a.current{color:#B30000;background:#fff url(images/bgON.gif) no-repeat top right;}
–>
</style>

HTML

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

This entry is filed under CSS Menus. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

« Style #5
Style #2 »

12 Responses to “Style #4”

  1. cinsel Says:
    February 17th, 2008 at 1:03 am

    Thanks its so nice and i am going to use my health site. :)

  2. toddynho Says:
    February 17th, 2008 at 1:05 am

    Great! Glad you like it!

  3. rowjie Says:
    February 18th, 2008 at 2:06 am

    thank you very much for this one!

  4. kiszi Says:
    March 4th, 2008 at 12:11 pm

    very nice template!

    Thanks

  5. mick Says:
    March 7th, 2008 at 4:53 pm

    the style is great but i’m wondering how i could center it in the page

  6. Bryan Says:
    March 22nd, 2008 at 9:33 pm

    Great script, after playing with the colours I’ve have it to suit my site perfectly. A good way for me to learn CSS too. At the moment I’m trying to get three buttons left aligned and one button off to the right (for changing the language of the site). Is this possible? Would I have to create a new block?

  7. j3 Says:
    March 28th, 2008 at 10:20 pm

    how could I center the buttons?

  8. javi Says:
    April 8th, 2008 at 6:17 am

    yeah, I’m wondering the same too.

  9. RAFFY Says:
    April 11th, 2008 at 4:33 am

    how can i add dropdown menu

    ex.

    services -> sample1
    -> sample2
    -> sample3

    i tried but it wont work i put
    services

    Subitem 1
    Subitem 2
    Subitem 3

    then this is the css:

    .hidden li ul {
    display: none;

    }
    .hidden li:hover ul {
    display: block;
    }

  10. tuofa Says:
    April 16th, 2008 at 1:58 am

    i like it.so good!

  11. niupixuan Says:
    April 16th, 2008 at 2:01 am

    very simple and very nice

  12. Tamut Says:
    May 13th, 2008 at 7:27 am

    I used it. it look good.
    Thanks.

Leave a Reply

  • 13Styles.com CSS Menus

    13styles is all about css menus. The menus are list based, very light-weight, easy to implement, and cross-browser compliant. Some of the css menus are free and some require you to purchase rights to use them.

    About | Advertise