473,382 Members | 1,375 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

home > topics > html / css > questions > how to change height of main menu in css

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

How to change height of main menu in CSS

236 100+
Hi All,

How do I change the height of the main menu as the height is inconsistent due to some of main menu's item stretches to 2 rows while, the other main menu's items are stretched to 1 row.

Code is below


Cheers...
Andrew

css
Expand|Select|Wrap|Line Numbers
  1. <style type="text/css" media="screen">
  2. <!--
  3. body {
  4. margin: 0;
  5. padding: 0;
  6. background: white;
  7. font: 80% verdana, arial, sans-serif;
  8. }
  9. dl, dt, dd, ul, li {
  10. margin: 0;
  11. padding: 0;
  12. list-style-type: none;
  13. line-height:2em;
  14. }
  15. #menu {
  16. position: relative; /* Menu position that can be changed at will */
  17. top: 180;
  18. left: 200;
  19. z-index:100;
  20. width: 100%; /* precision for Opera */
  21. }
  22. #menu dl {
  23. float: left;
  24. width: 9em;
  25. }
  26. #menu dt {
  27. cursor: pointer;
  28. text-align: center;
  29. font-weight: bold;
  30. background: #ff00ff;
  31. border: 1px solid gray;
  32. margin: 1px;
  33. }
  34. #menu dd {
  35. display: none;
  36. border: 1px solid gray;
  37. }
  38. #menu li {
  39. text-align: center;
  40. background: #ff00ff;
  41. }
  42. #menu li a, #menu dt a {
  43. color: #000000;
  44. text-decoration: none;
  45. display: block;
  46. height: 100%;
  47. border: 0 none;
  48. }
  49. #menu li a:hover, #menu li a:focus, #menu dt a:hover, #menu dt a:focus {
  50. background: #eee;
  51. }
  52. #site {
  53. position: absolute;
  54. z-index: 1;
  55. top : 70px;
  56. left : 10px;
  57. color: #000;
  58. background-color: #ddd;
  59. padding: 5px;
  60. border: 1px solid gray;
  61. }
  62. -->
  63. </style>
  64.  
Jan 17 '09 #1
6 3298
Without the HTML to see it's a little hard to see what you're working with???

Is this supposed to be a horizontal menu like on a web site? I can't tell, it's in a dl which is weird and the dd's are gone.

Remove the HTML comments inside your CSS-- they are HTML not CSS (I mean the <!-- stuff). It has nothing to do with your problem but they do not belong there : )

If this IS supposed to look like a horizontal menu, you can't use that line-height: 2em thing (when text wraps, it'll be too far apart). You were using that to vertically center the text, right? There are some other ways to do that:

if this were a normal (ul) menu, you could stop wrapping with white-space: nowrap on the anchors. Or you could have floated li's and leave the anchors inline and use vertical-align: middle (though this would mean the clickable area would not be the full size of the li's and I see you've set them to display: block). OR you could use display: table so you can have all that vertical cenering with blocky anchors, but this doesn't work in IE (under 8). So IE would still get floats.
Or you could try display: inline-block but sometimes this looks worse with wrapping so you'd have to be able to use white-space: nowrap at the same time.

So many options, all depending on what you are making. A definition list is not the appropriate element for a menu-style list, but rather a list of related pairs of things (like... terms and definitions? Questions and answers? Categories and subgroups? Names and phone numbers?) but if this is a navigation menu it should be a ul, li, a setup.

In any case, the height of the menu should change dynamically-- IF you didn't set a set height (this is something to avoid most of the time anyway) and IF you enclosed your floats (the container otherwise wouldn't grow just because its floats did, except maybe in IE).

A word of warning, you are stringing a noose around your neck with all that absolute and relative positioning. Your page is very brittle. It needs to bend like the bamboo, not break like the stick. Something along the way WILL bite you.

Sorry I couldn't help more,
poes
Jan 17 '09 #2
drhowarddrfine
7,435 Expert 4TB
Hello Stomme poes. .
Jan 18 '09 #3
happyse27
236 100+
hello all,

Thanks man.. it certainly helped for the notes above.. cheers..

However, I tried with another method, below is codes

included height: 2.4em; in dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
height: 2.4em;
}


