By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
437,677 Members | 1,807 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 437,677 IT Pros & Developers. It's quick & easy.

horizontal dropdown menu using html and css

P: 35
hi,

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
  1. <body>
  2. <div id="wrapper">
  3.  
  4.  
  5. <div id="headerimage">
  6. <img src="../2nd_ level/header .jpg" alt="image of rocks and grass" /></div>
  7.  
  8. <div id="menuh-container">
  9. <div id="menuh">
  10.  
  11.     <ul>
  12.         <li><a href="file:///C|/Drews Views/index.html" class="top_parent">Home</a>
  13.         <ul>
  14.             <li><a href="#"><a></li>
  15.             <li><a href="#" class="parent"></a>
  16.                 </ul>
  17.                   </ul>
  18.                     </li>    
  19.  
  20.     <ul>
  21.         <li><a href="#" class="top_parent">About</a>
  22.         <ul>
  23.             <li><a href="#"></a></li>
  24.             <li><a href="#" class="parent"></a>
  25.                 </ul>
  26.       </ul>
  27.                     </li>        
  28.  
  29.      <ul>
  30.          <li><a href="#" class="top_parent">Construction</a>
  31.          <ul>
  32.             <li><a href="#">Rock Work</a></li>
  33.             <li><a href="#" class="parent">Water Feature</a>
  34.                 </ul>
  35.                   </ul>
  36.                     </li>    
  37.  
  38.        <ul>
  39.         <li><a href="#" class="top_parent">Design</a>
  40.         <ul>
  41.             <li><a href="#"><a></li>
  42.             <li><a href="#" class="parent"></a>
  43.                 </ul>
  44.                   </ul>
  45.                     </li>
  46.         <ul>
  47.         <li><a href="#" class="top_parent">Contact</a>
  48.         <ul>
  49.             <li><a href="#"><a></li>
  50.             <li><a href="#" class="parent"></a>
  51.                 </ul>
  52.                   </ul>
  53.                     </li>                                                                        
  54. </div>
  55. </div>    
  56.  
  57.  
  58. <div id="content">  
  59. <div id="maincontent"><!-- TemplateBeginEditable name="text" -->
  60.   <p>&nbsp;</p>
  61.   <!-- TemplateEndEditable --></div>
  62.  
  63. <div id="footer">
  64.   Contact:&nbsp; &nbsp; Mobile: 0418 134 812 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Office: (03)5965 2285  &nbsp; &nbsp;  &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;  Email: drew.ad@bigpond.net.au </div>
  65.  
  66. &nbsp;
  67. <div id="copyright">&nbsp; &nbsp;
  68. Copyright &copy; 2003-2007 l All rights reserved &nbsp; &nbsp;</div>
  69.  
  70.  
  71. </div>
  72. </div>
  73. </body>
  74.  
  75. CSS
  76.  
  77. #menuh-container
  78. {
  79. top:2em;
  80. left:0;
  81. }
  82.  
  83. #menuh
  84. {
  85. font-size: small;
  86. font-family: "century gothic";
  87. width:800px;
  88. margin:0;
  89. margin-top:0;
  90. }
  91.  
  92. #menuh a
  93. {
  94. text-align: center;
  95. display:block;
  96. border: 1px thin #e1edf0;
  97. white-space:nowrap;
  98. margin:0;
  99. padding: 0.2em;
  100. }
  101.  
  102. #menuh a, #menuh a:visited /* menu at rest */
  103. {
  104. color:#000000;
  105. background-color:#e1edf0;
  106. text-decoration:none;
  107. }
  108.  
  109. #menuh a:hover /* menu at mouse-over */
  110. {
  111. color:#000000;
  112. background-color:#eaf2f4;
  113.  
  114. #menuh a.top_parent, #menuh a.top_parent:hover 
  115. {
  116. background-repeat: no-repeat;
  117.  
  118. }
  119.  
  120. #menuh a.parent, #menuh a.parent:hover 
  121. {
  122. background-repeat: no-repeat;
  123. }
  124.  
  125. #menuh ul
  126. {
  127. list-style:none;
  128. margin:0;
  129. padding:0;
  130. float:left;
  131. width:11.75em; /* width of all menu boxes */
  132. }
  133.  
  134. #menuh li
  135. {
  136. min-height: 1px; 
  137. vertical-align: bottom; 
  138. }
  139.  
  140. #menuh ul ul
  141. {
  142. position:absolute;
  143. z-index:500;
  144. top:auto;
  145. display:none;
  146. padding:1em;
  147. margin:-1em 0 0 -1em;
  148.  
  149. }
  150.  
  151. #menuh ul ul ul
  152. {
  153. top:0;
  154. left:100%;
  155. }
  156.  
  157. div#menuh li:hover
  158. {
  159. cursorointer;
  160. z-index:100;
  161. }
  162.  
  163. div#menuh li:hover ul ul,
  164. div#menuh li li:hover ul ul,
  165. div#menuh li li li:hover ul ul,
  166. div#menuh li li li li:hover ul ul
  167. {display:none;}
  168.  
  169. div#menuh li:hover ul,
  170. div#menuh li li:hover ul,
  171. div#menuh li li li:hover ul,
  172. div#menuh li li li li:hover ul
  173. {display:block;}
  174.  
thanks
Mar 30 '07 #1
Share this Question
Share on Google+
1 Reply


KevinADC
Expert 2.5K+
P: 4,059
why don't you get rid of this div:

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


and put those properties in the menu div
Mar 30 '07 #2

Post your reply

Sign in to post your reply or Sign up for a free account.