How to create menuing system

**drhowarddrfine** · Jan 9 '09, 05:29 PM

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".

**Death Slaught** · Jan 9 '09, 10:49 PM

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](")
(")(")

**happyse27** · Jan 10 '09, 04:10 PM

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
=======

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/URL]">
<html xmlns="[URL="http://www.w3.org/1999/xhtml"]XHTML namespace[/URL]">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<script type='text/javascript' src='jquery-1.2.3.min.js'></script>
<script type='text/javascript' src='menu.js'></script>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>
<body><ul id="nav">
    <li><a href="[URL]http://127.0.0.1/preview.html">1[/URL] HTML</a></li>
    <li><a href="#">2 CSS</a></li>
    <li><a href="#">3 Javascript </a>
      <ul>
            <li><a href="#">3.1 jQuery</a>
              <ul>
                    <li><a href="#">3.1.1 Download</a></li>
                    <li><a href="#">3.1.2 Tutorial</a></li>
              </ul>
            </li>
            <li><a href="#">3.2 Mootools</a></li>
            <li><a href="#">3.3 Prototype</a></li>
      </ul>
    </li>
</ul>
</body>
</html>

ccs code
=======

Code:

body{font-size:0.85em;font-family:Verdana, Arial, Helvetica, sans-serif;}
#nav, 
#nav 
ul{margin:0;padding:0;list-style-type:none;list-style-position:outside;position:relative;li
ne-height:1.5em; }
#nav a{display:block;padding:0px 5px;border:1px solid 
#333;color:#fff;text-decoration:none;background-color:#333;}
#nav a:hover{background-color:#fff;color:#333;}
#nav li{float:left;position:relative;}
#nav ul {position:absolute;display:none;width:12em;top:1.5em;}
#nav li ul a{width:12em;height:auto;float:left;}
#nav ul ul{top:auto;} 
#nav li ul ul {left:12em;margin:0px 0 0 10px;}
#nav li:hover ul ul, #nav li:hover ul ul ul, 
#nav 
li:hover ul ul ul ul{display:none;}
#nav li:hover ul, 
#nav li li:hover ul, 
#nav li li li:hover ul, 
#nav li li li li:hover ul{display:block;}

**happyse27** · Jan 11 '09, 02:03 AM

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...

**Death Slaught** · Jan 12 '09, 01:34 PM

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](")
(")(")

**happyse27** · Jan 13 '09, 01:01 PM

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

Code:

body{font-size:0.75em;font-family:Verdana, Arial, Helvetica, sans-serif;}
#nav, 
#nav 
ul{margin:0.99;padding:0;list-style-type:none;list-style-position:outside;position:relative
;line-height:1.6em; }
#nav a{display:block;padding:0px 5px;border:1px solid #fff;color:
#fff;text-decoration:none;background-color:
#ff00ff;}
#nav a:hover{background-color:
#fff;color:
#333;}
#nav li{float:left;position:relative;}
#nav ul {position:absolute;display:none;width:12em;top:1.8em;}
#nav li ul a{width:12em;height:auto;float:left;}
#nav ul ul{top:auto;} 
#navbar li ul ul {left:12em;margin:0px 0 0 10px;}
#nav li:hover ul ul, 
#nav li:hover ul ul ul, 
#nav li:hover ul ul ul ul{display:block;}
#nav li:hover ul, 
#nav li li:hover ul, 
#nav li li li:hover ul, 
#nav li li li li:hover ul{display:block;}

**Death Slaught** · Jan 13 '09, 02:56 PM

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:

[CODE=css]#wrapper {
width:217px;
margin:0 auto;
}[/CODE]

[CODE=html]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt d">
<html xmlns="XHTML namespace">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<script type='text/javascript' src='jquery-1.2.3.min.js'></script>
<script type='text/javascript' src='menu.js'></script>
<link rel="stylesheet " href="style.css " type="text/css" media="screen" />
</head>
<body>
<div id="wrapper">
<ul id="nav">
<li><a href="http://127.0.0.1/preview.html">1 HTML</a></li>
<li><a href="#">2 CSS</a></li>
<li><a href="#">3 Javascript </a>
<ul>
<li><a href="#">3.1 jQuery</a>
<ul>
<li><a href="#">3.1.1 Download</a></li>
<li><a href="#">3.1.2 Tutorial</a></li>
</ul>
</li>
<li><a href="#">3.2 Mootools</a></li>
<li><a href="#">3.3 Prototype</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
[/CODE]

