473,327 Members | 2,071 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,327 software developers and data experts.

horizontal dropdown menu using html and css

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
1 6570
KevinADC
4,059 Expert 2GB
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

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

Similar topics

13
by: elad | last post by:
Hi The Menu doesn't work properly when I have 2 frame and the Menu popup frame=document target frame, when I choose item in the menu the doc opened and the menu get stuck. Here is the code...
4
by: Papa Legba | last post by:
I'm looking for a Seeking pure CSS horizontal menu with sub-menus which drop down on mouse over. Compatible with as many browsers as possible. Any ideas?
2
by: polo | last post by:
Hi i am trying to get a horizontal menu and sub menu in css, which works great on my Firefox But, in order to get around the ie hover bug, i included some javascript which gives me a strange...
0
by: Randy Smith | last post by:
Hi All, My menu control doesn't "dropdown". The "Home" menu item doesn't appear, nor does the "Jobs" item. And, the 2nd group (Labor and Materials) in web.sitemap doesn't appear at all. The...
2
by: Sergio E. | last post by:
Hi group, I write this post with the following question: How can I to build an absolutely horizontal menu?, This is because I can't find how can I configure the menu component of asp.net 2.0...
2
by: William Youngman | last post by:
We are developing an application that presents data to the user in a gridview and we are using the dropdown extender to give the user a SharePoint 2007 type dropdown menu attached to the cells of a...
19
by: Jim | last post by:
Hi, I have two questions/problems pertaining to CSS horizontal dropdown menus and am hoping that someone here can help me out. (1) I'm having a problem centering the menu. I picked up the...
17
by: Nyris | last post by:
I have this code used for the navigation on an HTML page. It's an accordion style dropdown menu. Everything works fine I just need to change it so that the submenuheader class allows it to be a...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.