Horizontal CSS Menus

Notes:

The same HTML has been used (only changing the ID's so that this page follows proper coding conventions and never uses the same one more than once. However, each ID is named according to its menu.).

You can save the entire page, and you will have all the CSS and menus locally on your computer. There are no external files for this page. Colors can be easily changed in the CSS.

Compatibiliy: These menus have been tested successfully in Firefox, Opera, Safari, Konqueror, and IE. Any problems have been noted in the menu display area, otherwise you can assume that they all tested fine. Hacks -are not- used in any of these menus.

Right To Use: All menus and code on this page are free, open-source, following only the Creative Commons Attribution 2.5 license. For the required attribution, the following is fine in your HTML or CSS comments: List based on code from http://www.websitestyle.com Of course, if you feel like a giving a live link back to my site from yours, it is definitely appreciated.

If you have usage questions, please post them here on the original release page.

Plain List

See the code

Floating Simple Hover

See the code

Wide Simple Hover

See the code

Centered with Hover Tab

See the code

Left Border with Hover

See the code

Top & Bottom Borders with Hover

See the code

Full Hover with Shadow

See the code

Decorative Borders

See the code

Simple Button Look

See the code

Moving Button Look

See the code

Simple Tabs Look

See the code

Deep Tabs Look

See the code

Tabline Look

See the code


Box Tabs

Note: In IE this will look similar, but not exactly as it will in other browsers. In IE, the box tabs do not show the green bottom and top border, but it is still a nice looking menu so it degrades well in that browser.

See the code


Hanging Tabs

See the code

The Code Section

Plain List

HTML

<div id="plain">
<ul>
<li><a href="#">Link one</a></li>
<li><a href="#">Link two</a></li>
<li><a href="#">Link three</a></li>
<li><a href="#">Link four</a></li>
<li><a href="#">Link five</a></li>
</ul>
</div>

CSS

#plain ul { margin:0; padding:0; }
#plain ul li {display:inline; list-style-type:none;}
#plain ul li a:link, #plain ul li a:visited { color: black; text-decoration:none; }
#plain ul li a:hover { text-decoration:underline; }

HTML

<div id="menu1">
<ul>
<li><a href="#">Link one</a></li>
<li><a href="#">Link two</a></li>
<li><a href="#">Link three</a></li>
<li><a href="#">Link four</a></li>
<li><a href="#">Link five</a></li>
</ul>
</div>

CSS

#menu1 ul {padding: 5px 0; margin:0; }
#menu1 ul li {display:inline; list-style-type: none;}
#menu1 ul li a:link, #menu1 ul li a:visited { background-color: green; color:white;text-decoration:none; padding: 5px;}
#menu1 ul li a:hover { background-color: black; color:white; }

HTML

<div id="menu2">
<ul>
<li><a href="#">Link one</a></li>
<li><a href="#">Link two</a></li>
<li><a href="#">Link three</a></li>
<li><a href="#">Link four</a></li>
<li><a href="#">Link five</a></li>
</ul>
</div>

CSS

#menu2 ul {margin:0; width: 100%; padding: 5px 0; background-color:green;}
#menu2 ul li {display:inline; list-style-type: none;}
#menu2 ul li a:link, #menu2 ul li a:visited { background-color: green; color:white;text-decoration:none; padding: 5px;}
#menu2 ul li a:hover { background-color: black; color:white; }

HTML

<div id="menu3">
<ul>
<li><a href="#">Link one</a></li>
<li><a href="#">Link two</a></li>
<li><a href="#">Link three</a></li>
<li><a href="#">Link four</a></li>
<li><a href="#">Link five</a></li>
</ul>
</div>

CSS

#menu3 ul {margin:0; background-color:#000; padding: 5px; text-align:center;}
#menu3 ul li { display:inline; list-style-type: none;}
#menu3 ul li a:link, #menu3 ul li a:visited { background-color: green; color:white; padding: 5px; text-decoration:none; border-right: 1px solid #fff; border-left: 1px solid #fff; }
#menu3 ul li a:hover { background-color: green; color:white; padding-top: .75em; border-top: 1px outset gray; }

HTML

<div id="menu4">
<ul>
<li><a href="#">Link one</a></li>
<li><a href="#">Link two</a></li>
<li><a href="#">Link three</a></li>
<li><a href="#">Link four</a></li>
<li><a href="#">Link five</a></li>
</ul>
</div>

CSS

#menu4 ul {margin:0; width:100%; padding: 5px 0; background-color:green;}
#menu4 ul li {display:inline; list-style-type: none;}
#menu4 ul li a:link, #menu4 ul li a:visited { background-color: green; color:white;text-decoration:none; padding: 5px; border-left: .4em solid black;}
#menu4 ul li a:hover {color:white; border-left: .4em solid yellow;}

HTML

<div id="menu5">
<ul>
<li><a href="#">Link one</a></li>
<li><a href="#">Link two</a></li>
<li><a href="#">Link three</a></li>
<li><a href="#">Link four</a></li>
<li><a href="#">Link five</a></li>
</ul>
</div>

CSS

#menu5 ul {margin:0; width: 100%; padding: 5px 0; background-color:green;}
#menu5 ul li {display:inline; list-style-type: none;}
#menu5 ul li a:link, #menu5 ul li a:visited { background-color: green; color:white;text-decoration:none; padding: 5px;}
#menu5 ul li a:hover {color:white; border-top: .25em solid black; border-bottom: .25em solid black;}

HTML

<div id="menu6">
<ul>
<li><a href="#">Link one</a></li>
<li><a href="#">Link two</a></li>
<li><a href="#">Link three</a></li>
<li><a href="#">Link four</a></li>
<li><a href="#">Link five</a></li>
</ul>
</div>

CSS

#menu6 ul {margin:0; padding: 5px 0; background-color:green;}
#menu6 ul li {display:inline; list-style-type: none;}
#menu6 ul li a:link, #menu6 ul li a:visited { background-color: green; color:white;text-decoration:none; padding: 5px;}
#menu6 ul li a:hover {color:white; border-top: .25em outset gray; border-bottom: .25em outset gray; background-color:black;}

HTML

<div id="menu7">
<ul>
<li><a href="#">Link one</a></li>
<li><a href="#">Link two</a></li>
<li><a href="#">Link three</a></li>
<li><a href="#">Link four</a></li>
<li><a href="#">Link five</a></li>
</ul>
</div>

CSS

#menu7 ul {margin:0; padding: 5px 0;}
#menu7 ul li {display:inline; list-style-type: none;}
#menu7 ul li a:link, #menu7 ul li a:visited { background-color: green; color:white;text-decoration:none; padding: 5px; border-left: .5em solid black; border-right: .5em solid black;}
#menu7 ul li a:hover { background-color: black; color:white; border-left: .5em solid yellow; border-right: .5em solid yellow; }

HTML

<div id="menu8">
<ul>
<li><a href="#">Link one</a></li>
<li><a href="#">Link two</a></li>
<li><a href="#">Link three</a></li>
<li><a href="#">Link four</a></li>
<li><a href="#">Link five</a></li>
</ul>
</div>

CSS

#menu8 ul {margin:0; padding: 5px 0;}
#menu8 ul li {display:inline; list-style-type: none;}
#menu8 ul li a:link, #menu8 ul li a:visited { background-color: green; color:white;text-decoration:none; padding: 5px; border: .2em outset gray;}
#menu8 ul li a:hover { background-color: black; color:white;}

HTML

<div id="menu9">
<ul>
<li><a href="#">Link one</a></li>
<li><a href="#">Link two</a></li>
<li><a href="#">Link three</a></li>
<li><a href="#">Link four</a></li>
<li><a href="#">Link five</a></li>
</ul>
</div>

CSS

#menu9 ul {margin:0; padding: 5px 0;}
#menu9 ul li {display:inline; list-style-type: none;}
#menu9 ul li a:link, #menu9 ul li a:visited { background-color: green; color:white;text-decoration:none; padding: 5px; border: .2em outset gray; }
#menu9 ul li a:hover { background-color: black; color:white; border: .2em inset gray; }

HTML

<div id="menu10">
<ul>
<li><a href="#" id="current10">Link one</a></li>
<li><a href="#">Link two</a></li>
<li><a href="#">Link three</a></li>
<li><a href="#">Link four</a></li>
<li><a href="#">Link five</a></li>
</ul>
</div>

CSS

#menu10 ul {margin:0; padding: 5px 0; border-bottom: .4em solid black;}
#menu10 ul li {display:inline; list-style-type: none;}
#menu10 ul li a:link, #menu10 ul li a:visited { background-color: green; color:white;text-decoration:none; padding: 5px;}
#menu10 ul li a:hover { background-color: black; color:white; }
#menu10 ul li a#current10 { background-color:black;}

HTML

<div id="menu11">
<ul>
<li><a href="#" id="current11">Link one</a></li>
<li><a href="#">Link two</a></li>
<li><a href="#">Link three</a></li>
<li><a href="#">Link four</a></li>
<li><a href="#">Link five</a></li>
</ul>
</div>

CSS

#menu11 ul {margin:0; padding: 5px 0; border-bottom: .4em solid black;}
#menu11 ul li {display:inline; list-style-type: none;}
#menu11 ul li a:link, #menu11 ul li a:visited { background-color: green; color:white;text-decoration:none; padding: 5px; border: 4px groove gray; border-bottom:none; }
#menu11 ul li a:hover { background-color: black; color:white; }
#menu11 ul li a#current11 { background-color:black; border-bottom: 5px groove black;}

HTML

<div id="menu12">
<ul>
<li><a href="#" id="current12">Link one</a></li>
<li><a href="#">Link two</a></li>
<li><a href="#">Link three</a></li>
<li><a href="#">Link four</a></li>
<li><a href="#">Link five</a></li>
</ul>
</div>

CSS

#menu12 ul {margin:0; padding: 0;}
#menu12 ul li {display:inline; list-style-type: none; float:left;}
#menu12 ul li a:link, #menu12 ul li a:visited { background-color: green; color:white;text-decoration:none; padding: 3px; border: 2px outset gray;}
#menu12 ul li a:hover { background-color: black; color:white;}
#menu12 ul li a#current12 { background-color:black;}

HTML

<div id="menu13">
<ul>
<li><a href="#" id="current13">Link one</a></li>
<li><a href="#">Link two</a></li>
<li><a href="#">Link three</a></li>
<li><a href="#">Link four</a></li>
<li><a href="#">Link five</a></li>
</ul>
</div>

CSS

#menu13 ul {margin:0; padding: 0;}
#menu13 ul li {display:inline; list-style-type: none; float:left;}
#menu13 ul li a:link, #menu13 ul li a:visited { color:black;text-decoration:none; padding: 3px; border: 1px solid green;}
#menu13 ul li a:hover { background-color: black; color:white;}
#menu13 ul li a#current13 { background-color:black; color:white; padding-top: .7em; }

HTML

<div id="menu14">
<ul>
<li><a href="#" id="current14">Link one</a></li>
<li><a href="#">Link two</a></li>
<li><a href="#">Link three</a></li>
<li><a href="#">Link four</a></li>
<li><a href="#">Link five</a></li>
</ul>
</div>

CSS

#menu14 ul {margin:0; padding: 5px 0; border-top: .4em solid black;}
#menu14 ul li {display:inline; list-style-type: none;}
#menu14 ul li a:link, #menu14 ul li a:visited { background-color: green; color:white;text-decoration:none; padding: 5px; border-bottom: 2px solid white; border-right: 2px solid white;}
#menu14 ul li a:hover { background-color: black; color:white; border-bottom: 2px outset gray; border-right: 2px outset gray;}
#menu14 ul li a#current14 { background-color:black; }