[CODE=css]body{font-size:0.85em;fon t-family:Verdana, Arial, Helvetica, sans-serif;}
#wrapper {width:217px;ma rgin:0 auto;}
#nav,
#nav
ul{margin:0;pad ding:0;list-style-type:none;list-style-position:outsid e;li
ne-height:1.5em; }
#nav a{display:block ;padding:0px 5px;border:1px solid
#333;color:#fff ;text-decoration:none ;background-color:#333;}
#nav a:hover{backgro und-color:#fff;colo r:#333;}
#nav li{float:left;p osition:relativ e;}
#nav ul {position:absol ute;display:non e;width:12em;to p:1.5em;}
#nav li ul a{width:12em;he ight:auto;float :left;}
#nav ul ul{top:auto;}
#nav li ul ul {left:12em;marg in:0px 0 0 10px;}
#nav li:hover ul ul, #nav li:hover ul ul ul,
#nav
li:hover ul ul ul ul{display:none ;}
#nav li:hover ul,
#nav li li:hover ul,
#nav li li li:hover ul,
#nav li li li li:hover ul{display:bloc k;}[/CODE]

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](")
(")(")

**happyse27** · Jan 13 '09, 04:13 PM

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

**Death Slaught** · Jan 13 '09, 05:47 PM

Take a look at the z-index property.

Thanks,
{\_/}
(' . ')
(")[DEATH](")
(")(")

**happyse27** · Jan 13 '09, 06:08 PM

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
=============== ===

Code:

body{font-size:0.75em;font-family:Verdana, Arial, Helvetica, sans-serif;}
#nav, 
#nav 
ul{margin:0.99;padding:0;list-style-type:none;list-style-position:inside;position:relative;
line-height:1.6em;}
#nav a{display:block;padding:0px 5px;border:1px solid #fff;color:
#fff;text-decoration:none;background-color:
#ff00ff;}
#nav a:hover{background-color:
#fff;color:
#333;}

#nav li{float:left;position:relative;}
#nav ul {position:absolute;display:none;width:12em;top:1.8em;z-index:-1;}
#nav li ul a{width:12em;height:auto;float:left;border:1px solid #fff;}
#nav ul ul{top:auto;} 
#navbar li ul ul {left:12em;margin:0px 0 0 10px}
#nav li:hover ul ul, 
#nav li:hover ul ul ul, 
#nav li:hover ul ul ul ul{display:none;}
#nav li:hover ul, 
#nav li li:hover ul, 
#nav li li li:hover ul, 
#nav li li li li:hover ul{display:block;}

b) html code(partial)
===============

Code:

