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

How to create menuing system

100+
P: 236
Hi All,

Thanks in advance....

I saw this website www.spatec.com.sg... And saw the slidedown menu bars of "home" "about spatec", how to create this menu bar using which html item? The home if I dont click on it the menu bar wont drop down(i hope it is not java click mouseover function as I hope to use perl and html to achieve same thing, or can I embed java in perl or html?

Also, the main menu bar template index.html always is presented in the which menu item say under "home" menu we click submenu
"graduates" or "news", the main template in the background will be there always, which html or java function can do it? I am using perl, anyway to do it also?


Thanks,
Andrew
Jan 9 '09 #1
Share this Question
Share on Google+
26 Replies


drhowarddrfine
Expert 5K+
P: 7,435
It cannot be done with HTML, and it might be done with javascript, didn't look, but it can be done with CSS using the 'hover' property. I can't go into it now since I'm going out. Google for "CSS drop down menu".
Jan 9 '09 #2

Death Slaught
100+
P: 1,137
Javascript is used to create the desired drop-down effect, however, it is poorly done. When viewed in IE7 and Safari the rest of the menu's drop-downs are hidden by the flash slideshows.

As drhowarddrfine suggested you could use CSS, and with a little Javascript it will even work in IE6-7! Here is a decent article on creating a "Suckerfish Dropdown".

Thanks,
{\_/}
(' . ')
(")[DEATH](")
(")(")
Jan 9 '09 #3

100+
P: 236
Thanks Sir/all,

I found the complete working code at search for " if you can’t get this to work for any reason, here is a working example for download:" at Create a multilevel Dropdown menu with CSS and improve it via jQuery | Kriesi.at - new media design.

a) Also, I pasted the code, how to move the drop down menu to centralized position in web page's centre?

b) how to make use of the main css template to interface with pages in the same website easily, as I have many sub html webpage to include in the website, but keep the main navigation drop down menu template


Thanks in advance,
Andrew

html code
=======
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. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  5. <title></title>
  6. <script type='text/javascript' src='jquery-1.2.3.min.js'></script>
  7. <script type='text/javascript' src='menu.js'></script>
  8. <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
  9. </head>
  10. <body><ul id="nav">
  11.     <li><a href="http://127.0.0.1/preview.html">1 HTML</a></li>
  12.     <li><a href="#">2 CSS</a></li>
  13.     <li><a href="#">3 Javascript </a>
  14.       <ul>
  15.             <li><a href="#">3.1 jQuery</a>
  16.               <ul>
  17.                     <li><a href="#">3.1.1 Download</a></li>
  18.                     <li><a href="#">3.1.2 Tutorial</a></li>
  19.               </ul>
  20.             </li>
  21.             <li><a href="#">3.2 Mootools</a></li>
  22.             <li><a href="#">3.3 Prototype</a></li>
  23.       </ul>
  24.     </li>
  25. </ul>
  26. </body>
  27. </html>
  28.  
  29.  
ccs code
=======
Expand|Select|Wrap|Line Numbers
  1. body{font-size:0.85em;font-family:Verdana, Arial, Helvetica, sans-serif;}
  2. #nav, 
  3. #nav 
  4. ul{margin:0;padding:0;list-style-type:none;list-style-position:outside;position:relative;li
  5. ne-height:1.5em; }
  6. #nav a{display:block;padding:0px 5px;border:1px solid 
  7. #333;color:#fff;text-decoration:none;background-color:#333;}
  8. #nav a:hover{background-color:#fff;color:#333;}
  9. #nav li{float:left;position:relative;}
  10. #nav ul {position:absolute;display:none;width:12em;top:1.5em;}
  11. #nav li ul a{width:12em;height:auto;float:left;}
  12. #nav ul ul{top:auto;} 
  13. #nav li ul ul {left:12em;margin:0px 0 0 10px;}
  14. #nav li:hover ul ul, #nav li:hover ul ul ul, 
  15. #nav 
  16. li:hover ul ul ul ul{display:none;}
  17. #nav li:hover ul, 
  18. #nav li li:hover ul, 
  19. #nav li li li:hover ul, 
  20. #nav li li li li:hover ul{display:block;}
  21.  
  22.  
Jan 10 '09 #4

100+
P: 236
Hi All,

I wanted to make the above ccs something like www.spatec.com.sg where the home, about spatec, trainer's profile, and remaining of the menu is centralized... kindly assist. Thanks...
Jan 11 '09 #5

Death Slaught
100+
P: 1,137
I don't have time to look at it right now. The margin:0 auto; style may work (it depends on which elements you have used the float style on). I will try to help you as soon as possible.

Thanks,
{\_/}
(' . ')
(")[DEATH](")
(")(")
Jan 12 '09 #6

100+
P: 236
Hi Sir,

Thanks. It is basically working, I left with one problem and one query for below latest codes...

1) the drop down menu worked, but when i click on the item in sub menu, the wordings is overshadowed by the webpage's photo or words...

2) how to find detailed line by line explanation for css?

Thanks in advance...
Andrew

Expand|Select|Wrap|Line Numbers
  1. body{font-size:0.75em;font-family:Verdana, Arial, Helvetica, sans-serif;}
  2. #nav, 
  3. #nav 
  4. ul{margin:0.99;padding:0;list-style-type:none;list-style-position:outside;position:relative
  5. ;line-height:1.6em; }
  6. #nav a{display:block;padding:0px 5px;border:1px solid #fff;color:
  7. #fff;text-decoration:none;background-color:
  8. #ff00ff;}
  9. #nav a:hover{background-color:
  10. #fff;color:
  11. #333;}
  12. #nav li{float:left;position:relative;}
  13. #nav ul {position:absolute;display:none;width:12em;top:1.8em;}
  14. #nav li ul a{width:12em;height:auto;float:left;}
  15. #nav ul ul{top:auto;} 
  16. #navbar li ul ul {left:12em;margin:0px 0 0 10px;}
  17. #nav li:hover ul ul, 
  18. #nav li:hover ul ul ul, 
  19. #nav li:hover ul ul ul ul{display:block;}
  20. #nav li:hover ul, 
  21. #nav li li:hover ul, 
  22. #nav li li li:hover ul, 
  23. #nav li li li li:hover ul{display:block;}
  24.  
Jan 13 '09 #7

Death Slaught
100+
P: 1,137
Once again I must apologize because I am in a hurry. Here's a quick solution for your centering problem:

Put your navigation menu in a division with an id, and add this CSS rule:

Expand|Select|Wrap|Line Numbers
  1. #wrapper {
  2.         width:217px;
  3.         margin:0 auto;
  4. }
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. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  5. <title></title>
  6. <script type='text/javascript' src='jquery-1.2.3.min.js'></script>
  7. <script type='text/javascript' src='menu.js'></script>
  8. <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
  9. </head>
  10. <body>
  11.   <div id="wrapper">
  12.     <ul id="nav">
  13.       <li><a href="http://127.0.0.1/preview.html">1 HTML</a></li>
  14.       <li><a href="#">2 CSS</a></li>
  15.       <li><a href="#">3 Javascript </a>
  16.         <ul>
  17.            <li><a href="#">3.1 jQuery</a>
  18.              <ul>
  19.                 <li><a href="#">3.1.1 Download</a></li>
  20.                 <li><a href="#">3.1.2 Tutorial</a></li>
  21.              </ul>
  22.            </li>
  23.            <li><a href="#">3.2 Mootools</a></li>
  24.            <li><a href="#">3.3 Prototype</a></li>
  25.         </ul>
  26.       </li>
  27.     </ul>
  28.   </div>
  29. </body>
  30. </html>
  31.  
Expand|Select|Wrap|Line Numbers
  1. body{font-size:0.85em;font-family:Verdana, Arial, Helvetica, sans-serif;}
  2. #wrapper {width:217px;margin:0 auto;}
  3. #nav, 
  4. #nav 
  5. ul{margin:0;padding:0;list-style-type:none;list-style-position:outside;li
  6. ne-height:1.5em; }
  7. #nav a{display:block;padding:0px 5px;border:1px solid 
  8. #333;color:#fff;text-decoration:none;background-color:#333;}
  9. #nav a:hover{background-color:#fff;color:#333;}
  10. #nav li{float:left;position:relative;}
  11. #nav ul {position:absolute;display:none;width:12em;top:1.5em;}
  12. #nav li ul a{width:12em;height:auto;float:left;}
  13. #nav ul ul{top:auto;} 
  14. #nav li ul ul {left:12em;margin:0px 0 0 10px;}
  15. #nav li:hover ul ul, #nav li:hover ul ul ul, 
  16. #nav 
  17. li:hover ul ul ul ul{display:none;}
  18. #nav li:hover ul, 
  19. #nav li li:hover ul, 
  20. #nav li li li:hover ul, 
  21. #nav li li li li:hover ul{display:block;}
I tested it in Safari on my Mac and don't have time to test it on other browsers. If there are any problems please let me know.

Thanks,
{\_/}
(' . ')
(")[DEATH](")
(")(")
Jan 13 '09 #8

100+
P: 236
Hi Sir,

Thanks... Tried your code, didnt go exactly, it only went half well. I want to do something like www.spatec.com.sg where I click under the main menu "STUDENT INFORMATION" where the sub menu comes out and the picture on it does not overlap(or overshadow) the items under the "STUDENT INFORMATION" sub menu...(meaning the items and border under the "STUDENT INFORMATION" sub menu will cover the picture and wordings in the main page)