best Rgds,
Andrew

Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="XHTML namespace">
  3. <head>
  4. </head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  6. <title></title>
  7. <style type="text/css" media="screen">
  8. <!--
  9. body {
  10. margin: 0;
  11. padding: 0;
  12. background: white;
  13. font: 80% verdana, arial, sans-serif;
  14. }
  15. dl, dt, dd, ul, li {
  16. margin: 0;
  17. padding: 0;
  18. list-style-type: none;
  19. height: 2.4em;
  20. }
  21. #menu {
  22. position: relative; /* Menu position that can be changed at will */
  23. top: 0;
  24. left: 0;
  25. z-index:100;
  26. width: 100%; /* precision for Opera */
  27. }
  28. #menu dl {
  29. float: left;
  30. width: 9em;
  31. }
  32.  
  33. #menu dt {
  34. cursor: pointer;
  35. text-align: center;
  36. font-weight: bold;
  37. background: #ff00ff;
  38. border: 1px solid gray;
  39. color:#fff;
  40. margin: 1px;
  41. }
  42. #menu dd {
  43. display: none;
  44. border: 1px ;
  45. }
  46. #menu li {
  47. text-align: center;
  48. background: #fff;
  49. }
  50. #menu li a, #menu dt a {
  51. color: #000000;
  52. text-decoration: none;
  53. display: block;
  54. height: 100%;
  55. border: 0 none;
  56. }
  57. #menu li a:hover, #menu li a:focus, #menu dt a:hover, #menu dt a:focus {
  58. background: #ff33ff;
  59. }
  60. #site {
  61. position: absolute;
  62. z-index: 1;
  63. top : 70px;
  64. left : 10px;
  65. color: #000;
  66. background-color: #ddd;
  67. padding: 5px;
  68. border: 1px purple;
  69. }
  70. -->
  71. </style>
  72.  
  73.  
  74. <script type="text/javascript">
  75. <!--
  76. window.onload=show;
  77. function show(id) {
  78. var d = document.getElementById(id);
  79.  for (var i = 1; i<=2100; i++) {
  80.   if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
  81.  }
  82. if (d) {d.style.display='block';}
  83. }
  84. //-->
  85. </script>
  86.  
  87.  
  88.  
  89.  
  90. <b>
  91.  
  92. <body bgcolor="#FFFFFF" text="#000000">
  93. <div id="bv_Shape1" style="position:absolute;left:166px;top:216px;width:928px;height:600px;z-index:0" align="center">
  94. <img src="pink.jpg" id="Shape1" align="top" alt="" title="" border="0" width="928" height="590"></div>
  95. <div id="bv_Image1" style="overflow:hidden;position:absolute;left:168px;top:0px;z-index:1" align="left">
  96. <img src="top_bg.jpg" id="Image1" alt="" align="top" border="0" style="width:924px;height:178px;"></div>
  97. <div id="bv_TextMenu1" style="position:absolute;left:813px;top:13px;width:78px;height:18px;z-index:2" align="center">
  98. <font style="font-size:13px;" color="#000000" face="Arial">
  99. [<a href="http://127.0.0.1/contact.html" title="Click Here to see the reference">Contact Us</a>]</font></div>
  100. <div id="bv_Text1" style="position:absolute;left:901px;top:13px;width:7px;height:16px;z-index:3" align="left">
  101. <font style="font-size:13px" color="#0000FF" face="Arial">|</font></div>
  102. <div id="bv_TextMenu2" style="position:absolute;left:919px;top:13px;width:67px;height:34px;z-index:4" align="center">
  103. <font style="font-size:13px;" color="#000000" face="Arial">
  104. [<a href="http://127.0.0.1/feedback.html" title="Click Here to see the feedback">Feedback</a>]</font></div>
  105. <div id="bv_Text2" style="position:absolute;left:1012px;top:13px;width:6px;height:16px;z-index:5" align="left">
  106. <font style="font-size:13px" color="#0000FF" face="Arial">|</font></div>
  107. <div id="bv_TextMenu3" style="position:absolute;left:996px;top:14px;width:102px;height:18px;z-index:6" align="center">
  108. <font style="font-size:13px;" color="#000000" face="Arial">
  109. [<a href="http://127.0.0.1/sitemap.html" title="Click Here to see the Site Map">Site Map</a>]</font></div>
  110. <div id="bv_Text6" style="position:absolute;left:512px;top:25px;width:150px;height:31px;z-index:7" align="left">
  111. <font style="font-size:13px" color="#000000" face="Arial">Chinese Version<br>
  112. </font></div>
  113. <div id="bv_Image6" style="overflow:hidden;position:absolute;left:464px;top:1px;z-index:8" align="left">
  114. <a href="http://www.spatec.com.sg/chinese/"><img   src="lang_ch.gif" id="Image6" alt="" align="top" border="0" style="width:127px;height:54px;"></a></div>
  115. <div id="bv_Image7" style="overflow:hidden;position:absolute;left:602px;top:0px;z-index:9" align="left">
  116. <a href="http://www.spatec.com.sg/vietnam/"><img   src="lang_vi.gif" id="Image7" alt="" align="top" border="0" style="width:127px;height:54px;"></a></div>
  117. <select name="tab" size="1" id="Combobox1" style="position:absolute;left:922px;top:64px;width:150px;font-family:Courier New;font-size:16px;z-index:10">
  118. <option value="http://www.spatec.com.sg">Spatec</option>
  119. <option value="http://www.sensori-intl.com/">Senori</option>
  120. </select>
  121. <div id="bv_Image2" style="overflow:hidden;position:absolute;left:0px;top:0px;z-index:11" align="left">
  122. <img src="mid_bg.jpg" id="Image2" alt="" align="top" border="0" style="width:168px;height:786px;"></div>
  123. <div id="bv_Image3" style="overflow:hidden;position:absolute;left:1092px;top:0px;z-index:12" align="left">
  124. <img src="mid_bg.jpg" id="Image3" alt="" align="top" border="0" style="width:214px;height:786px;"></div>
  125. <div id="bv_Text7" style="position:absolute;left:140px;top:939px;width:920px;height:15px;z-index:13" align="center">
  126. &nbsp;</div>
  127. <div id="menu" style="position:absolute;left:169px;top:180px; align="center";>
  128.  
  129.  <dl>
  130.   <dt onmouseover="javascript:show('smenu1');">Home</dt>
  131.    <dd id="smenu1">
  132.     <ul>
  133.       <li><a href="http://127.0.0.1/gra_photos.html">Graduates</a></li>
  134.       <li><a href="http://127.0.0.1/news.html">Photo</a></li>
  135.                <li><a href="http://127.0.0.1/promotion.html">Promotions</a></li>
  136.     </ul>
  137.    </dd>
  138.  </dl>
  139.  
  140.  <dl>
  141.   <dt onmouseover="javascript:show('smenu2');">About SPAtec</dt>
  142.   <dd id="smenu2">
  143.       <ul>
  144.        <li><a href="http://127.0.0.1/welcome_msg.html">Welcome</a></li>
  145.           <li><a href="http://127.0.0.1/vision.html">Vision & Mission</a></li>
  146.           <li><a href="http://127.0.0.1/com_background.html">Company Business</a></li>
  147.                         <li><a href="http://127.0.0.1/com_facilities.html...lities</a></li>
  148.       </ul>
  149.    </dd>
  150.  </dl>
  151.  <dl>
  152.   <dt onmouseover="javascript:show('smenu3');">Training and Education</dt>
  153.    <dd id="smenu3">
  154.     <ul>
  155.       <li><a href="http://127.0.0.1/courses.html">Courses</a></li>
  156.       <li><a href="http://127.0.0.1/certification.html"...cation</a></li>
  157.                 <li><a href="http://127.0.0.1/promotion.html">Promotions</a></li>
  158.     </ul>
  159.    </dd>
  160.  </dl>
  161.  <dl>
  162.   <dt onmouseover="javascript:show('smenu4');">Trainers</dt>
  163.    <dd id="smenu4">
  164.     <ul>
  165.      <li><a href="http://127.0.0.1/trainer.html">Trainer's Profile</a></li>
  166.     </ul>
  167.    </dd>
  168.  </dl>
  169.  <dl>
  170.    <dt onmouseover="javascript:show('smenu5');">Student Information</dt>
  171.    <dd id="smenu5">
  172.      <ul>
  173.       <li><a href="http://127.0.0.1/student.html">CaseTrust</a></li>
  174.              <li><a href="http://127.0.0.1/sps.pdf">International Student Protection Scheme</a></li>
  175.              <li><a href="http://127.0.0.1/master.html">Master Escrow Agreement</a></li>
  176.              <li><a href="http://127.0.0.1/c_funding.html">SDF</a></li>
  177.             <li><a href="http://127.0.0.1/app_procedures.html">SRP</a></li>
  178.             <li><a href="http://127.0.0.1/amp07/web">AMP</a></li>
  179.             <li><a href="http://127.0.0.1/asp/index.asp">STB</a></li>
  180.             <li><a href="http://127.0.0.1/testimonial.html">Testimonal</a></li>
  181.             <li><a href="http://127.0.0.1/gra_photos.html">Graduates</a></li>
  182.             <li><a href="http://127.0.0.1/stu_services.html">Student Services</a></li>
  183.      </ul>
  184.    </dd>
  185.  </dl>
  186.   <dl>
  187.    <dt onmouseover="javascript:show('smenu6');">Enrolment</dt>
  188.     <dd id="smenu6">
  189.      <ul>
  190.       <li><a href="http://127.0.0.1/registration.html">Online Registration</a></li>
  191.      </ul>
  192.     </dd>
  193.  </dl>
  194.   <dl>
  195.    <dt onmouseover="javascript:show('smenu7');">Career Development</dt>
  196.     <dd id="smenu7">
  197.      <ul>
  198.       <li><a href="http://127.0.0.1/career.html">Job Opportunities</a></li>
  199.      </ul>
  200.     </dd>
  201.  </dl>
  202.   <dl>
  203.    <dt onmouseover="javascript:show('smenu8');">links to Websites</dt>
  204.     <dd id="smenu8">
  205.      <ul>
  206.       <li><a href="http://127.0.0.1/">Links</a></li>
  207.      </ul>
  208.     </dd>
  209.  </dl>
  210. </div>
  211.  
  212.  
  213. <div  id="bv_Text3" style="position:absolute;left:316px;top:261px;width:723px;height:48px;z-index:14" align="left">
  214. <font  style="font-size:13px" color="#000000" face="Arial"><b><u>Graduates Photos</u><br>
  215. <br>
  216. Graduates of 1st IFA Diploma in Aromatherapy</b></font></div>
  217. <div  id="bv_Image4" style="overflow:hidden;position:absolute;left:316px;top:312px;z-index:15" align="left">
  218. <img   src="gra_1.jpg" id="Image4" alt="" align="top" border="0" style="width:620px;height:315px;"></div>
  219. <div  id="bv_Image8" style="overflow:hidden;position:absolute;left:168px;top:631px;z-index:16" align="left">
  220. <img   src="bottom_bg.jpg" id="Image8" alt="" align="top" border="0" style="width:924px;height:84px;"></div>
  221. <div  id="bv_Image5" style="overflow:hidden;position:absolute;left:424px;top:719px;z-index:17" align="left">
  222. <img   src="link1.jpg" id="Image5" alt="" align="top" border="0" style="width:364px;height:60px;"></div>
  223. <div  id="bv_Text4" style="position:absolute;left:497px;top:669px;width:407px;height:91px;z-index:18" align="left">
  224. <font style="font-size:16px" color="#000000" face="Times New Roman">Copyright © 2008 <b>SPATEC PTE LTD</b><br>
  225. Designed by Goldbiztrading Andrew Se<br>
  226. <br>
  227. <br>
  228. </font></div>
  229. <div id="bv_TextMenu5" style="position:absolute;left:194px;top:643px;width:27px;height:26px;z-index:19" align="center">
  230. <font style="font-size:9.3px;" color="#000000" face="Arial">
  231. <a href="Spatec training and education centre" title="Click Here to see the reference">Home</a></font></div>
  232. <div id="bv_Text8" style="position:absolute;left:225px;top:639px;width:9px;height:16px;z-index:20" align="left">
  233. <font style="font-size:13px" color="#0000FF" face="Arial">|</font></div>
  234. <div id="bv_TextMenu4" style="position:absolute;left:233px;top:643px;width:61px;height:14px;z-index:21" align="center">
  235. <font style="font-size:9.3px;" color="#000000" face="Arial">
  236. <a href="Spatec" title="Click Here to see the feedback">About Spatec</a></font></div>
  237. <div id="bv_Text5" style="position:absolute;left:298px;top:640px;width:6px;height:16px;z-index:22" align="left">
  238. <font style="font-size:13px" color="#0000FF" face="Arial">|</font></div>
  239. <div id="bv_TextMenu7" style="position:absolute;left:300px;top:644px;width:101px;height:14px;z-index:23" align="center">
  240. <font style="font-size:9.3px;" color="#000000" face="Arial">
  241. <a href="Spatec training and education centre" title="Click Here to see the reference">Training & Education</a></font></div>
  242. <div id="bv_Text9" style="position:absolute;left:402px;top:641px;width:7px;height:16px;z-index:24" align="left">
  243. <font style="font-size:13px" color="#0000FF" face="Arial">|</font></div>
  244. <div id="bv_TextMenu6" style="position:absolute;left:417px;top:644px;width:35px;height:26px;z-index:25" align="center">
  245. <font style="font-size:9.3px;" color="#000000" face="Arial">
  246. <a href="Spatec training and education centre" title="Click Here to see the reference">Trainers</a></font></div>
  247. <div id="bv_Text10" style="position:absolute;left:462px;top:642px;width:7px;height:16px;z-index:26" align="left">
  248. <font style="font-size:13px" color="#0000FF" face="Arial">|</font></div>
  249. <div id="bv_TextMenu9" style="position:absolute;left:472px;top:645px;width:93px;height:14px;z-index:27" align="center">
  250. <font style="font-size:9.3px;" color="#000000" face="Arial">
  251. <a href="Untitled Document" title="Click Here to see the feedback">Student Information</a></font></div>
  252. <div id="bv_Text11" style="position:absolute;left:570px;top:642px;width:6px;height:16px;z-index:28" align="left">
  253. <font style="font-size:13px" color="#0000FF" face="Arial">|</font></div>
  254. <div id="bv_TextMenu8" style="position:absolute;left:583px;top:645px;width:44px;height:26px;z-index:29" align="center">
  255. <font style="font-size:9.3px;" color="#000000" face="Arial">
  256. <a href="SPAtec" title="Click Here to see the Site Map">Enrolment</a></font></div>
  257. <div id="bv_Text12" style="position:absolute;left:637px;top:641px;width:6px;height:16px;z-index:30" align="left">
  258. <font style="font-size:13px" color="#0000FF" face="Arial">|</font></div>
  259. <div id="bv_TextMenu11" style="position:absolute;left:638px;top:646px;width:124px;height:14px;z-index:31" align="center">
  260. <font style="font-size:9.3px;" color="#000000" face="Arial">
  261. <a href="ttp://www.spatec.com.sg/career.html" title="Click Here to see the reference">Career Development</a></font></div>
  262. <div id="bv_Text13" style="position:absolute;left:756px;top:642px;width:7px;height:16px;z-index:32" align="left">
  263. <font style="font-size:13px" color="#0000FF" face="Arial">|</font></div>
  264. <div id="bv_TextMenu10" style="position:absolute;left:767px;top:646px;width:56px;height:14px;z-index:33" align="center">
  265. <font style="font-size:9.3px;" color="#000000" face="Arial">
  266. <a href="SPAtec" title="Click Here to see the feedback">Contact Us</a></font></div>
  267. <div id="bv_Text14" style="position:absolute;left:825px;top:643px;width:6px;height:16px;z-index:34" align="left">
  268. <font style="font-size:13px" color="#0000FF" face="Arial">|</font></div>
  269. <div id="bv_TextMenu12" style="position:absolute;left:837px;top:647px;width:47px;height:14px;z-index:35" align="center">
  270. <font style="font-size:9.3px;" color="#000000" face="Arial">
  271. <a href="http://127.0.0.1/feedback.html" title="Click Here to see the feedback">Feedback</a></font></div>
  272. <div id="bv_Text16" style="position:absolute;left:892px;top:644px;width:6px;height:16px;z-index:36" align="left">
  273. <font style="font-size:13px" color="#0000FF" face="Arial">|</font></div>
  274. <div id="bv_TextMenu13" style="position:absolute;left:903px;top:648px;width:43px;height:14px;z-index:37" align="center">
  275. <font style="font-size:9.3px;" color="#000000" face="Arial">
  276. <a href="http://127.0.0.1/sitemap.html" title="Click Here to see the Site Map">Site Map</a></font></div>
  277. <div id="bv_Text15" style="position:absolute;left:952px;top:646px;width:6px;height:16px;z-index:38" align="left">
  278. <font style="font-size:13px" color="#0000FF" face="Arial">|</font></div>
  279. <div id="bv_TextMenu15" style="position:absolute;left:958px;top:649px;width:102px;height:14px;z-index:39" align="center">
  280. <font style="font-size:9.3px;" color="#000000" face="Arial">
  281. <a href="SPAtec" title="Click Here to see the Site Map">Terms and Conditions</a></font></div>
  282.  
  283. </b>
  284. </body>
  285. </html>
  286.  
  287.  
