# horizontal dropdown menu using html & css



## camphor (Oct 9, 2006)

hi,

I am trying to make the nav bar fit across the page, it looks ok in dreamweaver 8 but when I test it in firefox, it stops short also how would you align the words in the submenu to the main menu, currently the submenus are centered, example attached

html

<div id="menuh-container">
<div id="menuh">

<ul>
<li><a href="file:///C|/Drews Views/index.html" class="top_parent">Home</a>
<ul>
<li><a href="#"><a></li>
<li><a href="#" class="parent"></a>
</ul>
</ul>
</li> 

<ul>
<li><a href="#" class="top_parent">About</a>
<ul>
<li><a href="#"></a></li>
<li><a href="#" class="parent"></a>
</ul>
</ul>
</li> 

<ul>
<li><a href="#" class="top_parent">Construction</a>
<ul>
<li><a href="#">Rock Work</a></li>
<li><a href="#" class="parent">Water Feature</a>
</ul>
</ul>
</li> 

<ul>
<li><a href="#" class="top_parent">Design</a>
<ul>
<li><a href="#"><a></li>
<li><a href="#" class="parent"></a>
</ul>
</ul>
</li>
<ul>
<li><a href="#" class="top_parent">Contact</a>
<ul>
<li><a href="#"><a></li>
<li><a href="#" class="parent"></a>
</ul>
</ul>
</li> 
</div>
</div> 

CSS

#menuh-container
{
top:2em;
left:0;
}

#menuh
{
font-size: small;
font-family: "century gothic";
width:800px;
margin:0;
margin-top:0;
}

#menuh a
{
text-align: center;
display:block;
border: 1px thin #e1edf0;
white-space:nowrap;
margin:0;
padding: 0.2em;
}

#menuh a, #menuh a:visited /* menu at rest */
{
color:#000000;
background-color:#e1edf0;
text-decoration:none;
}

#menuh a:hover /* menu at mouse-over */
{
color:#000000;
background-color:#eaf2f4;
} 

#menuh a.top_parent, #menuh a.top_parent:hover 
{
background-repeat: no-repeat;

}

#menuh a.parent, #menuh a.parent:hover 
{
background-repeat: no-repeat;
}

#menuh ul
{
list-style:none;
margin:0;
padding:0;
float:left;
width:11.75em; /* width of all menu boxes */
}

#menuh li
{
min-height: 1px; 
vertical-align: bottom; 
}

#menuh ul ul
{
position:absolute;
z-index:500;
top:auto;
display:none;
padding:1em;
margin:-1em 0 0 -1em;

}

#menuh ul ul ul
{
top:0;
left:100%;
}

div#menuh li:hover
{
cursorointer;
z-index:100;
}

div#menuh li:hover ul ul,
div#menuh li li:hover ul ul,
div#menuh li li li:hover ul ul,
div#menuh li li li li:hover ul ul
{display:none;}

div#menuh li:hover ul,
div#menuh li li:hover ul,
div#menuh li li li:hover ul,
div#menuh li li li li:hover ul
{display:block;}

thanks


----------