Kindly assist...

Thanks in advance,
Andrew
Jan 13 '09 #9

Death Slaught
100+
P: 1,137
Take a look at the z-index property.

Thanks,
{\_/}
(' . ')
(")[DEATH](")
(")(")
Jan 13 '09 #10

100+
P: 236
Hi Sir,

Still cant work.. below is my code for z-index:-1... applied it in css code. Html code also attached for verification. not sure if i did it correctly?

btw, I just want the sub menu when i click to completely overwrite and cover the picture and wording in the main page when i click "STUDENT INFORMATION" in www.spatec.com.sg..

Kindly enlighten...

Thanks in advance again,
Andrew

css code with z-index:-1
==================
Expand|Select|Wrap|Line Numbers
  1.  
  2. body{font-size:0.75em;font-family:Verdana, Arial, Helvetica, sans-serif;}
  3. #nav, 
  4. #nav 
  5. ul{margin:0.99;padding:0;list-style-type:none;list-style-position:inside;position:relative;
  6. line-height:1.6em;}
  7. #nav a{display:block;padding:0px 5px;border:1px solid #fff;color:
  8. #fff;text-decoration:none;background-color:
  9. #ff00ff;}
  10. #nav a:hover{background-color:
  11. #fff;color:
  12. #333;}
  13.  
  14. #nav li{float:left;position:relative;}
  15. #nav ul {position:absolute;display:none;width:12em;top:1.8em;z-index:-1;}
  16. #nav li ul a{width:12em;height:auto;float:left;border:1px solid #fff;}
  17. #nav ul ul{top:auto;} 
  18. #navbar li ul ul {left:12em;margin:0px 0 0 10px}
  19. #nav li:hover ul ul, 
  20. #nav li:hover ul ul ul, 
  21. #nav li:hover ul ul ul ul{display:none;}
  22. #nav li:hover ul, 
  23. #nav li li:hover ul, 
  24. #nav li li li:hover ul, 
  25. #nav li li li li:hover ul{display:block;}
  26.  
b) html code(partial)
===============
Expand|Select|Wrap|Line Numbers
  1. <div style="position:absolute;left:169px;top:180px; align="center"; id="wrapper" ><ul id="nav" class="dropdown dropdown-horizontal">
  2.    <li><a href="#">Home</a></li>
  3.        <ul>
  4.                <li><a href="http://127.0.0.1/gra_photos.html">Graduates</a></li>
  5.                <li><a href="http://127.0.0.1/news.html">Photo</a></li>
  6.                <li><a href="http://127.0.0.1/promotion.html">Promotions</a></li>
  7.       </ul>
  8.     <li><a href="#">About SPAtec</a></li>
  9.       <ul>
  10.               <li><a href="http://127.0.0.1/welcome_msg.html">Welcome</a></li>
  11.               <li><a href="http://127.0.0.1/vision.html">Vision & Mission</a></li>
  12.               <li><a href="http://127.0.0.1/com_background.html">Company Business</a></li>
  13.               <li><a href="http://127.0.0.1/com_facilities.html...lities</a></li>
  14.       </ul>
  15.     <li><a href="#">Training and Education</a>
  16.       <ul>
  17.              <li><a href="http://127.0.0.1/courses.html">Courses</a></li>
  18.              <li><a href="http://127.0.0.1/certification.html"...cation</a></li>
  19.              <li><a href="http://127.0.0.1/promotion.html">Promotions</a></li>
  20.    </ul>
  21.     <li><a href="#">Trainers</a>
  22.        <ul>
  23.             <li><a href="http://127.0.0.1/trainer.html">Trainer's Profile</a></li>
  24.    </ul>
  25.     <li><a href="#">Student Information</a>
  26.       <ul>
  27.              <li><a href="http://127.0.0.1/student.html">CaseTrust</a></li>
  28.              <li><a href="http://127.0.0.1/sps.pdf">International Student Protection Scheme</a></li>
  29.              <li><a href="http://127.0.0.1/master.html">Master Escrow Agreement</a></li>
  30.              <li><a href="http://127.0.0.1/c_funding.html">SDF</a></li>
  31.             <li><a href="http://127.0.0.1/app_procedures.html">SRP</a></li>
  32.             <li><a href="http://127.0.0.1/amp07/web">AMP</a></li>
  33.             <li><a href="http://127.0.0.1/asp/index.asp">STB</a></li>
  34.             <li><a href="http://127.0.0.1/testimonial.html">Testimonal</a></li>
  35.             <li><a href="http://127.0.0.1/gra_photos.html">Graduates</a></li>
  36.             <li><a href="http://127.0.0.1/stu_services.html">Student Services</a></li>
  37.    </ul>
  38.     <li><a href="#">Enrolment</a>
  39.       <ul>
  40.             <li><a href="http://127.0.0.1/registration.html">Online Registration</a></li>
  41.    </ul>
  42.     <li><a href="#">Career Development</a>
  43.       <ul>
  44.                <li><a href="http://127.0.0.1/career.html">Job Opportunities</a></li>
  45.       </ul>
  46.     <li><a href="#">Link to Other Websites</a>
  47.    <ul>
  48.                <li><a href="http://127.0.0.1/">Courses</a></li>
  49.       </ul>
  50.     </li>
  51. </ul></DIV>
  52.  
Jan 13 '09 #11

Death Slaught
100+
P: 1,137
You didn't read the article... giving an element a z-index of -1 will place it behind the other elements. Try giving it a z-index of 1 and seeing what it does.

Thanks,
{\_/}
(' . ')
(")[DEATH](")
(")(")
Jan 13 '09 #12

100+
P: 236
Hi Sir,

Tried with -1 and 1 already before i posted the previous article, and tried just now also did not work. Before is the code(where is the best place to put? and how to interpret where to put?)

got 2 scenarios below.. Thanks in advance again...


Thanks and Best Rgds,
Andrew

Tried with all 4 z index of -1
--------------------------------
Expand|Select|Wrap|Line Numbers
  1.  
  2. body{font-size:0.75em;font-family:Verdana, Arial, Helvetica, sans-serif;}
  3. #nav, 
  4. #nav 
  5. ul{margin:0.99;padding:0;list-style-type:none;list-style-position:inside;position:relative;
  6. line-height:1.6em;}
  7. #nav a{display:block;padding:0px 5px;border:1px solid #fff;color:
  8. #fff;text-decoration:none;background-color:
  9. #ff00ff;}
  10. #nav a:hover{background-color:
  11. #fff;color:
  12. #333;}
  13.  
  14. #nav li{float:left;position:relative;}
  15. #nav ul {position:absolute;display:none;width:12em;top:1.8em;z-index:-1;}
  16. #nav li ul a{width:12em;height:auto;float:left;border:1px solid; #fff;z-index:-1;}
  17. #nav ul ul{top:auto;} 
  18. #navbar li ul ul {left:12em;margin:0px 0 0 10px;z-index:-1;}
  19. #nav li:hover ul ul, 
  20. #nav li:hover ul ul ul, 
  21. #nav li:hover ul ul ul ul{display:block;z-index:-1}
  22. #nav li:hover ul, 
  23. #nav li li:hover ul, 
  24. #nav li li li:hover ul, 
  25. #nav li li li li:hover ul{display:block;}
  26.  
  27.  
  28.  


tried with all 4 z index of 1
---------------------------------------
Expand|Select|Wrap|Line Numbers
  1.  
  2. body{font-size:0.75em;font-family:Verdana, Arial, Helvetica, sans-serif;}
  3. #nav, 
  4. #nav 
  5. ul{margin:0.99;padding:0;list-style-type:none;list-style-position:inside;position:relative;
  6. line-height:1.6em;}
  7. #nav a{display:block;padding:0px 5px;border:1px solid #fff;color:
  8. #fff;text-decoration:none;background-color:
  9. #ff00ff;}
  10. #nav a:hover{background-color:
  11. #fff;color:
  12. #333;}
  13.  
  14. #nav li{float:left;position:relative;}
  15. #nav ul {position:absolute;display:none;width:12em;top:1.8em;z-index:1;}
  16. #nav li ul a{width:12em;height:auto;float:left;border:1px solid; #fff;z-index:1;}
  17. #nav ul ul{top:auto;} 
  18. #navbar li ul ul {left:12em;margin:0px 0 0 10px;z-index:1;}
  19. #nav li:hover ul ul, 
  20. #nav li:hover ul ul ul, 
  21. #nav li:hover ul ul ul ul{display:block;z-index:1}
  22. #nav li:hover ul, 
  23. #nav li li:hover ul, 
  24. #nav li li li:hover ul, 
  25. #nav li li li li:hover ul{display:block;}
  26.  
  27.  
Jan 14 '09 #13

100+
P: 236
Hi Sir / all,

With External Css page, the z-index seemed not to be working. (maybe i did it wrongly, but the results i tried many different ways not working), the css code and html are below...

With internal css(meaning css inside the html page), the z-index is working...

Kindly assist.

Thanks and Best Rgds,
Andrew