Jan 18 '09 #4
happyse27
236 100+
latest code without dropdown submenu border issue... cheers...

Expand|Select|Wrap|Line Numbers
  1.  
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="XHTML namespace">
  4. <head>
  5. </head>
  6. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  7. <title></title>
  8. <style type="text/css" media="screen">
  9. <!--
  10. body {
  11. margin: 0;
  12. padding: 0;
  13. background: white;
  14. font: 80% verdana, arial, sans-serif;
  15. }
  16. dl, dt, dd, ul, li {
  17. margin: 0;
  18. padding: 0;
  19. list-style-type: none;
  20. height: 2.5em;
  21. }
  22. #menu {
  23. position: relative; /* Menu position that can be changed at will */
  24. top: 0;
  25. left: 0;
  26. z-index:100;
  27. width: 100%; /* precision for Opera */
  28. }
  29. #menu dl {
  30. float: left;
  31. width: 9em;
  32. }
  33.  
  34. #menu dt {
  35. cursor: pointer;
  36. text-align: center;
  37. font-weight: bold;
  38. background: #ff00ff;
  39. border: 1px solid gray;
  40. color:#fff;
  41. margin: 1px;
  42. }
  43. #menu dd {
  44. display: none;
  45. border: 0px ;
  46. height : 1.6em;
  47.  
  48. }
  49. #menu li {
  50. text-align: center;
  51. background: #fff;
  52. height : 1.6em;
  53. }
  54. #menu li a, #menu dt a {
  55. color: #000000;
  56. text-decoration: none;
  57. display: block;
  58. height: 100%;
  59. border: 0 none;
  60. }
  61. #menu li a:hover, #menu li a:focus, #menu dt a:hover, #menu dt a:focus {
  62. background: #ff33ff;
  63. height : 1.6em;
  64. }
  65. #site {
  66. position: absolute;
  67. z-index: 1;
  68. top : 70px;
  69. left : 10px;
  70. color: #000;
  71. background-color: #ddd;
  72. padding: 5px;
  73. border: 1px purple;
  74. }
  75. -->
  76. </style>
  77.  
  78.  
  79. <script type="text/javascript">
  80. <!--
  81. window.onload=show;
  82. function show(id) {
  83. var d = document.getElementById(id);
  84.  for (var i = 1; i<=2100; i++) {
  85.   if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
  86.  }
  87. if (d) {d.style.display='block';}
  88. }
  89. //-->
  90. </script>
  91.  
  92.  
  93.  
  94.  
  95. <b>
  96.  
  97. <body bgcolor="#FFFFFF" text="#000000">
  98. <div id="bv_Shape1" style="position:absolute;left:166px;top:216px;width:928px;height:600px;z-index:0" align="center">
  99. <img src="pink.jpg" id="Shape1" align="top" alt="" title="" border="0" width="928" height="590"></div>
  100. <div id="bv_Image1" style="overflow:hidden;position:absolute;left:168px;top:0px;z-index:1" align="left">
  101. <img src="top_bg.jpg" id="Image1" alt="" align="top" border="0" style="width:924px;height:178px;"></div>
  102. <div id="bv_TextMenu1" style="position:absolute;left:813px;top:13px;width:78px;height:18px;z-index:2" align="center">
  103. <font style="font-size:13px;" color="#000000" face="Arial">
  104. [<a href="http://127.0.0.1/contact.html" title="Click Here to see the reference">Contact Us</a>]</font></div>
  105. <div id="bv_Text1" style="position:absolute;left:901px;top:13px;width:7px;height:16px;z-index:3" align="left">
  106. <font style="font-size:13px" color="#0000FF" face="Arial">|</font></div>
  107. <div id="bv_TextMenu2" style="position:absolute;left:919px;top:13px;width:67px;height:34px;z-index:4" align="center">
  108. <font style="font-size:13px;" color="#000000" face="Arial">
  109. [<a href="http://127.0.0.1/feedback.html" title="Click Here to see the feedback">Feedback</a>]</font></div>
  110. <div id="bv_Text2" style="position:absolute;left:1012px;top:13px;width:6px;height:16px;z-index:5" align="left">
  111. <font style="font-size:13px" color="#0000FF" face="Arial">|</font></div>
  112. <div id="bv_TextMenu3" style="position:absolute;left:996px;top:14px;width:102px;height:18px;z-index:6" align="center">
  113. <font style="font-size:13px;" color="#000000" face="Arial">
  114. [<a href="http://127.0.0.1/sitemap.html" title="Click Here to see the Site Map">Site Map</a>]</font></div>
  115. <div id="bv_Text6" style="position:absolute;left:512px;top:25px;width:150px;height:31px;z-index:7" align="left">
  116. <font style="font-size:13px" color="#000000" face="Arial">Chinese Version<br>
  117. </font></div>
  118. <div id="bv_Image6" style="overflow:hidden;position:absolute;left:464px;top:1px;z-index:8" align="left">
  119. <a href="http://www.spatec.com.sg/chinese/"><img   src="lang_ch.gif" id="Image6" alt="" align="top" border="0" style="width:127px;height:54px;"></a></div>
  120. <div id="bv_Image7" style="overflow:hidden;position:absolute;left:602px;top:0px;z-index:9" align="left">
  121. <a href="http://www.spatec.com.sg/vietnam/"><img   src="lang_vi.gif" id="Image7" alt="" align="top" border="0" style="width:127px;height:54px;"></a></div>
  122. <select name="tab" size="1" id="Combobox1" style="position:absolute;left:922px;top:64px;width:150px;font-family:Courier New;font-size:16px;z-index:10">
  123. <option value="http://www.spatec.com.sg">Spatec</option>
  124. <option value="http://www.sensori-intl.com/">Senori</option>
  125. </select>
  126. <div id="bv_Image2" style="overflow:hidden;position:absolute;left:0px;top:0px;z-index:11" align="left">
  127. <img src="mid_bg.jpg" id="Image2" alt="" align="top" border="0" style="width:168px;height:786px;"></div>
  128. <div id="bv_Image3" style="overflow:hidden;position:absolute;left:1092px;top:0px;z-index:12" align="left">
  129. <img src="mid_bg.jpg" id="Image3" alt="" align="top" border="0" style="width:214px;height:786px;"></div>
  130. <div id="bv_Text7" style="position:absolute;left:140px;top:939px;width:920px;height:15px;z-index:13" align="center">
  131. &nbsp;</div>
  132. <div id="menu" style="position:absolute;left:169px;top:180px; align="center";>
  133.  
  134.  <dl>
  135.   <dt onmouseover="javascript:show('smenu1');">Home</dt>
  136.    <dd id="smenu1">
  137.     <ul>
  138.       <li><a href="http://127.0.0.1/gra_photos.html">Graduates</a></li>
  139.       <li><a href="http://127.0.0.1/news.html">Photo</a></li>
  140.                <li><a href="http://127.0.0.1/promotion.html">Promotions</a></li>
  141.     </ul>
  142.    </dd>
  143.  </dl>
  144.  
  145.  <dl>
  146.   <dt onmouseover="javascript:show('smenu2');">About SPAtec</dt>
  147.   <dd id="smenu2">
  148.       <ul>
  149.        <li><a href="http://127.0.0.1/welcome_msg.html">Welcome</a></li>
  150.           <li><a href="http://127.0.0.1/vision.html">Vision & Mission</a></li>
  151.           <li><a href="http://127.0.0.1/com_background.html">Company Business</a></li>
  152.                         <li><a href="http://127.0.0.1/com_facilities.html...lities</a></li>
  153.       </ul>
  154.    </dd>
  155.  </dl>
  156.  <dl>
  157.   <dt onmouseover="javascript:show('smenu3');">Training and Education</dt>
  158.    <dd id="smenu3">
  159.     <ul>
  160.       <li><a href="http://127.0.0.1/courses.html">Courses</a></li>
  161.       <li><a href="http://127.0.0.1/certification.html"...cation</a></li>
  162.                 <li><a href="http://127.0.0.1/promotion.html">Promotions</a></li>
  163.     </ul>
  164.    </dd>
  165.  </dl>
  166.  <dl>
  167.   <dt onmouseover="javascript:show('smenu4');">Trainers</dt>
  168.    <dd id="smenu4">
  169.     <ul>
  170.      <li><a href="http://127.0.0.1/trainer.html">Trainer's Profile</a></li>
  171.     </ul>
  172.    </dd>
  173.  </dl>
  174.  <dl>
  175.    <dt onmouseover="javascript:show('smenu5');">Student Information</dt>
  176.    <dd id="smenu5">
  177.      <ul>
  178.       <li><a href="http://127.0.0.1/student.html">CaseTrust</a></li>
  179.              <li><a href="http://127.0.0.1/sps.pdf">International Student Protection Scheme</a></li>
  180.              <li><a href="http://127.0.0.1/master.html">Master Escrow Agreement</a></li>
  181.              <li><a href="http://127.0.0.1/c_funding.html">SDF</a></li>
  182.             <li><a href="http://127.0.0.1/app_procedures.html">SRP</a></li>
  183.             <li><a href="http://127.0.0.1/amp07/web">AMP</a></li>
  184.             <li><a href="http://127.0.0.1/asp/index.asp">STB</a></li>
  185.             <li><a href="http://127.0.0.1/testimonial.html">Testimonal</a></li>
  186.             <li><a href="http://127.0.0.1/gra_photos.html">Graduates</a></li>
  187.             <li><a href="http://127.0.0.1/stu_services.html">Student Services</a></li>
  188.      </ul>
  189.    </dd>
  190.  </dl>
  191.   <dl>
  192.    <dt onmouseover="javascript:show('smenu6');">Enrolment</dt>
  193.     <dd id="smenu6">
  194.      <ul>
  195.       <li><a href="http://127.0.0.1/registration.html">Online Registration</a></li>
  196.      </ul>
  197.     </dd>
  198.  </dl>
  199.   <dl>
  200.    <dt onmouseover="javascript:show('smenu7');">Career Development</dt>
  201.     <dd id="smenu7">
  202.      <ul>
  203.       <li><a href="http://127.0.0.1/career.html">Job Opportunities</a></li>
  204.      </ul>
  205.     </dd>
  206.  </dl>
  207.   <dl>
  208.    <dt onmouseover="javascript:show('smenu8');">links to Websites</dt>
  209.     <dd id="smenu8">
  210.      <ul>
  211.       <li><a href="http://127.0.0.1/">Links</a></li>
  212.      </ul>
  213.     </dd>
  214.  </dl>
  215. </div>
  216.  
  217.  
  218. <div  id="bv_Text3" style="position:absolute;left:316px;top:261px;width:723px;height:48px;z-index:14" align="left">
  219. <font  style="font-size:13px" color="#000000" face="Arial"><b><u>Graduates Photos</u><br>
  220. <br>
  221. Graduates of 1st IFA Diploma in Aromatherapy</b></font></div>
  222. <div  id="bv_Image4" style="overflow:hidden;position:absolute;left:316px;top:312px;z-index:15" align="left">
  223. <img   src="gra_1.jpg" id="Image4" alt="" align="top" border="0" style="width:620px;height:315px;"></div>
  224. <div  id="bv_Image8" style="overflow:hidden;position:absolute;left:168px;top:631px;z-index:16" align="left">
  225. <img   src="bottom_bg.jpg" id="Image8" alt="" align="top" border="0" style="width:924px;height:84px;"></div>
  226. <div  id="bv_Image5" style="overflow:hidden;position:absolute;left:424px;top:719px;z-index:17" align="left">
  227. <img   src="link1.jpg" id="Image5" alt="" align="top" border="0" style="width:364px;height:60px;"></div>
  228. <div  id="bv_Text4" style="position:absolute;left:497px;top:669px;width:407px;height:91px;z-index:18" align="left">
  229. <font style="font-size:16px" color="#000000" face="Times New Roman">Copyright © 2008 <b>SPATEC PTE LTD</b><br>
  230. Designed by Goldbiztrading Andrew Se<br>
  231. <br>
  232. <br>
  233. </font></div>
  234. <div id="bv_TextMenu5" style="position:absolute;left:194px;top:643px;width:27px;height:26px;z-index:19" align="center">
  235. <font style="font-size:9.3px;" color="#000000" face="Arial">
  236. <a href="Spatec training and education centre" title="Click Here to see the reference">Home</a></font></div>
  237. <div id="bv_Text8" style="position:absolute;left:225px;top:639px;width:9px;height:16px;z-index:20" align="left">
  238. <font style="font-size:13px" color="#0000FF" face="Arial">|</font></div>
  239. <div id="bv_TextMenu4" style="position:absolute;left:233px;top:643px;width:61px;height:14px;z-index:21" align="center">
  240. <font style="font-size:9.3px;" color="#000000" face="Arial">
  241. <a href="Spatec" title="Click Here to see the feedback">About Spatec</a></font></div>
  242. <div id="bv_Text5" style="position:absolute;left:298px;top:640px;width:6px;height:16px;z-index:22" align="left">
  243. <font style="font-size:13px" color="#0000FF" face="Arial">|</font></div>
  244. <div id="bv_TextMenu7" style="position:absolute;left:300px;top:644px;width:101px;height:14px;z-index:23" align="center">
  245. <font style="font-size:9.3px;" color="#000000" face="Arial">
  246. <a href="Spatec training and education centre" title="Click Here to see the reference">Training & Education</a></font></div>
  247. <div id="bv_Text9" style="position:absolute;left:402px;top:641px;width:7px;height:16px;z-index:24" align="left">
  248. <font style="font-size:13px" color="#0000FF" face="Arial">|</font></div>
  249. <div id="bv_TextMenu6" style="position:absolute;left:417px;top:644px;width:35px;height:26px;z-index:25" align="center">
  250. <font style="font-size:9.3px;" color="#000000" face="Arial">
  251. <a href="Spatec training and education centre" title="Click Here to see the reference">Trainers</a></font></div>
  252. <div id="bv_Text10" style="position:absolute;left:462px;top:642px;width:7px;height:16px;z-index:26" align="left">
  253. <font style="font-size:13px" color="#0000FF" face="Arial">|</font></div>
  254. <div id="bv_TextMenu9" style="position:absolute;left:472px;top:645px;width:93px;height:14px;z-index:27" align="center">
  255. <font style="font-size:9.3px;" color="#000000" face="Arial">
  256. <a href="Untitled Document" title="Click Here to see the feedback">Student Information</a></font></div>
  257. <div id="bv_Text11" style="position:absolute;left:570px;top:642px;width:6px;height:16px;z-index:28" align="left">
  258. <font style="font-size:13px" color="#0000FF" face="Arial">|</font></div>
  259. <div id="bv_TextMenu8" style="position:absolute;left:583px;top:645px;width:44px;height:26px;z-index:29" align="center">
  260. <font style="font-size:9.3px;" color="#000000" face="Arial">
  261. <a href="SPAtec" title="Click Here to see the Site Map">Enrolment</a></font></div>
  262. <div id="bv_Text12" style="position:absolute;left:637px;top:641px;width:6px;height:16px;z-index:30" align="left">
  263. <font style="font-size:13px" color="#0000FF" face="Arial">|</font></div>
  264. <div id="bv_TextMenu11" style="position:absolute;left:638px;top:646px;width:124px;height:14px;z-index:31" align="center">
  265. <font style="font-size:9.3px;" color="#000000" face="Arial">
  266. <a href="ttp://www.spatec.com.sg/career.html" title="Click Here to see the reference">Career Development</a></font></div>
  267. <div id="bv_Text13" style="position:absolute;left:756px;top:642px;width:7px;height:16px;z-index:32" align="left">
  268. <font style="font-size:13px" color="#0000FF" face="Arial">|</font></div>
  269. <div id="bv_TextMenu10" style="position:absolute;left:767px;top:646px;width:56px;height:14px;z-index:33" align="center">
  270. <font style="font-size:9.3px;" color="#000000" face="Arial">
  271. <a href="SPAtec" title="Click Here to see the feedback">Contact Us</a></font></div>
  272. <div id="bv_Text14" style="position:absolute;left:825px;top:643px;width:6px;height:16px;z-index:34" align="left">
  273. <font style="font-size:13px" color="#0000FF" face="Arial">|</font></div>
  274. <div id="bv_TextMenu12" style="position:absolute;left:837px;top:647px;width:47px;height:14px;z-index:35" align="center">
  275. <font style="font-size:9.3px;" color="#000000" face="Arial">
  276. <a href="http://127.0.0.1/feedback.html" title="Click Here to see the feedback">Feedback</a></font></div>
  277. <div id="bv_Text16" style="position:absolute;left:892px;top:644px;width:6px;height:16px;z-index:36" align="left">
  278. <font style="font-size:13px" color="#0000FF" face="Arial">|</font></div>
  279. <div id="bv_TextMenu13" style="position:absolute;left:903px;top:648px;width:43px;height:14px;z-index:37" align="center">
  280. <font style="font-size:9.3px;" color="#000000" face="Arial">
  281. <a href="http://127.0.0.1/sitemap.html" title="Click Here to see the Site Map">Site Map</a></font></div>
  282. <div id="bv_Text15" style="position:absolute;left:952px;top:646px;width:6px;height:16px;z-index:38" align="left">
  283. <font style="font-size:13px" color="#0000FF" face="Arial">|</font></div>
  284. <div id="bv_TextMenu15" style="position:absolute;left:958px;top:649px;width:102px;height:14px;z-index:39" align="center">
  285. <font style="font-size:9.3px;" color="#000000" face="Arial">
  286. <a href="SPAtec" title="Click Here to see the Site Map">Terms and Conditions</a></font></div>
  287.  
  288. </b>
  289. </body>
  290. </html>
  291.  
