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

How to change height of main menu in CSS

100+
P: 236
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
Share this Question
Share on Google+
6 Replies


P: 14
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
Expert 5K+
P: 7,435
Hello Stomme poes. .
Jan 18 '09 #3

100+
P: 236
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

100+
P: 236
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

100+
P: 236
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

100+
P: 236
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

Post your reply

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