<div style="position:absolute;left:169px;top:180px; align="center"; id="wrapper" ><ul id="nav" class="dropdown dropdown-horizontal">
   <li><a href="#">Home</a></li>
       <ul>
               <li><a href="[URL]http://127.0.0.1/gra_photos.html">Graduates</a></li[/URL]>
               <li><a href="[URL]http://127.0.0.1/news.html">Photo</a></li[/URL]>
               <li><a href="[URL]http://127.0.0.1/promotion.html">Promotions</a></li[/URL]>
      </ul>
    <li><a href="#">About SPAtec</a></li>
      <ul>
              <li><a href="[URL]http://127.0.0.1/welcome_msg.html">Welcome</a></li[/URL]>
              <li><a href="[URL]http://127.0.0.1/vision.html">Vision[/URL] & Mission</a></li>
              <li><a href="[URL]http://127.0.0.1/com_background.html">Company[/URL] Business</a></li>
              <li><a href="[URL]http://127.0.0.1/com_facilities.html">Facilities</a></li[/URL]>
      </ul>
    <li><a href="#">Training and Education</a>
      <ul>
             <li><a href="[URL]http://127.0.0.1/courses.html">Courses</a></li[/URL]>
             <li><a href="[URL]http://127.0.0.1/certification.html">Certification</a></li[/URL]>
             <li><a href="[URL]http://127.0.0.1/promotion.html">Promotions</a></li[/URL]>
   </ul>
    <li><a href="#">Trainers</a>
       <ul>
            <li><a href="[URL="http://127.0.0.1/trainer.html&quot;>Trainer's"]http://127.0.0.1/trainer.html">Trainer's[/URL] Profile</a></li>
   </ul>
    <li><a href="#">Student Information</a>
      <ul>
             <li><a href="[URL]http://127.0.0.1/student.html">CaseTrust</a></li[/URL]>
             <li><a href="[URL]http://127.0.0.1/sps.pdf">International[/URL] Student Protection Scheme</a></li>
             <li><a href="[URL]http://127.0.0.1/master.html">Master[/URL] Escrow Agreement</a></li>
             <li><a href="[URL]http://127.0.0.1/c_funding.html">SDF</a></li[/URL]>
            <li><a href="[URL]http://127.0.0.1/app_procedures.html">SRP</a></li[/URL]>
            <li><a href="[URL]http://127.0.0.1/amp07/web">AMP</a></li[/URL]>
            <li><a href="[URL]http://127.0.0.1/asp/index.asp">STB</a></li[/URL]>
            <li><a href="[URL]http://127.0.0.1/testimonial.html">Testimonal</a></li[/URL]>
            <li><a href="[URL]http://127.0.0.1/gra_photos.html">Graduates</a></li[/URL]>
            <li><a href="[URL]http://127.0.0.1/stu_services.html">Student[/URL] Services</a></li>
   </ul>
    <li><a href="#">Enrolment</a>
      <ul>
            <li><a href="[URL]http://127.0.0.1/registration.html">Online[/URL] Registration</a></li>
   </ul>
    <li><a href="#">Career Development</a>
      <ul>
               <li><a href="[URL]http://127.0.0.1/career.html">Job[/URL] Opportunities</a></li>
      </ul>
    <li><a href="#">Link to Other Websites</a>
   <ul>
               <li><a href="[URL]http://127.0.0.1/">Courses</a></li[/URL]>
      </ul>
    </li>
</ul></DIV>

**Death Slaught** · Jan 13 '09, 06:14 PM

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](")
(")(")

**happyse27** · Jan 14 '09, 01:02 AM

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
--------------------------------

Code:

body{font-size:0.75em;font-family:Verdana, Arial, Helvetica, sans-serif;}
#nav, 
#nav 
ul{margin:0.99;padding:0;list-style-type:none;list-style-position:inside;position:relative;
line-height:1.6em;}
#nav a{display:block;padding:0px 5px;border:1px solid #fff;color:
#fff;text-decoration:none;background-color:
#ff00ff;}
#nav a:hover{background-color:
#fff;color:
#333;}

#nav li{float:left;position:relative;}
#nav ul {position:absolute;display:none;width:12em;top:1.8em;z-index:-1;}
#nav li ul a{width:12em;height:auto;float:left;border:1px solid; #fff;z-index:-1;}
#nav ul ul{top:auto;} 
#navbar li ul ul {left:12em;margin:0px 0 0 10px;z-index:-1;}
#nav li:hover ul ul, 
#nav li:hover ul ul ul, 
#nav li:hover ul ul ul ul{display:block;z-index:-1}
#nav li:hover ul, 
#nav li li:hover ul, 
#nav li li li:hover ul, 
#nav li li li li:hover ul{display:block;}

tried with all 4 z index of 1
---------------------------------------

Code:

body{font-size:0.75em;font-family:Verdana, Arial, Helvetica, sans-serif;}
#nav, 
#nav 
ul{margin:0.99;padding:0;list-style-type:none;list-style-position:inside;position:relative;
line-height:1.6em;}
#nav a{display:block;padding:0px 5px;border:1px solid #fff;color:
#fff;text-decoration:none;background-color:
#ff00ff;}
#nav a:hover{background-color:
#fff;color:
#333;}

#nav li{float:left;position:relative;}
#nav ul {position:absolute;display:none;width:12em;top:1.8em;z-index:1;}
#nav li ul a{width:12em;height:auto;float:left;border:1px solid; #fff;z-index:1;}
#nav ul ul{top:auto;} 
#navbar li ul ul {left:12em;margin:0px 0 0 10px;z-index:1;}
#nav li:hover ul ul, 
#nav li:hover ul ul ul, 
#nav li:hover ul ul ul ul{display:block;z-index:1}
#nav li:hover ul, 
#nav li li:hover ul, 
#nav li li li:hover ul, 
#nav li li li li:hover ul{display:block;}

**happyse27** · Jan 14 '09, 10:11 AM

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
=======

Code:

body{font-size:0.75em;font-family:Verdana, Arial, Helvetica, sans-serif;}
#nav, 
#nav 
ul{margin:0.99;padding:0;list-style-type:none;list-style-position:inside;position:relative;
line-height:1.6em;z-index:2;}
#nav a{display:block;padding:0px 5px;border:1px solid #fff;color:
#fff;text-decoration:none;background-color:
#ff00ff;z-index:2;}
#nav a:hover{background-color:
#fff;color:
#333;z-index:2;}

#nav li{float:left;position:relative;z-index:2;}
#nav ul {position:absolute;display:none;width:12em;top:1.8em;z-index:2;}
#nav li ul a{width:12em;height:auto;float:left;border:1px solid; #fff;z-index:2;}
#nav ul ul{top:auto;} 
#navbar li ul ul {left:12em;margin:0px 0 0 10px;z-index:2;}
#nav li:hover ul ul, 
#nav li:hover ul ul ul, 
#nav li:hover ul ul ul ul{display:block;z-index:2;}
#nav li:hover ul, 
#nav li li:hover ul, 
#nav li li li:hover ul, 
#nav li li li li:hover ul{display:block;z-index:2;}

html code
=======

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/URL]">
<html xmlns="[url=http://www.w3.org/1999/xhtml]XHTML namespace[/url]">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<style type="text/css">
img.x
{
z-index:1
}
img.y
{
z-index:2
}
</style>