Jan 19 '09 #5
happyse27
236 100+
Hi All,

I got a problem, the submenu did drop down successfully, but the submenu border was too wide and the wordings highlight did not cover completely the border, which does not look too good in GUI... cheers..

Kindly assist.


Cheers...

Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="XHTML namespace">
  3. <head>
  4. </head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  6. <title></title>
  7. <style type="text/css" media="screen">
  8. <!--
  9. body {
  10. margin: 0;
  11. padding: 0;
  12. background: white;
  13. font: 80% verdana, arial, sans-serif;
  14. }
  15. dl, dt, dd, ul, li {
  16. margin: 0;
  17. padding: 0;
  18. list-style-type: none;
  19. height: 2.7em;
  20. }
  21. #menu {
  22. position: relative; /* Menu position that can be changed at will */
  23. top: 0;
  24. left: 0;
  25. z-index:100;
  26. width: 100%; /* precision for Opera */
  27. }
  28. #menu dl {
  29. float: left;
  30. width: 9em;
  31. }
  32.  
  33. #menu dt {
  34. cursor: pointer;
  35. text-align: center;
  36. font-weight: bold;
  37. background: #ff00ff;
  38. border: 1px solid gray;
  39. color:#fff;
  40. margin: 1px;
  41. }
  42. #menu dd {
  43. display: none;
  44. height: auto;
  45. border: 1px solid gray;
  46. color:#fff;
  47. margin: 1px;
  48.  
  49. }
  50. #menu li {
  51. text-align: center;
  52. background: #fff;
  53. height : 1.6em;
  54. }
  55. #menu li a, #menu dt a {
  56. color: #000000;
  57. text-decoration: none;
  58. display: block;
  59. height: 100%;
  60.  
  61. }
  62. #menu li a:hover, #menu li a:focus, #menu dt a:hover, #menu dt a:focus {
  63. background: #ff33ff;
  64. height : 1.6em;
  65. }
  66. #site {
  67. position: absolute;
  68. z-index: 1;
  69. top : 70px;
  70. left : 10px;
  71. color: #000;
  72. background-color: #ddd;
  73. padding: 5px;
  74. border: 1px purple;
  75. }
  76. -->
  77. </style>
  78.  
  79.  
  80. <script type="text/javascript">
  81. <!--
  82. window.onload=show;
  83. function show(id) {
  84. var d = document.getElementById(id);
  85.  for (var i = 1; i<=2100; i++) {
  86.   if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
  87.  }
  88. if (d) {d.style.display='block';}
  89. }
  90. //-->
  91. </script>
  92.  
  93.  
  94.  
  95.  
  96. <b>
  97.  
  98. <body bgcolor="#FFFFFF" text="#000000">
  99. <div id="bv_Shape1" style="position:absolute;left:166px;top:216px;width:928px;height:600px;z-index:0" align="center">
  100. <img src="pink.jpg" id="Shape1" align="top" alt="" title="" border="0" width="928" height="590"></div>
  101. <div id="bv_Image1" style="overflow:hidden;position:absolute;left:168px;top:0px;z-index:1" align="left">
  102. <img src="top_bg.jpg" id="Image1" alt="" align="top" border="0" style="width:924px;height:178px;"></div>
  103. <div id="bv_TextMenu1" style="position:absolute;left:813px;top:13px;width:78px;height:18px;z-index:2" align="center">
  104. <font style="font-size:13px;" color="#000000" face="Arial">
  105. [<a href="http://127.0.0.1/contact.html" title="Click Here to see the reference">Contact Us</a>]</font></div>
  106. <div id="bv_Text1" style="position:absolute;left:901px;top:13px;width:7px;height:16px;z-index:3" align="left">
  107. <font style="font-size:13px" color="#0000FF" face="Arial">|</font></div>
  108. <div id="bv_TextMenu2" style="position:absolute;left:919px;top:13px;width:67px;height:34px;z-index:4" align="center">
  109. <font style="font-size:13px;" color="#000000" face="Arial">
  110. [<a href="http://127.0.0.1/feedback.html" title="Click Here to see the feedback">Feedback</a>]</font></div>
  111. <div id="bv_Text2" style="position:absolute;left:1012px;top:13px;width:6px;height:16px;z-index:5" align="left">
  112. <font style="font-size:13px" color="#0000FF" face="Arial">|</font></div>
  113. <div id="bv_TextMenu3" style="position:absolute;left:996px;top:14px;width:102px;height:18px;z-index:6" align="center">
  114. <font style="font-size:13px;" color="#000000" face="Arial">
  115. [<a href="http://127.0.0.1/sitemap.html" title="Click Here to see the Site Map">Site Map</a>]</font></div>
  116. <div id="bv_Text6" style="position:absolute;left:512px;top:25px;width:150px;height:31px;z-index:7" align="left">
  117. <font style="font-size:13px" color="#000000" face="Arial">Chinese Version<br>
  118. </font></div>
  119. <div id="bv_Image6" style="overflow:hidden;position:absolute;left:464px;top:1px;z-index:8" align="left">
  120. <a href="http://www.spatec.com.sg/chinese/"><img   src="lang_ch.gif" id="Image6" alt="" align="top" border="0" style="width:127px;height:54px;"></a></div>
  121. <div id="bv_Image7" style="overflow:hidden;position:absolute;left:602px;top:0px;z-index:9" align="left">
  122. <a href="http://www.spatec.com.sg/vietnam/"><img   src="lang_vi.gif" id="Image7" alt="" align="top" border="0" style="width:127px;height:54px;"></a></div>
  123. <select name="tab" size="1" id="Combobox1" style="position:absolute;left:922px;top:64px;width:150px;font-family:Courier New;font-size:16px;z-index:10">
  124. <option value="http://www.spatec.com.sg">Spatec</option>
  125. <option value="http://www.sensori-intl.com/">Senori</option>
  126. </select>
  127. <div id="bv_Image2" style="overflow:hidden;position:absolute;left:0px;top:0px;z-index:11" align="left">
  128. <img src="mid_bg.jpg" id="Image2" alt="" align="top" border="0" style="width:168px;height:786px;"></div>
  129. <div id="bv_Image3" style="overflow:hidden;position:absolute;left:1092px;top:0px;z-index:12" align="left">
  130. <img src="mid_bg.jpg" id="Image3" alt="" align="top" border="0" style="width:214px;height:786px;"></div>
  131. <div id="bv_Text7" style="position:absolute;left:140px;top:939px;width:920px;height:15px;z-index:13" align="center">
  132. &nbsp;</div>
  133. <div id="menu" style="position:absolute;left:169px;top:180px; align="center";>
  134.  
  135.  <dl>
  136.   <dt onmouseover="javascript:show('smenu1');">Home</dt>
  137.    <dd id="smenu1">
  138.     <ul>
  139.       <li><a href="http://127.0.0.1/gra_photos.html">Graduates</a></li>
  140.       <li><a href="http://127.0.0.1/news.html">Photo</a></li>
  141.                <li><a href="http://127.0.0.1/promotion.html">Promotions</a></li>
  142.     </ul>
  143.    </dd>
  144.  </dl>
  145.  
  146.  <dl>
  147.   <dt onmouseover="javascript:show('smenu2');">About SPAtec</dt>
  148.   <dd id="smenu2">
  149.       <ul>
  150.        <li><a href="http://127.0.0.1/welcome_msg.html">Welcome</a></li>
  151.           <li><a href="http://127.0.0.1/vision.html">Vision & Mission</a></li>
  152.           <li><a href="http://127.0.0.1/com_background.html">Company Business</a></li>
  153.                         <li><a href="http://127.0.0.1/com_facilities.html...lities</a></li>
  154.       </ul>
  155.    </dd>
  156.  </dl>
  157.  <dl>
  158.   <dt onmouseover="javascript:show('smenu3');">Training and Education</dt>
  159.    <dd id="smenu3">
  160.     <ul>
  161.       <li><a href="http://127.0.0.1/courses.html">Courses</a></li>
  162.       <li><a href="http://127.0.0.1/certification.html"...cation</a></li>
  163.                 <li><a href="http://127.0.0.1/promotion.html">Promotions</a></li>
  164.     </ul>
  165.    </dd>
  166.  </dl>
  167.  <dl>
  168.   <dt onmouseover="javascript:show('smenu4');">Trainers</dt>
  169.    <dd id="smenu4">
  170.     <ul>
  171.      <li><a href="http://127.0.0.1/trainer.html">Trainer's Profile</a></li>
  172.     </ul>
  173.    </dd>
  174.  </dl>
  175.  <dl>
  176.    <dt onmouseover="javascript:show('smenu5');">Student Information</dt>
  177.    <dd id="smenu5">
  178.      <ul>
  179.       <li><a href="http://127.0.0.1/student.html">CaseTrust</a></li>
  180.              <li><a href="http://127.0.0.1/sps.pdf">International Student Protection Scheme</a></li>
  181.              <li><a href="http://127.0.0.1/master.html">Master Escrow Agreement</a></li>
  182.              <li><a href="http://127.0.0.1/c_funding.html">SDF</a></li>
  183.             <li><a href="http://127.0.0.1/app_procedures.html">SRP</a></li>
  184.             <li><a href="http://127.0.0.1/amp07/web">AMP</a></li>
  185.             <li><a href="http://127.0.0.1/asp/index.asp">STB</a></li>
  186.             <li><a href="http://127.0.0.1/testimonial.html">Testimonal</a></li>
  187.             <li><a href="http://127.0.0.1/gra_photos.html">Graduates</a></li>
  188.             <li><a href="http://127.0.0.1/stu_services.html">Student Services</a></li>
  189.      </ul>
  190.    </dd>
  191.  </dl>
  192.   <dl>
  193.    <dt onmouseover="javascript:show('smenu6');">Enrolment</dt>
  194.     <dd id="smenu6">
  195.      <ul>
  196.       <li><a href="http://127.0.0.1/registration.html">Online Registration</a></li>
  197.      </ul>
  198.     </dd>
  199.  </dl>
  200.   <dl>
  201.    <dt onmouseover="javascript:show('smenu7');">Career Development</dt>
  202.     <dd id="smenu7">
  203.      <ul>
  204.       <li><a href="http://127.0.0.1/career.html">Job Opportunities</a></li>
  205.      </ul>
  206.     </dd>
  207.  </dl>
  208.   <dl>
  209.    <dt onmouseover="javascript:show('smenu8');">links to Websites</dt>
  210.     <dd id="smenu8">
  211.      <ul>
  212.       <li><a href="http://127.0.0.1/">Links</a></li>
  213.      </ul>
  214.     </dd>
  215.  </dl>
  216. </div>
  217.  
  218.  
  219. <div  id="bv_Text3" style="position:absolute;left:316px;top:261px;width:723px;height:48px;z-index:14" align="left">
  220. <font  style="font-size:13px" color="#000000" face="Arial"><b><u>Graduates Photos</u><br>
  221. <br>
  222. Graduates of 1st IFA Diploma in Aromatherapy</b></font></div>
  223. <div  id="bv_Image4" style="overflow:hidden;position:absolute;left:316px;top:312px;z-index:15" align="left">
  224. <img   src="gra_1.jpg" id="Image4" alt="" align="top" border="0" style="width:620px;height:315px;"></div>
  225. <div  id="bv_Image8" style="overflow:hidden;position:absolute;left:168px;top:631px;z-index:16" align="left">
  226. <img   src="bottom_bg.jpg" id="Image8" alt="" align="top" border="0" style="width:924px;height:84px;"></div>
  227. <div  id="bv_Image5" style="overflow:hidden;position:absolute;left:424px;top:719px;z-index:17" align="left">
  228. <img   src="link1.jpg" id="Image5" alt="" align="top" border="0" style="width:364px;height:60px;"></div>
  229. <div  id="bv_Text4" style="position:absolute;left:497px;top:669px;width:407px;height:91px;z-index:18" align="left">
  230. <font style="font-size:16px" color="#000000" face="Times New Roman">Copyright © 2008 <b>SPATEC PTE LTD</b><br>
  231. Designed by Goldbiztrading Andrew Se<br>
  232. <br>
  233. <br>
  234. </font></div>
  235. <div id="bv_TextMenu5" style="position:absolute;left:194px;top:643px;width:27px;height:26px;z-index:19" align="center">
  236. <font style="font-size:9.3px;" color="#000000" face="Arial">
  237. <a href="Spatec training and education centre" title="Click Here to see the reference">Home</a></font></div>
  238. <div id="bv_Text8" style="position:absolute;left:225px;top:639px;width:9px;height:16px;z-index:20" align="left">
  239. <font style="font-size:13px" color="#0000FF" face="Arial">|</font></div>
  240. <div id="bv_TextMenu4" style="position:absolute;left:233px;top:643px;width:61px;height:14px;z-index:21" align="center">
  241. <font style="font-size:9.3px;" color="#000000" face="Arial">
  242. <a href="Spatec" title="Click Here to see the feedback">About Spatec</a></font></div>
  243. <div id="bv_Text5" style="position:absolute;left:298px;top:640px;width:6px;height:16px;z-index:22" align="left">
  244. <font style="font-size:13px" color="#0000FF" face="Arial">|</font></div>
  245. <div id="bv_TextMenu7" style="position:absolute;left:300px;top:644px;width:101px;height:14px;z-index:23" align="center">
  246. <font style="font-size:9.3px;" color="#000000" face="Arial">
  247. <a href="Spatec training and education centre" title="Click Here to see the reference">Training & Education</a></font></div>
  248. <div id="bv_Text9" style="position:absolute;left:402px;top:641px;width:7px;height:16px;z-index:24" align="left">
  249. <font style="font-size:13px" color="#0000FF" face="Arial">|</font></div>
  250. <div id="bv_TextMenu6" style="position:absolute;left:417px;top:644px;width:35px;height:26px;z-index:25" align="center">
  251. <font style="font-size:9.3px;" color="#000000" face="Arial">
  252. <a href="Spatec training and education centre" title="Click Here to see the reference">Trainers</a></font></div>
  253. <div id="bv_Text10" style="position:absolute;left:462px;top:642px;width:7px;height:16px;z-index:26" align="left">
  254. <font style="font-size:13px" color="#0000FF" face="Arial">|</font></div>
  255. <div id="bv_TextMenu9" style="position:absolute;left:472px;top:645px;width:93px;height:14px;z-index:27" align="center">
  256. <font style="font-size:9.3px;" color="#000000" face="Arial">
  257. <a href="Untitled Document" title="Click Here to see the feedback">Student Information</a></font></div>
  258. <div id="bv_Text11" style="position:absolute;left:570px;top:642px;width:6px;height:16px;z-index:28" align="left">
  259. <font style="font-size:13px" color="#0000FF" face="Arial">|</font></div>
  260. <div id="bv_TextMenu8" style="position:absolute;left:583px;top:645px;width:44px;height:26px;z-index:29" align="center">
  261. <font style="font-size:9.3px;" color="#000000" face="Arial">
  262. <a href="SPAtec" title="Click Here to see the Site Map">Enrolment</a></font></div>
  263. <div id="bv_Text12" style="position:absolute;left:637px;top:641px;width:6px;height:16px;z-index:30" align="left">
  264. <font style="font-size:13px" color="#0000FF" face="Arial">|</font></div>
  265. <div id="bv_TextMenu11" style="position:absolute;left:638px;top:646px;width:124px;height:14px;z-index:31" align="center">
  266. <font style="font-size:9.3px;" color="#000000" face="Arial">
  267. <a href="ttp://www.spatec.com.sg/career.html" title="Click Here to see the reference">Career Development</a></font></div>
  268. <div id="bv_Text13" style="position:absolute;left:756px;top:642px;width:7px;height:16px;z-index:32" align="left">
  269. <font style="font-size:13px" color="#0000FF" face="Arial">|</font></div>
  270. <div id="bv_TextMenu10" style="position:absolute;left:767px;top:646px;width:56px;height:14px;z-index:33" align="center">
  271. <font style="font-size:9.3px;" color="#000000" face="Arial">
  272. <a href="SPAtec" title="Click Here to see the feedback">Contact Us</a></font></div>
  273. <div id="bv_Text14" style="position:absolute;left:825px;top:643px;width:6px;height:16px;z-index:34" align="left">
  274. <font style="font-size:13px" color="#0000FF" face="Arial">|</font></div>
  275. <div id="bv_TextMenu12" style="position:absolute;left:837px;top:647px;width:47px;height:14px;z-index:35" align="center">
  276. <font style="font-size:9.3px;" color="#000000" face="Arial">
  277. <a href="http://127.0.0.1/feedback.html" title="Click Here to see the feedback">Feedback</a></font></div>
  278. <div id="bv_Text16" style="position:absolute;left:892px;top:644px;width:6px;height:16px;z-index:36" align="left">
  279. <font style="font-size:13px" color="#0000FF" face="Arial">|</font></div>
  280. <div id="bv_TextMenu13" style="position:absolute;left:903px;top:648px;width:43px;height:14px;z-index:37" align="center">
  281. <font style="font-size:9.3px;" color="#000000" face="Arial">
  282. <a href="http://127.0.0.1/sitemap.html" title="Click Here to see the Site Map">Site Map</a></font></div>
  283. <div id="bv_Text15" style="position:absolute;left:952px;top:646px;width:6px;height:16px;z-index:38" align="left">
  284. <font style="font-size:13px" color="#0000FF" face="Arial">|</font></div>
  285. <div id="bv_TextMenu15" style="position:absolute;left:958px;top:649px;width:102px;height:14px;z-index:39" align="center">
  286. <font style="font-size:9.3px;" color="#000000" face="Arial">
  287. <a href="SPAtec" title="Click Here to see the Site Map">Terms and Conditions</a></font></div>
  288.  
  289. </b>
  290. </body>
  291. </html>
  292.  
