How to change height of main menu in CSS

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • happyse27
    New Member
    • Sep 2008
    • 236

    How to change height of main menu in CSS

    Hi All,

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

    Code is below


    Cheers...
    Andrew

    css
    Code:
    <style type="text/css" media="screen">
    <!--
    body {
    margin: 0;
    padding: 0;
    background: white;
    font: 80% verdana, arial, sans-serif;
    }
    dl, dt, dd, ul, li {
    margin: 0;
    padding: 0;
    list-style-type: none;
    line-height:2em;
    }
    #menu {
    position: relative; /* Menu position that can be changed at will */
    top: 180;
    left: 200;
    z-index:100;
    width: 100%; /* precision for Opera */
    }
    #menu dl {
    float: left;
    width: 9em;
    }
    #menu dt {
    cursor: pointer;
    text-align: center;
    font-weight: bold;
    background: #ff00ff;
    border: 1px solid gray;
    margin: 1px;
    }
    #menu dd {
    display: none;
    border: 1px solid gray;
    }
    #menu li {
    text-align: center;
    background: #ff00ff;
    }
    #menu li a, #menu dt a {
    color: #000000;
    text-decoration: none;
    display: block;
    height: 100%;
    border: 0 none;
    }
    #menu li a:hover, #menu li a:focus, #menu dt a:hover, #menu dt a:focus {
    background: #eee;
    }
    #site {
    position: absolute;
    z-index: 1;
    top : 70px;
    left : 10px;
    color: #000;
    background-color: #ddd;
    padding: 5px;
    border: 1px solid gray;
    }
    -->
    </style>
  • Stomme poes
    New Member
    • Aug 2007
    • 14

    #2
    Without the HTML to see it's a little hard to see what you're working with???

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

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

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

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

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

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

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

    Sorry I couldn't help more,
    poes

    Comment

    • drhowarddrfine
      Recognized Expert Expert
      • Sep 2006
      • 7434

      #3
      Hello Stomme poes. .

      Comment

      • happyse27
        New Member
        • Sep 2008
        • 236

        #4
        hello all,

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

        However, I tried with another method, below is codes

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


        best Rgds,
        Andrew

        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>
        </head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title></title>
        <style type="text/css" media="screen">
        <!--
        body {
        margin: 0;
        padding: 0;
        background: white;
        font: 80% verdana, arial, sans-serif;
        }
        dl, dt, dd, ul, li {
        margin: 0;
        padding: 0;
        list-style-type: none;
        height: 2.4em;
        }
        #menu {
        position: relative; /* Menu position that can be changed at will */
        top: 0;
        left: 0;
        z-index:100;
        width: 100%; /* precision for Opera */
        }
        #menu dl {
        float: left;
        width: 9em;
        }
         
        #menu dt {
        cursor: pointer;
        text-align: center;
        font-weight: bold;
        background: #ff00ff;
        border: 1px solid gray;
        color:#fff;
        margin: 1px;
        }
        #menu dd {
        display: none;
        border: 1px ;
        }
        #menu li {
        text-align: center;
        background: #fff;
        }
        #menu li a, #menu dt a {
        color: #000000;
        text-decoration: none;
        display: block;
        height: 100%;
        border: 0 none;
        }
        #menu li a:hover, #menu li a:focus, #menu dt a:hover, #menu dt a:focus {
        background: #ff33ff;
        }
        #site {
        position: absolute;
        z-index: 1;
        top : 70px;
        left : 10px;
        color: #000;
        background-color: #ddd;
        padding: 5px;
        border: 1px purple;
        }
        -->
        </style>
         
        
        <script type="text/javascript">
        <!--
        window.onload=show;
        function show(id) {
        var d = document.getElementById(id);
         for (var i = 1; i<=2100; i++) {
          if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
         }
        if (d) {d.style.display='block';}
        }
        //-->
        </script>
         
         
         
        
        <b>
        
        <body bgcolor="#FFFFFF" text="#000000">
        <div id="bv_Shape1" style="position:absolute;left:166px;top:216px;width:928px;height:600px;z-index:0" align="center">
        <img src="pink.jpg" id="Shape1" align="top" alt="" title="" border="0" width="928" height="590"></div>
        <div id="bv_Image1" style="overflow:hidden;position:absolute;left:168px;top:0px;z-index:1" align="left">
        <img src="top_bg.jpg" id="Image1" alt="" align="top" border="0" style="width:924px;height:178px;"></div>
        <div id="bv_TextMenu1" style="position:absolute;left:813px;top:13px;width:78px;height:18px;z-index:2" align="center">
        <font 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 id="bv_Text1" style="position:absolute;left:901px;top:13px;width:7px;height:16px;z-index:3" align="left">
        <font style="font-size:13px" color="#0000FF" face="Arial">|</font></div>
        <div id="bv_TextMenu2" style="position:absolute;left:919px;top:13px;width:67px;height:34px;z-index:4" align="center">
        <font 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 id="bv_Text2" style="position:absolute;left:1012px;top:13px;width:6px;height:16px;z-index:5" align="left">
        <font style="font-size:13px" color="#0000FF" face="Arial">|</font></div>
        <div id="bv_TextMenu3" style="position:absolute;left:996px;top:14px;width:102px;height:18px;z-index:6" align="center">
        <font 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 id="bv_Text6" style="position:absolute;left:512px;top:25px;width:150px;height:31px;z-index:7" align="left">
        <font style="font-size:13px" color="#000000" face="Arial">Chinese Version<br>
        </font></div>
        <div 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]   src="lang_ch.gif" id="Image6" alt="" align="top" border="0" style="width:127px;height:54px;"></a></div>
        <div 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]   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 id="bv_Image2" style="overflow:hidden;position:absolute;left:0px;top:0px;z-index:11" align="left">
        <img src="mid_bg.jpg" id="Image2" alt="" align="top" border="0" style="width:168px;height:786px;"></div>
        <div id="bv_Image3" style="overflow:hidden;position:absolute;left:1092px;top:0px;z-index:12" align="left">
        <img src="mid_bg.jpg" id="Image3" alt="" align="top" border="0" style="width:214px;height:786px;"></div>
        <div id="bv_Text7" style="position:absolute;left:140px;top:939px;width:920px;height:15px;z-index:13" align="center">
        &nbsp;</div>
        <div id="menu" style="position:absolute;left:169px;top:180px; align="center";>
         
         <dl>
          <dt onmouseover="javascript:show('smenu1');">Home</dt>
           <dd id="smenu1">
            <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>
           </dd>
         </dl>
        
         <dl>
          <dt onmouseover="javascript:show('smenu2');">About SPAtec</dt>
          <dd id="smenu2">
              <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>
           </dd>
         </dl>
         <dl>
          <dt onmouseover="javascript:show('smenu3');">Training and Education</dt>
           <dd id="smenu3">
            <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>
           </dd>
         </dl>
         <dl>
          <dt onmouseover="javascript:show('smenu4');">Trainers</dt>
           <dd id="smenu4">
            <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>
           </dd>
         </dl>
         <dl>
           <dt onmouseover="javascript:show('smenu5');">Student Information</dt>
           <dd id="smenu5">
             <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>
           </dd>
         </dl>
          <dl>
           <dt onmouseover="javascript:show('smenu6');">Enrolment</dt>
            <dd id="smenu6">
             <ul>
              <li><a href="[URL]http://127.0.0.1/registration.html">Online[/URL] Registration</a></li>
             </ul>
            </dd>
         </dl>
          <dl>
           <dt onmouseover="javascript:show('smenu7');">Career Development</dt>
            <dd id="smenu7">
             <ul>
              <li><a href="[URL]http://127.0.0.1/career.html">Job[/URL] Opportunities</a></li>
             </ul>
            </dd>
         </dl>
          <dl>
           <dt onmouseover="javascript:show('smenu8');">links to Websites</dt>
            <dd id="smenu8">
             <ul>
              <li><a href="[URL]http://127.0.0.1/">Links</a></li[/URL]>
             </ul>
            </dd>
         </dl>
        </div>
         
        
        <div  id="bv_Text3" style="position:absolute;left:316px;top:261px;width:723px;height:48px;z-index:14" align="left">
        <font  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  id="bv_Image4" style="overflow:hidden;position:absolute;left:316px;top:312px;z-index:15" align="left">
        <img   src="gra_1.jpg" id="Image4" alt="" align="top" border="0" style="width:620px;height:315px;"></div>
        <div  id="bv_Image8" style="overflow:hidden;position:absolute;left:168px;top:631px;z-index:16" align="left">
        <img   src="bottom_bg.jpg" id="Image8" alt="" align="top" border="0" style="width:924px;height:84px;"></div>
        <div  id="bv_Image5" style="overflow:hidden;position:absolute;left:424px;top:719px;z-index:17" align="left">
        <img   src="link1.jpg" id="Image5" alt="" align="top" border="0" style="width:364px;height:60px;"></div>
        <div  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>

        Comment

        • happyse27
          New Member
          • Sep 2008
          • 236

          #5
          latest code without dropdown submenu border issue... cheers...

          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>
          </head>
          <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
          <title></title>
          <style type="text/css" media="screen">
          <!--
          body {
          margin: 0;
          padding: 0;
          background: white;
          font: 80% verdana, arial, sans-serif;
          }
          dl, dt, dd, ul, li {
          margin: 0;
          padding: 0;
          list-style-type: none;
          height: 2.5em;
          }
          #menu {
          position: relative; /* Menu position that can be changed at will */
          top: 0;
          left: 0;
          z-index:100;
          width: 100%; /* precision for Opera */
          }
          #menu dl {
          float: left;
          width: 9em;
          }
           
          #menu dt {
          cursor: pointer;
          text-align: center;
          font-weight: bold;
          background: #ff00ff;
          border: 1px solid gray;
          color:#fff;
          margin: 1px;
          }
          #menu dd {
          display: none;
          border: 0px ;
          height : 1.6em;
          
          }
          #menu li {
          text-align: center;
          background: #fff;
          height : 1.6em;
          }
          #menu li a, #menu dt a {
          color: #000000;
          text-decoration: none;
          display: block;
          height: 100%;
          border: 0 none;
          }
          #menu li a:hover, #menu li a:focus, #menu dt a:hover, #menu dt a:focus {
          background: #ff33ff;
          height : 1.6em;
          }
          #site {
          position: absolute;
          z-index: 1;
          top : 70px;
          left : 10px;
          color: #000;
          background-color: #ddd;
          padding: 5px;
          border: 1px purple;
          }
          -->
          </style>
           
          
          <script type="text/javascript">
          <!--
          window.onload=show;
          function show(id) {
          var d = document.getElementById(id);
           for (var i = 1; i<=2100; i++) {
            if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
           }
          if (d) {d.style.display='block';}
          }
          //-->
          </script>
           
           
           
          
          <b>
          
          <body bgcolor="#FFFFFF" text="#000000">
          <div id="bv_Shape1" style="position:absolute;left:166px;top:216px;width:928px;height:600px;z-index:0" align="center">
          <img src="pink.jpg" id="Shape1" align="top" alt="" title="" border="0" width="928" height="590"></div>
          <div id="bv_Image1" style="overflow:hidden;position:absolute;left:168px;top:0px;z-index:1" align="left">
          <img src="top_bg.jpg" id="Image1" alt="" align="top" border="0" style="width:924px;height:178px;"></div>
          <div id="bv_TextMenu1" style="position:absolute;left:813px;top:13px;width:78px;height:18px;z-index:2" align="center">
          <font 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 id="bv_Text1" style="position:absolute;left:901px;top:13px;width:7px;height:16px;z-index:3" align="left">
          <font style="font-size:13px" color="#0000FF" face="Arial">|</font></div>
          <div id="bv_TextMenu2" style="position:absolute;left:919px;top:13px;width:67px;height:34px;z-index:4" align="center">
          <font 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 id="bv_Text2" style="position:absolute;left:1012px;top:13px;width:6px;height:16px;z-index:5" align="left">
          <font style="font-size:13px" color="#0000FF" face="Arial">|</font></div>
          <div id="bv_TextMenu3" style="position:absolute;left:996px;top:14px;width:102px;height:18px;z-index:6" align="center">
          <font 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 id="bv_Text6" style="position:absolute;left:512px;top:25px;width:150px;height:31px;z-index:7" align="left">
          <font style="font-size:13px" color="#000000" face="Arial">Chinese Version<br>
          </font></div>
          <div 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]   src="lang_ch.gif" id="Image6" alt="" align="top" border="0" style="width:127px;height:54px;"></a></div>
          <div 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]   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 id="bv_Image2" style="overflow:hidden;position:absolute;left:0px;top:0px;z-index:11" align="left">
          <img src="mid_bg.jpg" id="Image2" alt="" align="top" border="0" style="width:168px;height:786px;"></div>
          <div id="bv_Image3" style="overflow:hidden;position:absolute;left:1092px;top:0px;z-index:12" align="left">
          <img src="mid_bg.jpg" id="Image3" alt="" align="top" border="0" style="width:214px;height:786px;"></div>
          <div id="bv_Text7" style="position:absolute;left:140px;top:939px;width:920px;height:15px;z-index:13" align="center">
          &nbsp;</div>
          <div id="menu" style="position:absolute;left:169px;top:180px; align="center";>
           
           <dl>
            <dt onmouseover="javascript:show('smenu1');">Home</dt>
             <dd id="smenu1">
              <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>
             </dd>
           </dl>
          
           <dl>
            <dt onmouseover="javascript:show('smenu2');">About SPAtec</dt>
            <dd id="smenu2">
                <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>
             </dd>
           </dl>
           <dl>
            <dt onmouseover="javascript:show('smenu3');">Training and Education</dt>
             <dd id="smenu3">
              <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>
             </dd>
           </dl>
           <dl>
            <dt onmouseover="javascript:show('smenu4');">Trainers</dt>
             <dd id="smenu4">
              <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>
             </dd>
           </dl>
           <dl>
             <dt onmouseover="javascript:show('smenu5');">Student Information</dt>
             <dd id="smenu5">
               <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>
             </dd>
           </dl>
            <dl>
             <dt onmouseover="javascript:show('smenu6');">Enrolment</dt>
              <dd id="smenu6">
               <ul>
                <li><a href="[URL]http://127.0.0.1/registration.html">Online[/URL] Registration</a></li>
               </ul>
              </dd>
           </dl>
            <dl>
             <dt onmouseover="javascript:show('smenu7');">Career Development</dt>
              <dd id="smenu7">
               <ul>
                <li><a href="[URL]http://127.0.0.1/career.html">Job[/URL] Opportunities</a></li>
               </ul>
              </dd>
           </dl>
            <dl>
             <dt onmouseover="javascript:show('smenu8');">links to Websites</dt>
              <dd id="smenu8">
               <ul>
                <li><a href="[URL]http://127.0.0.1/">Links</a></li[/URL]>
               </ul>
              </dd>
           </dl>
          </div>
           
          
          <div  id="bv_Text3" style="position:absolute;left:316px;top:261px;width:723px;height:48px;z-index:14" align="left">
          <font  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  id="bv_Image4" style="overflow:hidden;position:absolute;left:316px;top:312px;z-index:15" align="left">
          <img   src="gra_1.jpg" id="Image4" alt="" align="top" border="0" style="width:620px;height:315px;"></div>
          <div  id="bv_Image8" style="overflow:hidden;position:absolute;left:168px;top:631px;z-index:16" align="left">
          <img   src="bottom_bg.jpg" id="Image8" alt="" align="top" border="0" style="width:924px;height:84px;"></div>
          <div  id="bv_Image5" style="overflow:hidden;position:absolute;left:424px;top:719px;z-index:17" align="left">
          <img   src="link1.jpg" id="Image5" alt="" align="top" border="0" style="width:364px;height:60px;"></div>
          <div  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>

          Comment

          • happyse27
            New Member
            • Sep 2008
            • 236

            #6
            Hi All,

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

            Kindly assist.


            Cheers...

            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>
            </head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
            <title></title>
            <style type="text/css" media="screen">
            <!--
            body {
            margin: 0;
            padding: 0;
            background: white;
            font: 80% verdana, arial, sans-serif;
            }
            dl, dt, dd, ul, li {
            margin: 0;
            padding: 0;
            list-style-type: none;
            height: 2.7em;
            }
            #menu {
            position: relative; /* Menu position that can be changed at will */
            top: 0;
            left: 0;
            z-index:100;
            width: 100%; /* precision for Opera */
            }
            #menu dl {
            float: left;
            width: 9em;
            }
             
            #menu dt {
            cursor: pointer;
            text-align: center;
            font-weight: bold;
            background: #ff00ff;
            border: 1px solid gray;
            color:#fff;
            margin: 1px;
            }
            #menu dd {
            display: none;
            height: auto;
            border: 1px solid gray;
            color:#fff;
            margin: 1px;
             
            }
            #menu li {
            text-align: center;
            background: #fff;
            height : 1.6em;
            }
            #menu li a, #menu dt a {
            color: #000000;
            text-decoration: none;
            display: block;
            height: 100%;
            
            }
            #menu li a:hover, #menu li a:focus, #menu dt a:hover, #menu dt a:focus {
            background: #ff33ff;
            height : 1.6em;
            }
            #site {
            position: absolute;
            z-index: 1;
            top : 70px;
            left : 10px;
            color: #000;
            background-color: #ddd;
            padding: 5px;
            border: 1px purple;
            }
            -->
            </style>
             
            
            <script type="text/javascript">
            <!--
            window.onload=show;
            function show(id) {
            var d = document.getElementById(id);
             for (var i = 1; i<=2100; i++) {
              if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
             }
            if (d) {d.style.display='block';}
            }
            //-->
            </script>
             
             
             
            
            <b>
            
            <body bgcolor="#FFFFFF" text="#000000">
            <div id="bv_Shape1" style="position:absolute;left:166px;top:216px;width:928px;height:600px;z-index:0" align="center">
            <img src="pink.jpg" id="Shape1" align="top" alt="" title="" border="0" width="928" height="590"></div>
            <div id="bv_Image1" style="overflow:hidden;position:absolute;left:168px;top:0px;z-index:1" align="left">
            <img src="top_bg.jpg" id="Image1" alt="" align="top" border="0" style="width:924px;height:178px;"></div>
            <div id="bv_TextMenu1" style="position:absolute;left:813px;top:13px;width:78px;height:18px;z-index:2" align="center">
            <font 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 id="bv_Text1" style="position:absolute;left:901px;top:13px;width:7px;height:16px;z-index:3" align="left">
            <font style="font-size:13px" color="#0000FF" face="Arial">|</font></div>
            <div id="bv_TextMenu2" style="position:absolute;left:919px;top:13px;width:67px;height:34px;z-index:4" align="center">
            <font 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 id="bv_Text2" style="position:absolute;left:1012px;top:13px;width:6px;height:16px;z-index:5" align="left">
            <font style="font-size:13px" color="#0000FF" face="Arial">|</font></div>
            <div id="bv_TextMenu3" style="position:absolute;left:996px;top:14px;width:102px;height:18px;z-index:6" align="center">
            <font 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 id="bv_Text6" style="position:absolute;left:512px;top:25px;width:150px;height:31px;z-index:7" align="left">
            <font style="font-size:13px" color="#000000" face="Arial">Chinese Version<br>
            </font></div>
            <div 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]   src="lang_ch.gif" id="Image6" alt="" align="top" border="0" style="width:127px;height:54px;"></a></div>
            <div 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]   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 id="bv_Image2" style="overflow:hidden;position:absolute;left:0px;top:0px;z-index:11" align="left">
            <img src="mid_bg.jpg" id="Image2" alt="" align="top" border="0" style="width:168px;height:786px;"></div>
            <div id="bv_Image3" style="overflow:hidden;position:absolute;left:1092px;top:0px;z-index:12" align="left">
            <img src="mid_bg.jpg" id="Image3" alt="" align="top" border="0" style="width:214px;height:786px;"></div>
            <div id="bv_Text7" style="position:absolute;left:140px;top:939px;width:920px;height:15px;z-index:13" align="center">
            &nbsp;</div>
            <div id="menu" style="position:absolute;left:169px;top:180px; align="center";>
             
             <dl>
              <dt onmouseover="javascript:show('smenu1');">Home</dt>
               <dd id="smenu1">
                <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>
               </dd>
             </dl>
            
             <dl>
              <dt onmouseover="javascript:show('smenu2');">About SPAtec</dt>
              <dd id="smenu2">
                  <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>
               </dd>
             </dl>
             <dl>
              <dt onmouseover="javascript:show('smenu3');">Training and Education</dt>
               <dd id="smenu3">
                <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>
               </dd>
             </dl>
             <dl>
              <dt onmouseover="javascript:show('smenu4');">Trainers</dt>
               <dd id="smenu4">
                <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>
               </dd>
             </dl>
             <dl>
               <dt onmouseover="javascript:show('smenu5');">Student Information</dt>
               <dd id="smenu5">
                 <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>
               </dd>
             </dl>
              <dl>
               <dt onmouseover="javascript:show('smenu6');">Enrolment</dt>
                <dd id="smenu6">
                 <ul>
                  <li><a href="[URL]http://127.0.0.1/registration.html">Online[/URL] Registration</a></li>
                 </ul>
                </dd>
             </dl>
              <dl>
               <dt onmouseover="javascript:show('smenu7');">Career Development</dt>
                <dd id="smenu7">
                 <ul>
                  <li><a href="[URL]http://127.0.0.1/career.html">Job[/URL] Opportunities</a></li>
                 </ul>
                </dd>
             </dl>
              <dl>
               <dt onmouseover="javascript:show('smenu8');">links to Websites</dt>
                <dd id="smenu8">
                 <ul>
                  <li><a href="[URL]http://127.0.0.1/">Links</a></li[/URL]>
                 </ul>
                </dd>
             </dl>
            </div>
             
            
            <div  id="bv_Text3" style="position:absolute;left:316px;top:261px;width:723px;height:48px;z-index:14" align="left">
            <font  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  id="bv_Image4" style="overflow:hidden;position:absolute;left:316px;top:312px;z-index:15" align="left">
            <img   src="gra_1.jpg" id="Image4" alt="" align="top" border="0" style="width:620px;height:315px;"></div>
            <div  id="bv_Image8" style="overflow:hidden;position:absolute;left:168px;top:631px;z-index:16" align="left">
            <img   src="bottom_bg.jpg" id="Image8" alt="" align="top" border="0" style="width:924px;height:84px;"></div>
            <div  id="bv_Image5" style="overflow:hidden;position:absolute;left:424px;top:719px;z-index:17" align="left">
            <img   src="link1.jpg" id="Image5" alt="" align="top" border="0" style="width:364px;height:60px;"></div>
            <div  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>

            Comment

            • happyse27
              New Member
              • Sep 2008
              • 236

              #7
              hi all,

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

              kindly advise...


              Cheers...

              Comment

              Working...