I have a single column webpage with a horizontal dropdown menu and am trying to make the nav bar fit across the page, the column is 800px, it looks ok in dreamweaver 8 but when I test it in firefox, the nav bar which is a horizontal blue stripe with the links written inside it doesn't stretch the whole 800px, also how would you align the words in the submenu to the main menu, currently the submenus are centered
html
Expand|Select|Wrap|Line Numbers
- <body>
- <div id="wrapper">
- <div id="headerimage">
- <img src="../2nd_ level/header .jpg" alt="image of rocks and grass" /></div>
- <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>
- <div id="content">
- <div id="maincontent"><!-- TemplateBeginEditable name="text" -->
- <p> </p>
- <!-- TemplateEndEditable --></div>
- <div id="footer">
- Contact: Mobile: 0418 134 812 Office: (03)5965 2285 Email: drew.ad@bigpond.net.au </div>
-
- <div id="copyright">
- Copyright © 2003-2007 l All rights reserved </div>
- </div>
- </div>
- </body>
- 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;}