Jan 19 '09 #6
happyse27
236 100+
hi all,

how and what is the commands to make css horizontal dropdown menu's submenu go back when the mouse is not click on the submenu item created by css...

kindly advise...


Cheers...
Jan 22 '09 #7

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

Similar topics

0
Problems due to PHP version change
by: Ralf Hornbeck | last post by:
Hi, I have just uploaded an older PHP project I have written by myself up to my new webserver. On this server PHP is running in version 4.3.2 and this seems to result in some trouble, since the...
PHP
11
CSS 2 columns (1 nav + 1 content) 100% height & 100% width
by: Not4u | last post by:
Hello, I have a problem with CSS code. I want to have one menu column with a fixed width and a 100% height and the rest of the page for content. ---------------- |.|.|<--100%-->|...
HTML / CSS
2
DHTML Menu change target frame
by: RWD | last post by:
I am trying to figure out how to change the target frame in my hyperlink on a DHTML menu. The menu is in one frame and the target frame is called "main" The code is below: Thanks in advance...
Javascript
3
VB:net Guru Change ScrollBar size
by: spielmann | last post by:
Hello I want to change the scrollbar size of windows, How can I do that with vb.net I have find this in VB6 but how can we convert simply this code. thx
Visual Basic .NET
12
line-height: and height in IE6?
by: Jack Gavrich | last post by:
Hi, guys! I can't get IE6 to display properly menu list. In #menu i specified line-height: 1.7em; but ie6 made way bigger space. So I've specified height: 1.7em; in #menu li a. Now space is as...
HTML / CSS
1
Height at 100% Not Working
by: Mike Collins | last post by:
I am trying to create some pages and have them take 100% of the window, but I cannot get 100% to work. If I set the height of my div, the page displays a scroll bar and it looks like I set the...
ASP.NET
3
CSS Element Height Resizing in Firefox (works in IE)
by: Arielle | last post by:
Problem: Using an XHTML doctype for all our pages, this is not optional. The layout the client wants to use requires the site to be "full screen" with a header, footer, horizontal menu, and main...
HTML / CSS
4
Positioning, Overlap, and greater than 100% height/width
by: Christopera | last post by:
Hello, I have built a site that uses two divs, one verticle, and one horizontal as graphic style for the ite. The problem I am having is that if the browser is resized very small the divs are...
HTML / CSS
4
How can I set the menu control height?
by: stuckagain | last post by:
Hi, I have a page with a scrollable DIV, and within that DIV, I have a few asp.net menu controls. The idea being, the user mouses over the small icons and is presented with a list of options. ...
.NET Framework
1
Cloud Servers without Credit Card and Email Registration: A Simpler Way to Get on the Cloud
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...
General
0
isladogs
Access Europe: Command bars, the Access Shortcut Tool and a simple Audit Log - Wed 3 April
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...
General
0
One-click Importing Excel Data into a*Database
by: ryjfgjl | last post by:
In our work, we often need to import Excel data into databases (such as MySQL, SQL Server, Oracle) for data analysis and processing. Usually, we use database tools like Navicat or the Excel import...
Microsoft Excel
0
Easy Steps to Fix "Canon Printer Won't Connect to WiFi Network"
by: taylorcarr | last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
General
0
How to turn on java script in a villaon keypad mobile phone
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
Java
0
Batch import of multiple excel files into the database
by: ryjfgjl | last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
Data Management
0
Migrating Website to Cloud - Emmanuel Katto
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
General
1
Is that possible of reading the .csv file in column wise and the column have different lengths ?
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
C / C++
0
How to build RAID in BIOS?
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
Computer Hardware

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.

BYTES.COM © 2024
About Bytes
Terms Of Use
Privacy Policy
Sitemap
Advertise on Bytes:
Post a Job
Sponsored Posts
Platinum & Gold Sponsors
Hire Now!