css code
=======
Expand|Select|Wrap|Line Numbers
  1.  
  2. body{font-size:0.75em;font-family:Verdana, Arial, Helvetica, sans-serif;}
  3. #nav, 
  4. #nav 
  5. ul{margin:0.99;padding:0;list-style-type:none;list-style-position:inside;position:relative;
  6. line-height:1.6em;z-index:2;}
  7. #nav a{display:block;padding:0px 5px;border:1px solid #fff;color:
  8. #fff;text-decoration:none;background-color:
  9. #ff00ff;z-index:2;}
  10. #nav a:hover{background-color:
  11. #fff;color:
  12. #333;z-index:2;}
  13.  
  14. #nav li{float:left;position:relative;z-index:2;}
  15. #nav ul {position:absolute;display:none;width:12em;top:1.8em;z-index:2;}
  16. #nav li ul a{width:12em;height:auto;float:left;border:1px solid; #fff;z-index:2;}
  17. #nav ul ul{top:auto;} 
  18. #navbar li ul ul {left:12em;margin:0px 0 0 10px;z-index:2;}
  19. #nav li:hover ul ul, 
  20. #nav li:hover ul ul ul, 
  21. #nav li:hover ul ul ul ul{display:block;z-index:2;}
  22. #nav li:hover ul, 
  23. #nav li li:hover ul, 
  24. #nav li li li:hover ul, 
  25. #nav li li li li:hover ul{display:block;z-index:2;}
  26.  
html code
=======
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. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  5. <title></title>
  6. <style type="text/css">
  7. img.x
  8. {
  9. z-index:1
  10. }
  11. img.y
  12. {
  13. z-index:2
  14. }
  15. </style>
  16.  
  17. <script type='text/javascript' src='jquery-1.2.3.min.js'></script>
  18. <script type='text/javascript' src='menu.js'></script>
  19. <link class="y" rel="stylesheet" href="style.css" type="text/css" media="screen" />
  20.  
  21. </head>
  22.  
  23. <body><b>
  24. <body bgcolor="#FFFFFF" text="#000000">
  25. <div class="x" id="bv_Shape1" style="position:absolute;left:166px;top:206px;width:928px;height:600px;z-index:0" align="center">
  26. <img class="x" src="pink.jpg" id="Shape1" align="top" alt="" title="" border="0" width="928" height="590"></div>
  27. <div class="x" id="bv_Image1" style="overflow:hidden;position:absolute;left:168px;top:0px;z-index:1" align="left">
  28. <img  class="x" src="top_bg.jpg" id="Image1" alt="" align="top" border="0" style="width:924px;height:178px;"></div>
  29. <div class="x" id="bv_TextMenu1" style="position:absolute;left:813px;top:13px;width:78px;height:18px;z-index:2" align="center">
  30. <font class="x" style="font-size:13px;" color="#000000" face="Arial">
  31. [<a href="http://127.0.0.1/contact.html" title="Click Here to see the reference">Contact Us</a>]</font></div>
  32. <div class="x" id="bv_Text1" style="position:absolute;left:901px;top:13px;width:7px;height:16px;z-index:3" align="left">
  33. <font class="x" style="font-size:13px" color="#0000FF" face="Arial">|</font></div>
  34. <div class="x" id="bv_TextMenu2" style="position:absolute;left:919px;top:13px;width:67px;height:34px;z-index:4" align="center">
  35. <font class="x" style="font-size:13px;" color="#000000" face="Arial">
  36. [<a href="http://127.0.0.1/feedback.html" title="Click Here to see the feedback">Feedback</a>]</font></div>
  37. <div class="x" id="bv_Text2" style="position:absolute;left:1012px;top:13px;width:6px;height:16px;z-index:5" align="left">
  38. <font class="x" style="font-size:13px" color="#0000FF" face="Arial">|</font></div>
  39. <div class="x" id="bv_TextMenu3" style="position:absolute;left:996px;top:14px;width:102px;height:18px;z-index:6" align="center">
  40. <font class="x" style="font-size:13px;" color="#000000" face="Arial">
  41. [<a href="http://127.0.0.1/sitemap.html" title="Click Here to see the Site Map">Site Map</a>]</font></div>
  42. <div class="x" id="bv_Text6" style="position:absolute;left:512px;top:25px;width:150px;height:31px;z-index:7" align="left">
  43. <font class="x" style="font-size:13px" color="#000000" face="Arial">Chinese Version<br>
  44. </font></div>
  45. <div class="x" id="bv_Image6" style="overflow:hidden;position:absolute;left:464px;top:1px;z-index:8" align="left">
  46. <a href="http://www.spatec.com.sg/chinese/"><img  class="x" src="lang_ch.gif" id="Image6" alt="" align="top" border="0" style="width:127px;height:54px;"></a></div>
  47. <div class="x" id="bv_Image7" style="overflow:hidden;position:absolute;left:602px;top:0px;z-index:9" align="left">
  48. <a href="http://www.spatec.com.sg/vietnam/"><img  class="x" src="lang_vi.gif" id="Image7" alt="" align="top" border="0" style="width:127px;height:54px;"></a></div>
  49. <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">
  50. <option value="http://www.spatec.com.sg">Spatec</option>
  51. <option value="http://www.sensori-intl.com/">Senori</option>
  52. </select>
  53. <div class="x" id="bv_Image2" style="overflow:hidden;position:absolute;left:0px;top:0px;z-index:11" align="left">
  54. <img class="x" src="mid_bg.jpg" id="Image2" alt="" align="top" border="0" style="width:168px;height:786px;"></div>
  55. <div class="x" id="bv_Image3" style="overflow:hidden;position:absolute;left:1092px;top:0px;z-index:12" align="left">
  56. <img class="x" src="mid_bg.jpg" id="Image3" alt="" align="top" border="0" style="width:214px;height:786px;"></div>
  57. <div class="x" id="bv_Text7" style="position:absolute;left:140px;top:939px;width:920px;height:15px;z-index:13" align="center">
  58. &nbsp;</div>
  59.  
  60.  
  61.   <div class="y" style="position:absolute;left:169px;top:200px; align="center"; id="wrapper" ><ul class="y" id="nav" class="dropdown dropdown-horizontal">
  62.    <li><a href="#">Home</a></li>
  63.        <ul>
  64.                <li><a href="http://127.0.0.1/gra_photos.html">Graduates</a></li>
  65.                <li><a href="http://127.0.0.1/news.html">Photo</a></li>
  66.                <li><a href="http://127.0.0.1/promotion.html">Promotions</a></li>
  67.       </ul>
  68.     <li><a href="#">About SPAtec</a></li>
  69.       <ul>
  70.               <li><a href="http://127.0.0.1/welcome_msg.html">Welcome</a></li>
  71.               <li><a href="http://127.0.0.1/vision.html">Vision & Mission</a></li>
  72.               <li><a href="http://127.0.0.1/com_background.html">Company Business</a></li>
  73.               <li><a href="http://127.0.0.1/com_facilities.html...lities</a></li>
  74.       </ul>
  75.     <li><a class="y" href="#">Training and Education</a>
  76.       <ul class="y">
  77.              <li><a href="http://127.0.0.1/courses.html">Courses</a></li>
  78.              <li><a href="http://127.0.0.1/certification.html"...cation</a></li>
  79.              <li><a class="x" href="http://127.0.0.1/promotion.html" class="y">Promotions</a></li>
  80.    </ul>
  81.     <li><a href="#">Trainers</a>
  82.        <ul>
  83.             <li><a href="http://127.0.0.1/trainer.html">Trainer's Profile</a></li>
  84.    </ul>
  85.     <li><a href="#">Student Information</a>
  86.       <ul>
  87.              <li><a href="http://127.0.0.1/student.html">CaseTrust</a></li>
  88.              <li><a href="http://127.0.0.1/sps.pdf">International Student Protection Scheme</a></li>
  89.              <li><a href="http://127.0.0.1/master.html">Master Escrow Agreement</a></li>
  90.              <li><a href="http://127.0.0.1/c_funding.html">SDF</a></li>
  91.             <li><a href="http://127.0.0.1/app_procedures.html">SRP</a></li>
  92.             <li><a href="http://127.0.0.1/amp07/web">AMP</a></li>
  93.             <li><a href="http://127.0.0.1/asp/index.asp">STB</a></li>
  94.             <li><a href="http://127.0.0.1/testimonial.html">Testimonal</a></li>
  95.             <li><a href="http://127.0.0.1/gra_photos.html">Graduates</a></li>
  96.             <li><a href="http://127.0.0.1/stu_services.html">Student Services</a></li>
  97.    </ul>
  98.     <li><a href="#">Enrolment</a>
  99.       <ul>
  100.             <li><a href="http://127.0.0.1/registration.html">Online Registration</a></li>
  101.    </ul>
  102.     <li><a href="#">Career Development</a>
  103.       <ul>
  104.                <li><a href="http://127.0.0.1/career.html">Job Opportunities</a></li>
  105.       </ul>
  106.     <li><a href="#">Link to Other Websites</a>
  107.    <ul>
  108.                <li><a href="http://127.0.0.1/">Courses</a></li>
  109.       </ul>
  110.     </li>
  111. </ul></DIV>
  112. <div class="x" id="bv_Text3" style="position:absolute;left:316px;top:261px;width:723px;height:48px;z-index:14" align="left">
  113. <font class="x" style="font-size:13px" color="#000000" face="Arial"><b><u>Graduates Photos</u><br>
  114. <br>
  115. Graduates of 1st IFA Diploma in Aromatherapy</b></font></div>
  116. <div class="x" id="bv_Image4" style="overflow:hidden;position:absolute;left:316px;top:312px;z-index:15" align="left">
  117. <img  class="x" src="gra_1.jpg" id="Image4" alt="" align="top" border="0" style="width:620px;height:315px;"></div>
  118. <div class="x" id="bv_Image8" style="overflow:hidden;position:absolute;left:168px;top:631px;z-index:16" align="left">
  119. <img  class="x" src="bottom_bg.jpg" id="Image8" alt="" align="top" border="0" style="width:924px;height:84px;"></div>
  120. <div class="x" id="bv_Image5" style="overflow:hidden;position:absolute;left:424px;top:719px;z-index:17" align="left">
  121. <img  class="x" src="link1.jpg" id="Image5" alt="" align="top" border="0" style="width:364px;height:60px;"></div>
  122. <div class="y" id="bv_Text4" style="position:absolute;left:497px;top:669px;width:407px;height:91px;z-index:18" align="left">
  123. <font style="font-size:16px" color="#000000" face="Times New Roman">Copyright © 2008 <b>SPATEC PTE LTD</b><br>
  124. Designed by Goldbiztrading Andrew Se<br>
  125. <br>
  126. <br>
  127. </font></div>
  128. <div id="bv_TextMenu5" style="position:absolute;left:194px;top:643px;width:27px;height:26px;z-index:19" align="center">
  129. <font style="font-size:9.3px;" color="#000000" face="Arial">
  130. <a href="Spatec training and education centre" title="Click Here to see the reference">Home</a></font></div>
  131. <div id="bv_Text8" style="position:absolute;left:225px;top:639px;width:9px;height:16px;z-index:20" align="left">
  132. <font style="font-size:13px" color="#0000FF" face="Arial">|</font></div>
  133. <div id="bv_TextMenu4" style="position:absolute;left:233px;top:643px;width:61px;height:14px;z-index:21" align="center">
  134. <font style="font-size:9.3px;" color="#000000" face="Arial">
  135. <a href="Spatec" title="Click Here to see the feedback">About Spatec</a></font></div>
  136. <div id="bv_Text5" style="position:absolute;left:298px;top:640px;width:6px;height:16px;z-index:22" align="left">
  137. <font style="font-size:13px" color="#0000FF" face="Arial">|</font></div>
  138. <div id="bv_TextMenu7" style="position:absolute;left:300px;top:644px;width:101px;height:14px;z-index:23" align="center">
  139. <font style="font-size:9.3px;" color="#000000" face="Arial">
  140. <a href="Spatec training and education centre" title="Click Here to see the reference">Training & Education</a></font></div>
  141. <div id="bv_Text9" style="position:absolute;left:402px;top:641px;width:7px;height:16px;z-index:24" align="left">
  142. <font style="font-size:13px" color="#0000FF" face="Arial">|</font></div>
  143. <div id="bv_TextMenu6" style="position:absolute;left:417px;top:644px;width:35px;height:26px;z-index:25" align="center">
  144. <font style="font-size:9.3px;" color="#000000" face="Arial">
  145. <a href="Spatec training and education centre" title="Click Here to see the reference">Trainers</a></font></div>
  146. <div id="bv_Text10" style="position:absolute;left:462px;top:642px;width:7px;height:16px;z-index:26" align="left">
  147. <font style="font-size:13px" color="#0000FF" face="Arial">|</font></div>
  148. <div id="bv_TextMenu9" style="position:absolute;left:472px;top:645px;width:93px;height:14px;z-index:27" align="center">
  149. <font style="font-size:9.3px;" color="#000000" face="Arial">
  150. <a href="Untitled Document" title="Click Here to see the feedback">Student Information</a></font></div>
  151. <div id="bv_Text11" style="position:absolute;left:570px;top:642px;width:6px;height:16px;z-index:28" align="left">
  152. <font style="font-size:13px" color="#0000FF" face="Arial">|</font></div>
  153. <div id="bv_TextMenu8" style="position:absolute;left:583px;top:645px;width:44px;height:26px;z-index:29" align="center">
  154. <font style="font-size:9.3px;" color="#000000" face="Arial">
  155. <a href="SPAtec" title="Click Here to see the Site Map">Enrolment</a></font></div>
  156. <div id="bv_Text12" style="position:absolute;left:637px;top:641px;width:6px;height:16px;z-index:30" align="left">
  157. <font style="font-size:13px" color="#0000FF" face="Arial">|</font></div>
  158. <div id="bv_TextMenu11" style="position:absolute;left:638px;top:646px;width:124px;height:14px;z-index:31" align="center">
  159. <font style="font-size:9.3px;" color="#000000" face="Arial">
  160. <a href="ttp://www.spatec.com.sg/career.html" title="Click Here to see the reference">Career Development</a></font></div>
  161. <div id="bv_Text13" style="position:absolute;left:756px;top:642px;width:7px;height:16px;z-index:32" align="left">
  162. <font style="font-size:13px" color="#0000FF" face="Arial">|</font></div>
  163. <div id="bv_TextMenu10" style="position:absolute;left:767px;top:646px;width:56px;height:14px;z-index:33" align="center">
  164. <font style="font-size:9.3px;" color="#000000" face="Arial">
  165. <a href="SPAtec" title="Click Here to see the feedback">Contact Us</a></font></div>
  166. <div id="bv_Text14" style="position:absolute;left:825px;top:643px;width:6px;height:16px;z-index:34" align="left">
  167. <font style="font-size:13px" color="#0000FF" face="Arial">|</font></div>
  168. <div id="bv_TextMenu12" style="position:absolute;left:837px;top:647px;width:47px;height:14px;z-index:35" align="center">
  169. <font style="font-size:9.3px;" color="#000000" face="Arial">
  170. <a href="http://127.0.0.1/feedback.html" title="Click Here to see the feedback">Feedback</a></font></div>
  171. <div id="bv_Text16" style="position:absolute;left:892px;top:644px;width:6px;height:16px;z-index:36" align="left">
  172. <font style="font-size:13px" color="#0000FF" face="Arial">|</font></div>
  173. <div id="bv_TextMenu13" style="position:absolute;left:903px;top:648px;width:43px;height:14px;z-index:37" align="center">
  174. <font style="font-size:9.3px;" color="#000000" face="Arial">
  175. <a href="http://127.0.0.1/sitemap.html" title="Click Here to see the Site Map">Site Map</a></font></div>
  176. <div id="bv_Text15" style="position:absolute;left:952px;top:646px;width:6px;height:16px;z-index:38" align="left">
  177. <font style="font-size:13px" color="#0000FF" face="Arial">|</font></div>
  178. <div id="bv_TextMenu15" style="position:absolute;left:958px;top:649px;width:102px;height:14px;z-index:39" align="center">
  179. <font style="font-size:9.3px;" color="#000000" face="Arial">
  180. <a href="SPAtec" title="Click Here to see the Site Map">Terms and Conditions</a></font></div>
  181.  
  182. </b>
  183. </body>
  184. </html>
  185.  
  186.  