<script type='text/javascript' src='jquery-1.2.3.min.js'></script>
<script type='text/javascript' src='menu.js'></script>
<link class="y" rel="stylesheet" href="style.css" type="text/css" media="screen" />

</head>

<body><b>
<body bgcolor="#FFFFFF" text="#000000">
<div class="x" id="bv_Shape1" style="position:absolute;left:166px;top:206px;width:928px;height:600px;z-index:0" align="center">
<img class="x" src="pink.jpg" id="Shape1" align="top" alt="" title="" border="0" width="928" height="590"></div>
<div class="x" id="bv_Image1" style="overflow:hidden;position:absolute;left:168px;top:0px;z-index:1" align="left">
<img  class="x" src="top_bg.jpg" id="Image1" alt="" align="top" border="0" style="width:924px;height:178px;"></div>
<div class="x" id="bv_TextMenu1" style="position:absolute;left:813px;top:13px;width:78px;height:18px;z-index:2" align="center">
<font class="x" style="font-size:13px;" color="#000000" face="Arial">
[<a href="[URL]http://127.0.0.1/contact.html[/URL]" title="Click Here to see the reference">Contact Us</a>]</font></div>
<div class="x" id="bv_Text1" style="position:absolute;left:901px;top:13px;width:7px;height:16px;z-index:3" align="left">
<font class="x" style="font-size:13px" color="#0000FF" face="Arial">|</font></div>
<div class="x" id="bv_TextMenu2" style="position:absolute;left:919px;top:13px;width:67px;height:34px;z-index:4" align="center">
<font class="x" style="font-size:13px;" color="#000000" face="Arial">
[<a href="[URL]http://127.0.0.1/feedback.html[/URL]" title="Click Here to see the feedback">Feedback</a>]</font></div>
<div class="x" id="bv_Text2" style="position:absolute;left:1012px;top:13px;width:6px;height:16px;z-index:5" align="left">
<font class="x" style="font-size:13px" color="#0000FF" face="Arial">|</font></div>
<div class="x" id="bv_TextMenu3" style="position:absolute;left:996px;top:14px;width:102px;height:18px;z-index:6" align="center">
<font class="x" style="font-size:13px;" color="#000000" face="Arial">
[<a href="[URL]http://127.0.0.1/sitemap.html[/URL]" title="Click Here to see the Site Map">Site Map</a>]</font></div>
<div class="x" id="bv_Text6" style="position:absolute;left:512px;top:25px;width:150px;height:31px;z-index:7" align="left">
<font class="x" style="font-size:13px" color="#000000" face="Arial">Chinese Version<br>
</font></div>
<div class="x" id="bv_Image6" style="overflow:hidden;position:absolute;left:464px;top:1px;z-index:8" align="left">
<a href="[URL]http://www.spatec.com.sg/chinese/"><img[/URL]  class="x" src="lang_ch.gif" id="Image6" alt="" align="top" border="0" style="width:127px;height:54px;"></a></div>
<div class="x" id="bv_Image7" style="overflow:hidden;position:absolute;left:602px;top:0px;z-index:9" align="left">
<a href="[URL]http://www.spatec.com.sg/vietnam/"><img[/URL]  class="x" src="lang_vi.gif" id="Image7" alt="" align="top" border="0" style="width:127px;height:54px;"></a></div>
<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">
<option value="[URL]http://www.spatec.com.sg">Spatec</option[/URL]>
<option value="[URL]http://www.sensori-intl.com/">Senori</option[/URL]>
</select>
<div class="x" id="bv_Image2" style="overflow:hidden;position:absolute;left:0px;top:0px;z-index:11" align="left">
<img class="x" src="mid_bg.jpg" id="Image2" alt="" align="top" border="0" style="width:168px;height:786px;"></div>
<div class="x" id="bv_Image3" style="overflow:hidden;position:absolute;left:1092px;top:0px;z-index:12" align="left">
<img class="x" src="mid_bg.jpg" id="Image3" alt="" align="top" border="0" style="width:214px;height:786px;"></div>
<div class="x" id="bv_Text7" style="position:absolute;left:140px;top:939px;width:920px;height:15px;z-index:13" align="center">
&nbsp;</div>
 

  <div class="y" style="position:absolute;left:169px;top:200px; align="center"; id="wrapper" ><ul class="y" id="nav" class="dropdown dropdown-horizontal">
   <li><a href="#">Home</a></li>
       <ul>
               <li><a href="[URL]http://127.0.0.1/gra_photos.html">Graduates</a></li[/URL]>
               <li><a href="[URL]http://127.0.0.1/news.html">Photo</a></li[/URL]>
               <li><a href="[URL]http://127.0.0.1/promotion.html">Promotions</a></li[/URL]>
      </ul>
    <li><a href="#">About SPAtec</a></li>
      <ul>
              <li><a href="[URL]http://127.0.0.1/welcome_msg.html">Welcome</a></li[/URL]>
              <li><a href="[URL]http://127.0.0.1/vision.html">Vision[/URL] & Mission</a></li>
              <li><a href="[URL]http://127.0.0.1/com_background.html">Company[/URL] Business</a></li>
              <li><a href="[URL]http://127.0.0.1/com_facilities.html">Facilities</a></li[/URL]>
      </ul>
    <li><a class="y" href="#">Training and Education</a>
      <ul class="y">
             <li><a href="[URL]http://127.0.0.1/courses.html">Courses</a></li[/URL]>
             <li><a href="[URL]http://127.0.0.1/certification.html">Certification</a></li[/URL]>
             <li><a class="x" href="[URL]http://127.0.0.1/promotion.html[/URL]" class="y">Promotions</a></li>
   </ul>
    <li><a href="#">Trainers</a>
       <ul>
            <li><a href="[URL="http://127.0.0.1/trainer.html&quot;>Trainer's"]http://127.0.0.1/trainer.html">Trainer's[/URL] Profile</a></li>
   </ul>
    <li><a href="#">Student Information</a>
      <ul>
             <li><a href="[URL]http://127.0.0.1/student.html">CaseTrust</a></li[/URL]>
             <li><a href="[URL]http://127.0.0.1/sps.pdf">International[/URL] Student Protection Scheme</a></li>
             <li><a href="[URL]http://127.0.0.1/master.html">Master[/URL] Escrow Agreement</a></li>
             <li><a href="[URL]http://127.0.0.1/c_funding.html">SDF</a></li[/URL]>
            <li><a href="[URL]http://127.0.0.1/app_procedures.html">SRP</a></li[/URL]>
            <li><a href="[URL]http://127.0.0.1/amp07/web">AMP</a></li[/URL]>
            <li><a href="[URL]http://127.0.0.1/asp/index.asp">STB</a></li[/URL]>
            <li><a href="[URL]http://127.0.0.1/testimonial.html">Testimonal</a></li[/URL]>
            <li><a href="[URL]http://127.0.0.1/gra_photos.html">Graduates</a></li[/URL]>
            <li><a href="[URL]http://127.0.0.1/stu_services.html">Student[/URL] Services</a></li>
   </ul>
    <li><a href="#">Enrolment</a>
      <ul>
            <li><a href="[URL]http://127.0.0.1/registration.html">Online[/URL] Registration</a></li>
   </ul>
    <li><a href="#">Career Development</a>
      <ul>
               <li><a href="[URL]http://127.0.0.1/career.html">Job[/URL] Opportunities</a></li>
      </ul>
    <li><a href="#">Link to Other Websites</a>
   <ul>
               <li><a href="[URL]http://127.0.0.1/">Courses</a></li[/URL]>
      </ul>
    </li>
