header

2 nice simple menubars

menubar1 is a single menubar
menubar2 has dropdown options.


Menubar 1

This menubar has basic 4 options with minimal css code.


<div class="menubar1" align="center">
<ul>
<li><a href="">home</a></li>
<li><a href="">page 1</a></li>
<li><a href="">page 2</a></li>
<li><a href="">page 3</a></li>
</ul></div>

The css code

.menubar1{width: 1000px;}
.menubar1 li ul { display: none; }
.menubar1 ul { margin: 0; padding: 0;list-style: none;}
.menubar1 li {width: 250px; float: left; }

.menubar1 a {
font-size: 20px;
display: block;
padding: 8px 15px 8px 15px;
background: #403B4A;
color: #ffffff;
text-decoration: none;
white-space: nowrap;}

.menubar1 li :hover { background: #736EBB; }



Menubar 2

This menubar has basic 4 options with a dropdown section when mouse is on more minimal css code.



<div class="menubar2" align="center">
<ul>
<li><a href="">home</a></li>
<li><a href="">about</a></li>
<li><a href="">contact</a></li>
<li><a href="">more</a>
<ul>
<li><a href="">more 1</a></li>
<li><a href="">more 2</a></li>
<li><a href="">more 3</a></li>
</ul>
</li></ul></div>

The css code

.menubar2{width: 1000px;}
.menubar2 li ul { display: none; }
.menubar2 ul {margin: 0;padding: 0;list-style: none;}
.menubar2 li {width: 250px; float: left;}

.menubar2 a {
font-size: 20px;
display: block;
padding: 8px 15px 8px 15px;
background: #403B4A;
color: #ffffff;
text-decoration: none;
white-space: nowrap;}

.menubar2 li:hover a { background: #736EBB; }
.menubar2 li :hover { background: #736EBB; }
.menubar2 ul li a:hover { background: #24FF34; }

.menubar2 li:hover ul {
display: block;
position: absolute; }

.menubar2 li:hover li {
float: none;
font-size: 11px;
}