Jan 14 '09 #14

100+
P: 236
hi Sirs / all,

I saw this website, but not sure whether i dont whether it helps? as i really dont know how to relate...

z-index problem - Graphic Design Forum and Web Design Forum


Thanks and Best Rgds,
Andrew
Jan 14 '09 #15

100+
P: 236
the website information still didnt resolve my problem... still when i click the submenu, it didnt overwrite the font and picture as the font and picture showed..

the below are my codes
=================

1)html
Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <title></title>
  3. <script type='text/javascript' src='new.js'></script>
  4. <link rel="stylesheet" href="new.css" type="text/css" media="screen" />
  5. </head><body>
  6. <h1>This is a Heading</h1>
  7. <p>Default z-index is 0. Z-index -1 has lower priority.</p>
  8. <div id="bv_Shape1" 
  9. style="position:absolute;left:100px;top:100px;width:928px;height:600px;z-index:0" 
  10. align="center">
  11. <img src="http://127.0.0.1/pink.jpg" id="Shape1" align="top" alt="" title="" border="0" 
  12. width="928" height="590"></div>
  13. <div class="x" id="bv_Text3" 
  14. style="position:absolute;left:100px;top:100px;width:723px;height:48px;z-index:14" 
  15. align="left">
  16. <font class="x" style="font-size:13px" color="#000000" face="Arial"><b><u>Graduates 
  17. Photos</u><br>
  18. <br>
  19. Graduates of 1st IFA Diploma in Aromatherapy</b></font></div>
  20. <div class="x" id="bv_Image4" 
  21. style="overflow:hidden;position:absolute;left:316px;top:312px;z-index:15" align="left">
  22. <img  class="x" src="gra_1.jpg" id="Image4" alt="" align="top" border="0" 
  23. style="width:620px;height:315px;"></div>
  24.  
  25. <ul id="sddm">
  26.     <li><a href="#" 
  27.         onmouseover="mopen('m1')" 
  28.         onmouseout="mclosetime()">Home</a>
  29.         <div id="m1" 
  30.             onmouseover="mcancelclosetime()" 
  31.             onmouseout="mclosetime()">
  32.         <a href="#">HTML Drop Down</a>
  33.         <a href="#">DHTML Menu</a>
  34.         <a href="#">JavaScript DropDown</a>
  35.         <a href="#">Cascading Menu</a>
  36.         <a href="#">CSS Horizontal Menu</a>
  37.         </div>
  38.     </li>
  39.     <li><a href="#" 
  40.         onmouseover="mopen('m2')" 
  41.         onmouseout="mclosetime()">Download</a>
  42.         <div id="m2" 
  43.             onmouseover="mcancelclosetime()" 
  44.             onmouseout="mclosetime()">
  45.         <a href="#">ASP Dropdown</a>
  46.         <a href="#">Pulldown menu</a>
  47.         <a href="#">AJAX Drop Submenu</a>
  48.         <a href="#">DIV Cascading Menu</a>
  49.         </div>
  50.     </li>
  51.     <li><a href="#">Order</a></li>
  52.     <li><a href="#">Help</a></li>
  53.     <li><a href="#">Contact</a></li>
  54. </ul>
  55. <div style="clear:both"></div>
  56. </body>
  57. </html>
  58.  