</ul></DIV>
<div class="x" id="bv_Text3" style="position:absolute;left:316px;top:261px;width:723px;height:48px;z-index:14" align="left">
<font class="x" style="font-size:13px" color="#000000" face="Arial"><b><u>Graduates Photos</u><br>
<br>
Graduates of 1st IFA Diploma in Aromatherapy</b></font></div>
<div class="x" id="bv_Image4" style="overflow:hidden;position:absolute;left:316px;top:312px;z-index:15" align="left">
<img  class="x" src="gra_1.jpg" id="Image4" alt="" align="top" border="0" style="width:620px;height:315px;"></div>
<div class="x" id="bv_Image8" style="overflow:hidden;position:absolute;left:168px;top:631px;z-index:16" align="left">
<img  class="x" src="bottom_bg.jpg" id="Image8" alt="" align="top" border="0" style="width:924px;height:84px;"></div>
<div class="x" id="bv_Image5" style="overflow:hidden;position:absolute;left:424px;top:719px;z-index:17" align="left">
<img  class="x" src="link1.jpg" id="Image5" alt="" align="top" border="0" style="width:364px;height:60px;"></div>
<div class="y" id="bv_Text4" style="position:absolute;left:497px;top:669px;width:407px;height:91px;z-index:18" align="left">
<font style="font-size:16px" color="#000000" face="Times New Roman">Copyright © 2008 <b>SPATEC PTE LTD</b><br>
Designed by Goldbiztrading Andrew Se<br>
<br>
<br>
</font></div>
<div id="bv_TextMenu5" style="position:absolute;left:194px;top:643px;width:27px;height:26px;z-index:19" align="center">
<font style="font-size:9.3px;" color="#000000" face="Arial">
<a href="[url=http://www.spatec.com.sg/index.html]Spatec training and education centre[/url]" title="Click Here to see the reference">Home</a></font></div>
<div id="bv_Text8" style="position:absolute;left:225px;top:639px;width:9px;height:16px;z-index:20" align="left">
<font style="font-size:13px" color="#0000FF" face="Arial">|</font></div>
<div id="bv_TextMenu4" style="position:absolute;left:233px;top:643px;width:61px;height:14px;z-index:21" align="center">
<font style="font-size:9.3px;" color="#000000" face="Arial">
<a href="[url=http://www.spatec.com.sg/welcome_msg.html]Spatec[/url]" title="Click Here to see the feedback">About Spatec</a></font></div>
<div id="bv_Text5" style="position:absolute;left:298px;top:640px;width:6px;height:16px;z-index:22" align="left">
<font style="font-size:13px" color="#0000FF" face="Arial">|</font></div>
<div id="bv_TextMenu7" style="position:absolute;left:300px;top:644px;width:101px;height:14px;z-index:23" align="center">
<font style="font-size:9.3px;" color="#000000" face="Arial">
<a href="[url=http://www.spatec.com.sg/courses.html]Spatec training and education centre[/url]" title="Click Here to see the reference">Training & Education</a></font></div>
<div id="bv_Text9" style="position:absolute;left:402px;top:641px;width:7px;height:16px;z-index:24" align="left">
<font style="font-size:13px" color="#0000FF" face="Arial">|</font></div>
<div id="bv_TextMenu6" style="position:absolute;left:417px;top:644px;width:35px;height:26px;z-index:25" align="center">
<font style="font-size:9.3px;" color="#000000" face="Arial">
<a href="[url=http://www.spatec.com.sg/trainer.html]Spatec training and education centre[/url]" title="Click Here to see the reference">Trainers</a></font></div>
<div id="bv_Text10" style="position:absolute;left:462px;top:642px;width:7px;height:16px;z-index:26" align="left">
<font style="font-size:13px" color="#0000FF" face="Arial">|</font></div>
<div id="bv_TextMenu9" style="position:absolute;left:472px;top:645px;width:93px;height:14px;z-index:27" align="center">
<font style="font-size:9.3px;" color="#000000" face="Arial">
<a href="[url=http://www.spatec.com.sg/student.html]Untitled Document[/url]" title="Click Here to see the feedback">Student Information</a></font></div>
<div id="bv_Text11" style="position:absolute;left:570px;top:642px;width:6px;height:16px;z-index:28" align="left">
<font style="font-size:13px" color="#0000FF" face="Arial">|</font></div>
<div id="bv_TextMenu8" style="position:absolute;left:583px;top:645px;width:44px;height:26px;z-index:29" align="center">
<font style="font-size:9.3px;" color="#000000" face="Arial">
<a href="[url=http://www.spatec.com.sg/registration.html]SPAtec[/url]" title="Click Here to see the Site Map">Enrolment</a></font></div>
<div id="bv_Text12" style="position:absolute;left:637px;top:641px;width:6px;height:16px;z-index:30" align="left">
<font style="font-size:13px" color="#0000FF" face="Arial">|</font></div>
<div id="bv_TextMenu11" style="position:absolute;left:638px;top:646px;width:124px;height:14px;z-index:31" align="center">
<font style="font-size:9.3px;" color="#000000" face="Arial">
<a href="ttp://www.spatec.com.sg/career.html" title="Click Here to see the reference">Career Development</a></font></div>
<div id="bv_Text13" style="position:absolute;left:756px;top:642px;width:7px;height:16px;z-index:32" align="left">
<font style="font-size:13px" color="#0000FF" face="Arial">|</font></div>
<div id="bv_TextMenu10" style="position:absolute;left:767px;top:646px;width:56px;height:14px;z-index:33" align="center">
<font style="font-size:9.3px;" color="#000000" face="Arial">
<a href="[url=http://www.spatec.com.sg/contact.html]SPAtec[/url]" title="Click Here to see the feedback">Contact Us</a></font></div>
<div id="bv_Text14" style="position:absolute;left:825px;top:643px;width:6px;height:16px;z-index:34" align="left">
<font style="font-size:13px" color="#0000FF" face="Arial">|</font></div>
<div id="bv_TextMenu12" style="position:absolute;left:837px;top:647px;width:47px;height:14px;z-index:35" align="center">
<font style="font-size:9.3px;" color="#000000" face="Arial">
<a href="[URL]http://127.0.0.1/feedback.html[/URL]" title="Click Here to see the feedback">Feedback</a></font></div>
<div id="bv_Text16" style="position:absolute;left:892px;top:644px;width:6px;height:16px;z-index:36" align="left">
<font style="font-size:13px" color="#0000FF" face="Arial">|</font></div>
<div id="bv_TextMenu13" style="position:absolute;left:903px;top:648px;width:43px;height:14px;z-index:37" align="center">
<font style="font-size:9.3px;" color="#000000" face="Arial">
<a href="[URL]http://127.0.0.1/sitemap.html[/URL]" title="Click Here to see the Site Map">Site Map</a></font></div>
<div id="bv_Text15" style="position:absolute;left:952px;top:646px;width:6px;height:16px;z-index:38" align="left">
<font style="font-size:13px" color="#0000FF" face="Arial">|</font></div>
<div id="bv_TextMenu15" style="position:absolute;left:958px;top:649px;width:102px;height:14px;z-index:39" align="center">
<font style="font-size:9.3px;" color="#000000" face="Arial">
<a href="[url=http://www.spatec.com.sg/tc.html]SPAtec[/url]" title="Click Here to see the Site Map">Terms and Conditions</a></font></div>

</b>
</body>
</html>

**happyse27** · Jan 14 '09, 03:01 PM

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

How to create menuing system

How to create menuing system

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment