473,320 Members | 1,939 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

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

How to create menuing system

236 100+
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
26 2841
drhowarddrfine
7,435 Expert 4TB
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
1,137 1GB
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
happyse27
236 100+
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
happyse27
236 100+
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
1,137 1GB
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
happyse27
236 100+
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
1,137 1GB
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
happyse27
236 100+
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
1,137 1GB
Take a look at the z-index property.

Thanks,
{\_/}
(' . ')
(")[DEATH](")
(")(")
Jan 13 '09 #10
happyse27
236 100+
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
1,137 1GB
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
happyse27
236 100+
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
happyse27
236 100+
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
happyse27
236 100+
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
happyse27
236 100+
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
1,137 1GB
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
happyse27
236 100+
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
happyse27
236 100+
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
happyse27
236 100+
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
happyse27
236 100+
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
1,137 1GB
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
happyse27
236 100+
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
happyse27
236 100+
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
1,137 1GB
Did you mean that you wanted the menu to collapse when the mouse is no longer hovering it?

Thanks,
{\_/}
(' . ')
(")[DEATH](")
(")(")
Jan 26 '09 #26
happyse27
236 100+
yes... cheers...

was my answer correct? any alternatives??

thanks again...
Jan 27 '09 #27

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

Similar topics

7
by: Bil Muh | last post by:
Esteemede Developers, I would like to Thank All of You in advance for your sincere guidances. I am developing a software using Visual C++ .NET Standard Edition with Windows Form (.NET)...
6
by: SamIAm | last post by:
Hi am creating a email application that needs to mail out a very large amount of emails. I have created a multithreaded c# application that using message queuing. I have created a threadpool of 5...
3
by: Richard Skopal | last post by:
In .NET Windows forms I can create a metafile using this code: Graphics grph = aControl.CreateGraphics(); IntPtr ipHDC = grph.GetHdc(); Metafile mf = new Metafile(aImgFilePath, ipHDC,...
3
by: rishi145 | last post by:
i want to build a small cms and wanted to know if it was possible to generate a aspx page dynamically? if so how basically i wan to be able to have a button create new page and name it. thanks...
23
by: sandy | last post by:
I need (okay, I want) to make a dynamic array of my class 'Directory', within my class Directory (Can you already smell disaster?) Each Directory can have subdirectories so I thought to put these...
27
by: max | last post by:
Hello, I am a newbye, and I'm trying to write a simple application. I have five tables with three columns; all tables are identical; I need to change some data in the first table and let VB...
14
by: Stan Brown | last post by:
I posted over the holidays, but I venture to repost since there were no responses. Maybe people overlooked my article among all the excitement. I'm looking for a template or model for menus that...
1
by: MaryamSh | last post by:
Hi, I am creating a Dynamic Search in my application. I create a user control and in Page_load event I create a dynamic dropdownlist and 2 dynamic button (Add,Remove) By pressing Add button...
0
by: MaryamSh | last post by:
Create Dynamic Dropdownlist Controls and related event -------------------------------------------------------------------------------- Hi, I am creating a Dynamic Search in my application. I...
3
by: 100grand | last post by:
Modify the Inventory Program to use a GUI. The GUI should display the information one product at a time, including the item number, the name of the product, the number of units in stock, the price...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

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

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