2)javascript code
============
Expand|Select|Wrap|Line Numbers
  1. // Copyright 2006-2007 javascript-array.com
  2. var timeout = 500;
  3. var closetimer = 0;
  4. var ddmenuitem = 0;
  5. // open hidden layer
  6. function mopen(id)
  7.  // cancel close timer
  8.  mcancelclosetime();
  9.  // close old layer
  10.  if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
  11.  // get new layer and show it
  12.  ddmenuitem = document.getElementById(id);
  13.  ddmenuitem.style.visibility = 'visible';
  14. }
  15. // close showed layer
  16. function mclose()
  17. {
  18.  if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
  19. }
  20. // go close timer
  21. function mclosetime()
  22. {
  23.  closetimer = window.setTimeout(mclose, timeout);
  24. }
  25. // cancel close timer
  26. function mcancelclosetime()
  27. {
  28.  if(closetimer)
  29.  {
  30.   window.clearTimeout(closetimer);
  31.   closetimer = null;
  32.  }
  33. }
  34. // close layer when click-out
  35. document.onclick = mclose;
  36.  
3)css code
Expand|Select|Wrap|Line Numbers
  1. #sddm
  2. { margin: 0;
  3.  padding: 0;
  4.  z-index: 30}
  5. #sddm li
  6. { margin: 0;
  7.  padding: 0;
  8.  list-style: none;
  9.  float: left;
  10.  font: bold 11px arial}
  11. #sddm li a
  12. { display: block;
  13.  margin: 0 1px 0 0;
  14.  padding: 4px 10px;
  15.  width: 60px;
  16.  background: #5970B2;
  17.  color: #FFF;
  18.  text-align: center;
  19.  text-decoration: none}
  20. #sddm li a:hover
  21. { background: #49A3FF}
  22. #sddm div
  23. { position: absolute;
  24.  visibility: hidden;
  25.  margin: 0;
  26.  padding: 0;
  27.  background: #EAEBD8;
  28.  border: 1px solid #5970B2}
  29.  #sddm div a
  30.  { position: relative;
  31.   display: block;
  32.   margin: 0;
  33.   padding: 5px 10px;
  34.   width: auto;
  35.   white-space: nowrap;
  36.   text-align: left;
  37.   text-decoration: none;
  38.   background: #EAEBD8;
  39.   color: #2875DE;
  40.   font: 11px arial}
  41.  #sddm div a:hover
  42.  { background: #49A3FF;
  43.   color: #FFF}
  44.  
Jan 14 '09 #17

Death Slaught
100+
P: 1,137
I am at school right now, and about to take a Chemistry test. As soon as I get a chance today I will attempt to find you a solution. I have a working example of the code you gave before somewhere.

Thanks,
{\_/}
(' . ')
(")[DEATH](")
(")(")
Jan 15 '09 #18

100+
P: 236
thanks! Sir, hopefully your test turn out well...

I saw this post with z-index and em, but not sure whether it is applicable...

Tried for a while but did not work...

kindly assist.

Cheers...
Andrew

Overlapping And Z Index - css-discuss
Jan 16 '09 #19

100+
P: 236
the above is urgent, I would appreciate very much if

anyone could help on not letting the background pictures and wordings overwrite the external css horizontal drop down menu's items... thanks in advance!!
Jan 17 '09 #20

100+
P: 236
Hi Sirs / Mdms,

It is working now... attached is the codes...

Thanks to this website(10 Stars tutorial for CSS), Alsacreations, XHTML and CSS drop-down menu


Cheers...
Andrew

complete code

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. }
  20. #menu {
  21. position: absolute; /* Menu position that can be changed at will */
  22. top: 0;
  23. left: 0;
  24. z-index:100;
  25. width: 100%; /* precision for Opera */
  26. }
  27. #menu dl {
  28. float: left;
  29. width: 12em;
  30. }
  31. #menu dt {
  32. cursor: pointer;
  33. text-align: center;
  34. font-weight: bold;
  35. background: #ccc;
  36. border: 1px solid gray;
  37. margin: 1px;
  38. }
  39. #menu dd {
  40. display: none;
  41. border: 1px solid gray;
  42. }
  43. #menu li {
  44. text-align: center;
  45. background: #fff;
  46. }
  47. #menu li a, #menu dt a {
  48. color: #000;
  49. text-decoration: none;
  50. display: block;
  51. height: 100%;
  52. border: 0 none;
  53. }
  54. #menu li a:hover, #menu li a:focus, #menu dt a:hover, #menu dt a:focus {
  55. background: #eee;
  56. }
  57. #site {
  58. position: absolute;
  59. z-index: 1;
  60. top : 70px;
  61. left : 10px;
  62. color: #000;
  63. background-color: #ddd;
  64. padding: 5px;
  65. border: 1px solid gray;
  66. }
  67. -->
  68. </style>
  69.  
  70.  
  71. <script type="text/javascript">
  72. <!--
  73. window.onload=show;
  74. function show(id) {
  75. var d = document.getElementById(id);
  76.  for (var i = 1; i<=10; i++) {
  77.   if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
  78.  }
  79. if (d) {d.style.display='block';}
  80. }
  81. //-->
  82. </script>
  83. <link  rel="stylesheet" href="suckerfish.css" type="text/css" media="screen" />
  84.  
  85.  
  86. <b>
  87. <body bgcolor="#FFFFFF" text="#000000">
  88. <div id="bv_Shape1" style="position:absolute;left:100px;top:50px;width:928px;height:600px;z-index:0" align="center">
  89. <img src="pink.jpg" id="Shape1" align="top" alt="" title="" border="0" width="928" height="590"></div>
  90. <div id="bv_TextMenu2" style="position:absolute;left:100px;top:100px;width:67px;height:34px;z-index:4" align="center">
  91. <font style="font-size:13px;" color="#000000" face="Arial">
  92. [<a href="http://127.0.0.1/feedback.html" title="Click Here to see the feedback">Feedback</a>]</font></div>
  93.  
  94.  
  95. <div id="menu">
  96.  <dl>
  97.   <dt onmouseover="javascript:show();"><a href="" title="Return to home">Home</a></dt>
  98.  </dl>
  99.  <dl>
  100.   <dt onmouseover="javascript:show('smenu1');">Menu 1</dt>
  101.    <dd id="smenu1">
  102.     <ul>
  103.      <li><a href="#">sub-menu 1.1</a></li>
  104.      <li><a href="#">sub-menu 1.2</a></li>
  105.      <li><a href="#">sub-menu 1.3</a></li>
  106.      <li><a href="#">sub-menu 1.4</a></li>
  107.      <li><a href="#">sub-menu 1.5</a></li>
  108.      <li><a href="#">sub-menu 1.6</a></li>
  109.     </ul>
  110.    </dd>
  111.  </dl>
  112.  
  113.  <dl>
  114.   <dt onmouseover="javascript:show();"><a href="">Menu 2</a></dt>
  115.  </dl>
  116.  <dl>
  117.   <dt onmouseover="javascript:show('smenu3');">Menu 3</dt>
  118.    <dd id="smenu3">
  119.     <ul>
  120.      <li><a href="#">sub-menu 3.1</a></li>
  121.      <li><a href="#">sub-menu 3.2</a></li>
  122.      <li><a href="#">sub-menu 3.3</a></li>
  123.      <li><a href="#">sub-menu 3.4</a></li>
  124.      <li><a href="#">sub-menu 3.5</a></li>
  125.     </ul>
  126.    </dd>
  127.  </dl>
  128.  <dl>
  129.   <dt onmouseover="javascript:show('smenu4');">Menu 4</dt>
  130.    <dd id="smenu4">
  131.     <ul>
  132.      <li><a href="#">sub-menu 4.1</a></li>
  133.      <li><a href="#">sub-menu 4.2</a></li>
  134.      <li><a href="#">sub-menu 4.3</a></li>
  135.     </ul>
  136.    </dd>
  137.  </dl>
  138. </div>
  139. <div  id="bv_Text3" style="position:absolute;left: 100px;top:50px;width:723px;height:48px;z-index:14" align="left">
  140. <font  style="font-size:13px" color="#000000" face="Arial"><b><u>Graduates Photos</u><br>
  141. <br>
  142. Graduates of 1st IFA Diploma in Aromatherapy</b></font></div>
  143. <div  id="bv_Image4" style="overflow:hidden;position:absolute;left:180px;top:70px;z-index:15" align="left">
  144. <img   src="gra_1.jpg" id="Image4" alt="" align="top" border="0" style="width:620px;height:315px;"></div>
  145. <div  id="bv_Image8" style="overflow:hidden;position:absolute;left:180px;top:631px;z-index:16" align="left">
  146. <img   src="bottom_bg.jpg" id="Image8" alt="" align="top" border="0" style="width:924px;height:84px;"></div>
  147. <div  id="bv_Image5" style="overflow:hidden;position:absolute;left:424px;top:719px;z-index:17" align="left">
  148. <img   src="link1.jpg" id="Image5" alt="" align="top" border="0" style="width:364px;height:60px;"></div>
  149. <div  id="bv_Text4" style="position:absolute;left:180px;top:50px;width:407px;height:91px;z-index:18" align="left">
  150. <font style="font-size:16px" color="#000000" face="Times New Roman">Copyright © 2008 <b>SPATEC PTE LTD</b><br>
  151. Designed by Goldbiztrading Andrew Se<br>
  152.  
  153. </b>
  154. </body>
  155. </html>
  156.  
