A simple CSS horizontal dropdown menu
Put this in your stylesheet.css.menu {
font-family: arial, sans-serif;
width:750px;
height:25px;
position:relative;
font-size:11px;
z-index:100;
background-position: left top;
text-align: left;
vertical-align: text-top;
float: left;
}
.menu ul li a, .menu ul li a:visited {
display:block;
text-decoration:none;
color:#000;width:104px;
height:23px;
text-align:center;
color:#000;
line-height:23px;
font-size:11px;
overflow:hidden;
}
.menu ul {
padding:0;
margin:0;
list-style: none;
}
.menu ul li {
float:left;
position:relative;
}
.menu ul li ul {
display: none;
}
/* specific to non IE browsers */
.menu ul li:hover a {
color:#fff;
background:#c9c9a7
}
.menu ul li:hover ul {
display:block;
position:absolute;
top:21px;
left:0;
width:105px;
}
.menu ul li:hover ul li a.hide {
background:#c9c9a7;
color:#fff;
}
.menu ul li:hover ul li:hover a.hide {
background:#c9c9a7;
color:#000;
}
.menu ul li:hover ul li ul {
display: none;
}
.menu ul li:hover ul li a {
display:block;
background:#c9c9a7;
color:#000;
}
.menu ul li:hover ul li a:hover {
background:#dfc184;
color:#000;
}
.menu ul li:hover ul li:hover ul {
display:block;
position:absolute;
left:105px;
top:0;
}
.menu ul li:hover ul li:hover ul.left {
left:-105px;
}
Than ad this in your page.html<div class="menu" align="left" >
<ul>
<li><a href="#" target="_self">link1</a></li>
<li><a href="#" target="_self">link2</a>
<ul>
<li><a href="#" target="_self">link1</a></li>
<li><a href="#" target="_self">link2</a></li>
<li><a href="#" target="_self">link3</a></li>
</ul>
</li>
<li><a href="#" target="_self">link3</a></li>
<li><a href="#" target="_self">link4</a></li>
<li><a href="#" target="_self">link5</a>
<ul>
<li><a href="#" target="_self">link1</a></li>
<li><a href="#" target="_self">link2</a></li>
<li><a href="#" target="_self">link3</a></li>
</ul>
</li>
<li><a href="#" target="_self">link6</a></li>
<li><a href="#" target="_self">link7</a></li>
</ul>
</div>
For a example how it's look like
click here