Jan 17 '09 #21

100+
P: 236
hi all,

Btw, I was trying to separate and put the css and javascript into different file rather than put into html to manage better the code, but was having problem as the drop down menu did not show at all...

Any workaround?


Cheers...
Andrew


html
====
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.  
  5. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  6. <title></title>
  7.  
  8.  
  9.  
  10.  
  11.  
  12. <link  rel="stylesheet" href="suckerfish3.css" type="text/css" media="screen" />
  13. <script type='text/javascript' src='suckerfish3.js'></script>
  14. </head>
  15.  
  16. <b>
  17. <body bgcolor="#FFFFFF" text="#000000">
  18. <div id="bv_Shape1" style="position:absolute;left:100px;top:50px;width:928px;height:600px;z-index:0" align="center">
  19. <img src="pink.jpg" id="Shape1" align="top" alt="" title="" border="0" width="928" height="590"></div>
  20. <div id="bv_TextMenu2" style="position:absolute;left:100px;top:100px;width:67px;height:34px;z-index:4" align="center">
  21. <font style="font-size:13px;" color="#000000" face="Arial">
  22. [<a href="http://127.0.0.1/feedback.html" title="Click Here to see the feedback">Feedback</a>]</font></div>
  23.  
  24.  
  25. <div id="menu">
  26.  <dl>
  27.   <dt onmouseover="javascript:show();"><a href="" title="Return to home">Home</a></dt>
  28.  </dl>
  29.  <dl>
  30.   <dt onmouseover="javascript:show('smenu1');">Menu 1</dt>
  31.    <dd id="smenu1">
  32.     <ul>
  33.      <li><a href="#">sub-menu 1.1</a></li>
  34.      <li><a href="#">sub-menu 1.2</a></li>
  35.      <li><a href="#">sub-menu 1.3</a></li>
  36.      <li><a href="#">sub-menu 1.4</a></li>
  37.      <li><a href="#">sub-menu 1.5</a></li>
  38.      <li><a href="#">sub-menu 1.6</a></li>
  39.     </ul>
  40.    </dd>
  41.  </dl>
  42.  
  43.  <dl>
  44.   <dt onmouseover="javascript:show();"><a href="">Menu 2</a></dt>
  45.  </dl>
  46.  <dl>
  47.   <dt onmouseover="javascript:show('smenu3');">Menu 3</dt>
  48.    <dd id="smenu3">
  49.     <ul>
  50.      <li><a href="#">sub-menu 3.1</a></li>
  51.      <li><a href="#">sub-menu 3.2</a></li>
  52.      <li><a href="#">sub-menu 3.3</a></li>
  53.      <li><a href="#">sub-menu 3.4</a></li>
  54.      <li><a href="#">sub-menu 3.5</a></li>
  55.     </ul>
  56.    </dd>
  57.  </dl>
  58.  <dl>
  59.   <dt onmouseover="javascript:show('smenu4');">Menu 4</dt>
  60.    <dd id="smenu4">
  61.     <ul>
  62.      <li><a href="#">sub-menu 4.1</a></li>
  63.      <li><a href="#">sub-menu 4.2</a></li>
  64.      <li><a href="#">sub-menu 4.3</a></li>
  65.     </ul>
  66.    </dd>
  67.  </dl>
  68. </div>
  69. <div  id="bv_Text3" style="position:absolute;left: 100px;top:50px;width:723px;height:48px;z-index:14" align="left">
  70. <font  style="font-size:13px" color="#000000" face="Arial"><b><u>Graduates Photos</u><br>
  71. <br>
  72. Graduates of 1st IFA Diploma in Aromatherapy</b></font></div>
  73. <div  id="bv_Image4" style="overflow:hidden;position:absolute;left:180px;top:70px;z-index:15" align="left">
  74. <img   src="gra_1.jpg" id="Image4" alt="" align="top" border="0" style="width:620px;height:315px;"></div>
  75. <div  id="bv_Image8" style="overflow:hidden;position:absolute;left:180px;top:631px;z-index:16" align="left">
  76. <img   src="bottom_bg.jpg" id="Image8" alt="" align="top" border="0" style="width:924px;height:84px;"></div>
  77. <div  id="bv_Image5" style="overflow:hidden;position:absolute;left:424px;top:719px;z-index:17" align="left">
  78. <img   src="link1.jpg" id="Image5" alt="" align="top" border="0" style="width:364px;height:60px;"></div>
  79. <div  id="bv_Text4" style="position:absolute;left:180px;top:50px;width:407px;height:91px;z-index:18" align="left">
  80. <font style="font-size:16px" color="#000000" face="Times New Roman">Copyright © 2008 <b>SPATEC PTE LTD</b><br>
  81. Designed by Goldbiztrading Andrew Se<br>
  82.  
  83. </b>
  84. </body>
  85. </html>
  86.  
  87.  
javascript
========
Expand|Select|Wrap|Line Numbers
  1. <script type="text/javascript">
  2. <!--
  3. window.onload=show;
  4. function show(id) {
  5. var d = document.getElementById(id);
  6.  for (var i = 1; i<=100; i++) {
  7.   if (document.getElementById('smenu'+i)) 
  8. {document.getElementById('smenu'+i).style.display='none';}
  9.  }
  10. if (d) {d.style.display='block';}
  11. }
  12. //-->
  13. </script>
  14.  
css code
Expand|Select|Wrap|Line Numbers
  1. body {
  2. margin: 0;
  3. padding: 0;
  4. background: white;
  5. font: 80% verdana, arial, sans-serif;
  6. }
  7. dl, dt, dd, ul, li {
  8. margin: 0;
  9. padding: 0;
  10. list-style-type: none;
  11. }
  12. #menu {
  13. position: relative; /* Menu position that can be changed at will */
  14. top: 0;
  15. left: 0;
  16. z-index:100;
  17. width: 100%; /* precision for Opera */
  18. }
  19. #menu dl {
  20. float: left;
  21. width: 12em;
  22. }
  23. #menu dt {
  24. cursor: pointer;
  25. text-align: center;
  26. font-weight: bold;
  27. background: #ccc;
  28. border: 1px solid gray;
  29. margin: 1px;
  30. }
  31. #menu dd {
  32. display: none;
  33. border: 1px solid gray;
  34. }
  35. #menu li {
  36. text-align: center;
  37. background: #fff;
  38. }
  39. #menu li a, #menu dt a {
  40. color: #ff00ff;
  41. text-decoration: none;
  42. display: block;
  43. height: 100%;
  44. border: 0 none;
  45. }
  46. #menu li a:hover, #menu li a:focus, #menu dt a:hover, #menu dt a:focus {
  47. background: #eee;
  48. }
  49. #site {
  50. position: absolute;
  51. z-index: 1;
  52. top : 70px;
  53. left : 10px;
  54. color: #000;
  55. background-color: #ddd;
  56. padding: 5px;
  57. border: 1px solid gray;
  58. }
  59.  
Jan 17 '09 #22

Death Slaught
100+
P: 1,137
I am really sorry I have not been able to get back to this until now. We were hit with a major cold front and all the snow nocked out my Internet. We have not had school all week either.

I have completely lost track of what you wanted. Could you please repost the following:
  1. The problem/s you are encountering.
  2. What you have tried to fix them.
  3. The code you used.
  4. A working example of what you want (Preferably with validated HTML/XHTML, and CSS).

Thanks,
{\_/}
(' . ')
(")[DEATH](")
(")(")
Jan 23 '09 #23

100+
P: 236
Hi Sir,

Sorry to hear about the internet...

Below is the full code, I want to be able to collapse the submenu once i dont click on the submenu anymore, but it havent been able to achieve...

Tried on some websites including Building An Expanding DHTML Menu With CSS and JavaScript

javasript code
Expand|Select|Wrap|Line Numbers
  1.   .submenu{
  2. background-image: url(images/submenu.gif);
  3. display: block;
  4. height: 19px;
  5. margin-left: 38px;
  6. padding-top: 2px;
  7. padding-left: 7px;
  8. color: #333333;
  9. }
  10.  
  11. .hide{
  12. display: none;
  13. }
  14.  
  15. I'll also create the style that will show the hidden div tags (submenus):
  16.  
  17. .show{
  18. display: block;
  19. }
  20.  
  21.  
Thanks and Best Rgds,


Full code
Expand|Select|Wrap|Line Numbers
  1. <HTML>
  2. <BODY>
  3. <head>
  4. <style type="text/css" media="screen">
  5. <!--
  6. body {
  7. margin: 0;
  8. padding: 0;
  9. background: white;
  10. font: 80% verdana, arial, sans-serif;
  11. }
  12. dl, dt, dd, ul, li {
  13. margin: 0;
  14. padding: 0;
  15. list-style-type: none;
  16. height: 2.7em;
  17. }
  18. #menu {
  19. position: relative; /* Menu position that can be changed at will */
  20. top: 0;
  21. left: 0;
  22. z-index:100;
  23. width: 100%; /* precision for Opera */
  24. }
  25. #menu dl {
  26. float: left;
  27. width: 9em;
  28. height: 1.6em;
  29. }
  30.  
  31. #menu dt {
  32. cursor: pointer;
  33. text-align: Center;
  34. font-weight: bold;
  35. background: #ff00ff;
  36. border: 1px solid gray;
  37. color:#fff;
  38. margin: 1px;
  39. }
  40. #menu dd {
  41. display: block;
  42. text-align: left;
  43. color:#FF6900;
  44. margin: 1px;
  45.  
  46. }
  47. #menu li {
  48. text-align: center;
  49. background: #fff;
  50. height : 1.6em;
  51. }
  52. #menu li a, #menu dt a {
  53. color: #000000;
  54. text-decoration: none;
  55. display: block;
  56. height: 0.8em;
  57.  
  58. }
  59. #menu li a:hover, #menu li a:focus, #menu dt a:hover, #menu dt a:focus {
  60. background: #ff33ff;
  61. display: block;
  62. height : 1.6em;
  63. }
  64. #site {
  65. position: absolute;
  66. z-index: 1;
  67. top : 70px;
  68. left : 10px;
  69. color: #000;
  70. background-color: #ddd;
  71. padding: 5px;
  72. border: 1px purple;
  73. display: block;
  74. }
  75. -->
  76. </style>
  77. <script language="JavaScript" type="text/JavaScript">
  78. <!--
  79. function MM_jumpMenu(targ,selObj,restore){ //v3.0
  80.   eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
  81.   if (restore) selObj.selectedIndex=0;
  82. }
  83. window.onload=show;
  84. function show(id) {
  85. var d = document.getElementById(id);
  86.  for (var i = 1; i<=2100; i++) {
  87.   if (document.getElementById('smenu'+i)) 
  88. {document.getElementById('smenu'+i).style.display='none';}
  89.  }
  90. if (d) {d.style.display='block';}
  91.  
  92. }
  93.  
  94. //-->
  95. </script>
  96. </head>
  97.  
  98. <body bgcolor="#FFFFFF" text="#000000">
  99.  
  100.    <div id="menu" style="position:absolute;left:210px;top:680px; align="center";>
  101.  <dl>
  102.   <dt onmouseover="javascript:show('smenu1');">Home</dt>
  103.    <dd id="smenu1">
  104.     <ul>
  105.       <li><a 
  106. href="http://127.0.0.1/gra_photos.html">Graduates</a></li>
  107.       <li><a href="http://127.0.0.1/news.html">Photo</a></li>
  108.                <li><a href="http://127.0.0.1/promotion.html">Promotions</a></li>
  109.     </ul>
  110.    </dd>
  111.  </dl>
  112.  
  113.  <dl>
  114.   <dt onmouseover="javascript:show('smenu2');">About SPAtec</dt>
  115.   <dd id="smenu2">
  116.       <ul>
  117.        <li><a 
  118. href="http://127.0.0.1/welcome_msg.html">Welcome</a></li>
  119.           <li><a 
  120. href="http://127.0.0.1/vision.html">Vision & Mission</a></li>
  121.           <li><a 
  122. href="http://127.0.0.1/com_background.html">Company Business</a></li>
  123.                         <li><a 
  124. href="http://127.0.0.1/com_facilities.html...lities</a></li>
  125.       </ul>
  126.    </dd>
  127.  </dl>
  128.  <dl>
  129.   <dt onmouseover="javascript:show('smenu3');">Training and Education</dt>
  130.    <dd id="smenu3">
  131.     <ul>
  132.       <li><a 
  133. href="http://127.0.0.1/courses.html">Courses</a></li>
  134.       <li><a 
  135. href="http://127.0.0.1/certification.html"...cation</a></li>
  136.                 <li><a 
  137. href="http://127.0.0.1/promotion.html">Promotions</a></li>
  138.     </ul>
  139.    </dd>
  140.  </dl>
  141.  <dl>
  142.   <dt onmouseover="javascript:show('smenu4');">Trainers</dt>
  143.    <dd id="smenu4">
  144.     <ul>
  145.      <li><a 
  146. href="http://127.0.0.1/trainer.html">Trainer's Profile</a></li>
  147.     </ul>
  148.    </dd>
  149.  </dl>
  150. </div>
  151.  
  152. </BODY>
  153. </HTML>
  154.  
  155.  
Jan 24 '09 #24

100+
P: 236
hi all,

Resolved, silly bug i created myself... forgot to put
dt onmouseover="javascript:show();"

working partial code
Expand|Select|Wrap|Line Numbers
  1.   <dt onmouseover="javascript:show();"><a href="" title="Return to 
  2. home">Home</a></dt>
  3.  </dl>
  4.  <dl>
  5.   <dt onmouseover="javascript:show('smenu1');">Menu 1</dt>
  6.    <dd id="smenu1">
  7.     <ul>
  8.      <li><a href="#">sub-menu 1.1</a></li>
  9.      <li><a href="#">sub-menu 1.2</a></li>
  10.      <li><a href="#">sub-menu 1.3</a></li>
  11.      <li><a href="#">sub-menu 1.4</a></li>
  12.      <li><a href="#">sub-menu 1.5</a></li>
  13.      <li><a href="#">sub-menu 1.6</a></li>
  14.     </ul>
  15.    </dd>
  16.  </dl>
  17.  
below is the completecode...btw, how do i do external css file with the css below?


Cheers...
Andrew


complete code
Expand|Select|Wrap|Line Numbers
  1.  
  2. <HTML>
  3. <BODY>
  4. <head>
  5. <style type="text/css" media="screen">
  6. <!--
  7. body {
  8. margin: 0;
  9. padding: 0;
  10. background: white;
  11. font: 80% verdana, arial, sans-serif;
  12. }
  13. dl, dt, dd, ul, li {
  14. margin: 0;
  15. padding: 0;
  16. list-style-type: none;
  17. height: 2.7em;
  18. }
  19. #menu {
  20. position: relative; /* Menu position that can be changed at will */
  21. top: 0;
  22. left: 0;
  23. z-index:100;
  24. width: 100%; /* precision for Opera */
  25. }
  26. #menu dl {
  27. float: left;
  28. width: 9em;
  29. height: 1.6em;
  30. }
  31.  
  32. #menu dt {
  33. cursor: pointer;
  34. text-align: Center;
  35. font-weight: bold;
  36. background: #ff00ff;
  37. border: 1px solid gray;
  38. color:#fff;
  39. margin: 1px;
  40. }
  41. #menu dd {
  42. display: block;
  43. text-align: left;
  44. color:#FF6900;
  45. margin: 1px;
  46.  
  47. }
  48. #menu li {
  49. text-align: center;
  50. background: #fff;
  51. height : 1.6em;
  52. }
  53. #menu li a, #menu dt a {
  54. color: #000000;
  55. text-decoration: none;
  56. display: block;
  57. height: 0.8em;
  58.  
  59. }
  60. #menu li a:hover, #menu li a:focus, #menu dt a:hover, #menu dt a:focus {
  61. background: #ff33ff;
  62. display: block;
  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. display: block;}
  75. -->
  76. </style>
  77. <script language="JavaScript" type="text/JavaScript">
  78. <!--
  79. function MM_jumpMenu(targ,selObj,restore){ //v3.0
  80.   eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
  81.   if (restore) selObj.selectedIndex=0;
  82. }
  83. window.onload=show;
  84. function show(id) {
  85. var d = document.getElementById(id);
  86.  for (var i = 1; i<=10; i++) {
  87.   if (document.getElementById('smenu'+i)) 
  88. {document.getElementById('smenu'+i).style.display='none';}
  89.  }
  90. if (d) {d.style.display='block';}
  91. }
  92.  
  93. //-->
  94. </script>
  95. </head>
  96.  
  97. <body bgcolor="#FFFFFF" text="#000000">
  98. <div id="bv_Image2" 
  99. style="overflow:hidden;position:absolute;left:182px;top:720px;z-index:0" align="left">
  100. <img src="sante_index_c1.jpg" id="Image2" alt="" align="top" border="0" 
  101. style="width:758px;height:201px;"></div>
  102. <div id="bv_WinMedia1" 
  103. style="position:absolute;left:187px;top:0px;width:321px;height:212px;z-index:1" 
  104. align="left">
  105. <embed src="birds.wmv" id="WinMedia1" border="0" autostart="true" loop="true" width="321" 
  106. height="212">
  107. </div>
  108. <div id="bv_Text1" 
  109. style="position:absolute;left:325px;top:752px;width:444px;height:16px;z-index:2" 
  110. align="left">
  111. &nbsp;</div>
  112. <div id="bv_Image5" 
  113. style="overflow:hidden;position:absolute;left:504px;top:994px;z-index:3" align="left">
  114. <img src="Tagline_sm.jpg" id="Image5" alt="" align="top" border="0" 
  115. style="width:100px;height:45px;"></div>
  116. <div id="bv_Image3" 
  117. style="overflow:hidden;position:absolute;left:182px;top:920px;z-index:4" align="left">
  118. <img src="black.JPG" id="Image3" alt="" align="top" border="0" 
  119. style="width:758px;height:70px;"></div>
  120. <div id="bv_Text2" 
  121. style="position:absolute;left:213px;top:932px;width:684px;height:63px;z-index:5" 
  122. align="center">
  123. <font style="font-size:13px" color="#FFFFFF" face="Arial">122 Middle Road #03-07 Midlink 
  124. Plaza Singapore 188973 <br>
  125. Best viewed in 800*600 and IE 4.0 and above.<br>
  126. copyright©2008 Santehealth</font><font style="font-size:13px" color="#000000" 
  127. face="Arial"><br>
  128. </font></div>
  129. <div id="bv_TextMenu1" 
  130. style="position:absolute;left:781px;top:3px;width:150px;height:18px;z-index:6" 
  131. align="center">
  132. <font style="font-size:13px;" color="#000000" face="Arial">
  133. [<a href="" target="http://">Chinese </a>]&nbsp;[<a 
  134. href="http://">English</a>]</font></div>
  135. <div id="bv_Image6" 
  136. style="overflow:hidden;position:absolute;left:411px;top:501px;z-index:7" align="left">
  137. <img src="P3240045.JPG" id="Image6" alt="" align="top" border="0" 
  138. style="width:311px;height:167px;"></div>
  139. <div id="bv_Image7" 
  140. style="overflow:hidden;position:absolute;left:444px;top:236px;z-index:8" align="left">
  141. <img src="P3240010.JPG" id="Image7" alt="" align="top" border="0" 
  142. style="width:212px;height:116px;"></div>
  143. <div id="bv_Image8" 
  144. style="overflow:hidden;position:absolute;left:186px;top:499px;z-index:9" align="left">
  145. <img src="P3240029.JPG" id="Image8" alt="" align="top" border="0" 
  146. style="width:225px;height:168px;"></div>
  147. <div id="bv_Image9" 
  148. style="overflow:hidden;position:absolute;left:186px;top:236px;z-index:10" align="left">
  149. <img src="P3240038.JPG" id="Image9" alt="" align="top" border="0" 
  150. style="width:260px;height:265px;"></div>
  151. <div id="bv_Image10" 
  152. style="overflow:hidden;position:absolute;left:721px;top:501px;z-index:11" align="left">
  153. <img src="P3240037.JPG" id="Image10" alt="" align="top" border="0" 
  154. style="width:219px;height:167px;"></div>
  155. <div id="bv_Image11" 
  156. style="overflow:hidden;position:absolute;left:508px;top:42px;z-index:12" align="left">
  157. <img src="P3240002.JPG" id="Image11" alt="" align="top" border="0" 
  158. style="width:431px;height:170px;"></div>
  159. <div id="bv_Image4" 
  160. style="overflow:hidden;position:absolute;left:447px;top:353px;z-index:13" align="left">
  161. <img src="sante_top_banner_bg.jpg" id="Image4" alt="" align="top" border="0" 
  162. style="width:488px;height:147px;"></div>
  163. <div id="bv_Image1" 
  164. style="overflow:hidden;position:absolute;left:656px;top:234px;z-index:14" align="left">
  165. <img src="P3240045.JPG" id="Image1" alt="" align="top" border="0" 
  166. style="width:283px;height:268px;"></div>
  167. <div id="bv_Image12" 
  168. style="overflow:hidden;position:absolute;left:182px;top:668px;z-index:15" align="left">
  169. <img src="black.JPG" id="Image12" alt="" align="top" border="0" 
  170. style="width:758px;height:52px;"></div>
  171. <div id="bv_Image13" 
  172. style="overflow:hidden;position:absolute;left:186px;top:212px;z-index:16" align="left">
  173. <img src="black.JPG" id="Image13" alt="" align="top" border="0" 
  174. style="width:753px;height:25px;"></div>
  175.  
  176.    <div id="menu" style="position:absolute;left:210px;top:680px; align="center";>
  177.  
  178. <dl>
  179.   <dt onmouseover="javascript:show();"><a href="" title="Return to 
  180. home">Home</a></dt>
  181.  </dl>
  182.  <dl>
  183.   <dt onmouseover="javascript:show('smenu1');">Menu 1</dt>
  184.    <dd id="smenu1">
  185.     <ul>
  186.      <li><a href="#">sub-menu 1.1</a></li>
  187.      <li><a href="#">sub-menu 1.2</a></li>
  188.      <li><a href="#">sub-menu 1.3</a></li>
  189.      <li><a href="#">sub-menu 1.4</a></li>
  190.      <li><a href="#">sub-menu 1.5</a></li>
  191.      <li><a href="#">sub-menu 1.6</a></li>
  192.     </ul>
  193.    </dd>
  194.  </dl>
  195.  
  196.  <dl>
  197.   <dt onmouseover="javascript:show();"><a href="">Menu 2</a></dt>
  198.  </dl>
  199.  <dl>
  200.   <dt onmouseover="javascript:show('smenu3');">Menu 3</dt>
  201.    <dd id="smenu3">
  202.     <ul>
  203.      <li><a href="#">sub-menu 3.1</a></li>
  204.      <li><a href="#">sub-menu 3.2</a></li>
  205.      <li><a href="#">sub-menu 3.3</a></li>
  206.      <li><a href="#">sub-menu 3.4</a></li>
  207.      <li><a href="#">sub-menu 3.5</a></li>
  208.     </ul>
  209.    </dd>
  210.  </dl>
  211.  <dl>
  212.   <dt onmouseover="javascript:show('smenu4');">Menu 4</dt>
  213.    <dd id="smenu4">
  214.     <ul>
  215.      <li><a href="#">sub-menu 4.1</a></li>
  216.      <li><a href="#">sub-menu 4.2</a></li>
  217.      <li><a href="#">sub-menu 4.3</a></li>
  218.     </ul>
  219.    </dd>
  220.  </dl>
  221.  
  222. </div>
  223.  
  224. <div class="x" 
  225. style="position:absolute;left:630px;top:0px;width:723px;height:48px;z-index:14" 
  226. align="left">
  227. <font class="x" style="font-size:13px" color="#000000" face="Arial"><b>
  228. Sante Related</b></font></div>
  229. <form name="form1" 
  230. style="position:absolute;left:630px;top:6px;width:150px;font-family:Courier 
  231. New;font-size:16px;z-index:24>
  232.                        <p><strong><font color="#FFFFFF" size="2" face="Arial, Helvetica, 
  233. sans-serif">
  234.                         <br>
  235.                         </font></strong></p>
  236.                         <select name="menu1" size="1" 
  237. onChange="MM_jumpMenu('parent',this,0)">
  238.                           <option value="SanteHealth" 
  239. selected>Santehealth</option>
  240.                           <option value="http://www.spatec.com.sg/courses.html">Training
  241.                           Courses</option>
  242.                           <option 
  243. value="http://www.santehealth.com.sg/eturning.html">E-Turning
  244.                           Point</option>
  245.                         </select>
  246.                       </p>
  247.                     </form>
  248. <div class="x" 
  249. style="position:absolute;left:779px;top:0px;width:723px;height:48px;z-index:14" 
  250. align="left">
  251. <font class="x" style="font-size:13px" color="#000000" face="Arial"><b>
  252. Franchise Branches</b></font></div>
  253. <form name="form2" 
  254. style="position:absolute;left:779px;top:6px;width:150px;font-family:Courier 
  255. New;font-size:16px;z-index:24>
  256.                       <p><strong><font color="#FFFFFF" size="2" face="Arial, Helvetica, 
  257. sans-serif">
  258.                         <br>
  259.                         </font></strong></p>
  260.                       <p>
  261.                         <select name="menu2" size="1" 
  262. onChange="MM_jumpMenu('parent',this,0)">
  263.                           <option value="SanteHealth" 
  264. selected>Franchise1</option>
  265.                           <option value="http://www.spatec.com.sg/courses.html">Franchise 
  266. 2</option>
  267.                           <option 
  268. value="http://www.santehealth.com.sg/eturning.html">Franchise 3</option>
  269.                         </select>
  270.                       </p>
  271.                     </form>
  272. </BODY>
  273. </HTML>
  274.  
  275.  
Jan 24 '09 #25

Death Slaught
100+
P: 1,137
Did you mean that you wanted the menu to collapse when the mouse is no longer hovering it?

Thanks,
{\_/}
(' . ')
(")[DEATH](")
(")(")
Jan 26 '09 #26

100+
P: 236
yes... cheers...

was my answer correct? any alternatives??

thanks again...
Jan 27 '09 #27

Post your reply

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