SitePoint Sponsor

User Tag List

Results 1 to 16 of 16
  1. #1
    SitePoint Guru
    Join Date
    Feb 2006
    Location
    Chepstow, South Wales
    Posts
    911
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    adding an event to buttons that changes its colour when clicked

    I have a cascading nav that starts off with 5 buttons, then off those buttons and each has its own, a row of buttons appears when 1 of the 5 is clicked.

    All the buttons stay in view, so by clicking 1 of the 5 buttons its stays there as the next row appears, its so that the user can change their selection if they got it wrong, its a very simple information gathering nav.

    What I wont to try and do is if one of the 5 is clicked it changes colour, but then if they got it wrong and choose another that new one changes colour and the other returns to its normal colour, and then the same for the next level.

    I've included my navigation below, and I thikn this is a jscript issue rather than a CSS so thats why I'm posting here.

    The interface is here and the log in details are there to just click enter, and then its the page after that splash page.

    http://www.whhazardreport.co.uk/index1.php

    Code:
    <div id="Drop_down_wrapper">
    
      <ul>
        <li><a href="index1.php" title="Home">HOME ></a>
          <ul id="sub-menu1">
            <li><a href="#" id="Drop2">Ward Block</a>
            <ul id="sub-menu2">
              <li><a href="#" id="Drop6">Level 2</a>
                <ul id="sub-menu6" style="top:44px;">
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 2&amp;bottom=Room">Room</a></li>
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 2&amp;bottom=Plant Room">Plant Room</a></li>
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 2&amp;bottom=Corridor">Corridor</a></li>
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 2&amp;bottom=Stair Core">Stair Core</a></li>
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 2&amp;bottom=Riser">Riser</a></li>
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 2&amp;bottom=Haki Stairs">Haki Stairs</a></li>
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 2&amp;bottom=Storage Area">Storage Area</a></li>
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 2&amp;bottom=Lightwell">Lightwell</a></li>
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 2&amp;bottom=Atrium">Atrium</a></li>
          	  	</ul>
            	</li>
              <li><a href="#" id="Drop7">Level 3</a>
                <ul id="sub-menu7" style="top:-5px;">
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 3&amp;bottom=Room">Room</a></li>
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 3&amp;bottom=Plant Room">Plant Room</a></li>
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 3&amp;bottom=Corridor">Corridor</a></li>
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 3&amp;bottom=Stair Core">Stair Core</a></li>
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 3&amp;bottom=Riser">Riser</a></li>
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 3&amp;bottom=Haki Stairs">Haki Stairs</a></li>
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 3&amp;bottom=Storage Area">Storage Area</a></li>
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 3&amp;bottom=Lightwell">Lightwell</a></li>
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 3&amp;bottom=Atrium">Atrium</a></li>
          	  	</ul>
            	</li>
              <li><a href="#" id="Drop8">Level 4</a>
              <ul id="sub-menu8" style="top:-54px;">
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 4&amp;bottom=Room">Room</a></li>
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 4&amp;bottom=Plant Room">Plant Room</a></li>
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 4&amp;bottom=Corridor">Corridor</a></li>
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 4&amp;bottom=Stair Core">Stair Core</a></li>
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 4&amp;bottom=Riser">Riser</a></li>
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 4&amp;bottom=Haki Stairs">Haki Stairs</a></li>
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 4&amp;bottom=Storage Area">Storage Area</a></li>
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 4&amp;bottom=Lightwell">Lightwell</a></li>
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 4&amp;bottom=Atrium">Atrium</a></li>
               </ul>
              </li>
              <li><a href="#" id="Drop9">Level 5</a>
              <ul id="sub-menu9" style="top:-103px;">
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 5&amp;bottom=Room">Room</a></li>
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 5&amp;bottom=Plant Room">Plant Room</a></li>
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 5&amp;bottom=Corridor">Corridor</a></li>
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 5&amp;bottom=Stair Core">Stair Core</a></li>
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 5&amp;bottom=Riser">Riser</a></li>
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 5&amp;bottom=Haki Stairs">Haki Stairs</a></li>
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 5&amp;bottom=Storage Area">Storage Area</a></li>
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 5&amp;bottom=Lightwell">Lightwell</a></li>
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 5&amp;bottom=Atrium">Atrium</a></li>
               </ul>
              </li>
              <li><a href="#" id="Drop10">Level 6</a>
              <ul id="sub-menu10" style="top:-152px;">
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 6&amp;bottom=Room">Room</a></li>
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 6&amp;bottom=Plant Room">Plant Room</a></li>
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 6&amp;bottom=Corridor">Corridor</a></li>
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 6&amp;bottom=Stair Core">Stair Core</a></li>
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 6&amp;bottom=Riser">Riser</a></li>
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 6&amp;bottom=Haki Stairs">Haki Stairs</a></li>
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 6&amp;bottom=Storage Area">Storage Area</a></li>
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 6&amp;bottom=Lightwell">Lightwell</a></li>
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 6&amp;bottom=Atrium">Atrium</a></li>
               </ul>
              </li>
              <li><a href="#" id="Drop11">Level 7</a>
              <ul id="sub-menu11" style="top:-201px;">
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 7&amp;bottom=Room">Room</a></li>
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 7&amp;bottom=Plant Room">Plant Room</a></li>
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 7&amp;bottom=Corridor">Corridor</a></li>
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 7&amp;bottom=Stair Core">Stair Core</a></li>
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 7&amp;bottom=Riser">Riser</a></li>
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 7&amp;bottom=Haki Stairs">Haki Stairs</a></li>
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 7&amp;bottom=Storage Area">Storage Area</a></li>
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 7&amp;bottom=Lightwell">Lightwell</a></li>
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 7&amp;bottom=Atrium">Atrium</a></li>
               </ul>
              </li>
              <li><a href="#" id="Drop12">Level 8</a>
              <ul id="sub-menu12" style="top:-250px;">
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 8&amp;bottom=Room">Room</a></li>
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 8&amp;bottom=Plant Room">Plant Room</a></li>
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 8&amp;bottom=Corridor">Corridor</a></li>
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 8&amp;bottom=Stair Core">Stair Core</a></li>
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 8&amp;bottom=Riser">Riser</a></li>
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 8&amp;bottom=Haki Stairs">Haki Stairs</a></li>
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 8&amp;bottom=Storage Area">Storage Area</a></li>
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 8&amp;bottom=Lightwell">Lightwell</a></li>
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 8&amp;bottom=Atrium">Atrium</a></li>
               </ul>
              </li>
              <li><a href="#" id="Drop13">Level 9</a>
              <ul id="sub-menu13" style="top:-299px;">
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 9&amp;bottom=Room">Room</a></li>
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 9&amp;bottom=Plant Room">Plant Room</a></li>
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 9&amp;bottom=Corridor">Corridor</a></li>
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 9&amp;bottom=Stair Core">Stair Core</a></li>
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 9&amp;bottom=Riser">Riser</a></li>
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 9&amp;bottom=Haki Stairs">Haki Stairs</a></li>
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 9&amp;bottom=Storage Area">Storage Area</a></li>
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 9&amp;bottom=Lightwell">Lightwell</a></li>
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 9&amp;bottom=Atrium">Atrium</a></li>
               </ul>
              </li>
              <li><a href="#" id="Drop14">Level 10</a>
              <ul id="sub-menu14" style="top:-348px;">
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 10&amp;bottom=Room">Room</a></li>
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 10&amp;bottom=Plant Room">Plant Room</a></li>
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 10&amp;bottom=Corridor">Corridor</a></li>
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 10&amp;bottom=Stair Core">Stair Core</a></li>
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 10&amp;bottom=Riser">Riser</a></li>
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 10&amp;bottom=Haki Stairs">Haki Stairs</a></li>
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 10&amp;bottom=Storage Area">Storage Area</a></li>
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 10&amp;bottom=Lightwell">Lightwell</a></li>
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 10&amp;bottom=Atrium">Atrium</a></li>
               </ul>
              </li>
              <li><a href="#" id="Drop15">Level 11</a>
              <ul id="sub-menu15" style="top:-397px;">
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 11&amp;bottom=Room">Room</a></li>
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 11&amp;bottom=Plant Room">Plant Room</a></li>
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 11&amp;bottom=Corridor">Corridor</a></li>
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 11&amp;bottom=Stair Core">Stair Core</a></li>
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 11&amp;bottom=Riser">Riser</a></li>
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 11&amp;bottom=Haki Stairs">Haki Stairs</a></li>
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 11&amp;bottom=Storage Area">Storage Area</a></li>
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 11&amp;bottom=Lightwell">Lightwell</a></li>
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 11&amp;bottom=Atrium">Atrium</a></li>
               </ul>
              </li>
              <li><a href="#" id="Drop16">Level 12</a>
              <ul id="sub-menu16" style="top:-446px;">
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 12&amp;bottom=Room">Room</a></li>
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 12&amp;bottom=Plant Room">Plant Room</a></li>
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 12&amp;bottom=Corridor">Corridor</a></li>
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 12&amp;bottom=Stair Core">Stair Core</a></li>
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 12&amp;bottom=Riser">Riser</a></li>
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 12&amp;bottom=Haki Stairs">Haki Stairs</a></li>
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 12&amp;bottom=Storage Area">Storage Area</a></li>
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 12&amp;bottom=Lightwell">Lightwell</a></li>
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 12&amp;bottom=Atrium">Atrium</a></li>
               </ul>
              </li>
            </ul>
            </li>
            <li><a href="#" id="Drop3">Queen's Building/Welcome Centre</a>
            <ul id="sub-menu3" style="top:-5px;">
              <li><a href="#" id="Drop17">Level 1</a>
              <ul id="sub-menu17">
                  <li><a href="page2.php?top=Queen's Building/Welcome Centre&amp;middle=Level 1&amp;bottom=Room">Room</a></li>
                  <li><a href="page2.php?top=Queen's Building/Welcome Centre&amp;middle=Level 1&amp;bottom=Plant Room">Plant Room</a></li>
                  <li><a href="page2.php?top=Queen's Building/Welcome Centre&amp;middle=Level 1&amp;bottom=Corridor">Corridor</a></li>
                  <li><a href="page2.php?top=Queen's Building/Welcome Centre&amp;middle=Level 1&amp;bottom=Stair Core">Stair Core</a></li>
                  <li><a href="page2.php?top=Queen's Building/Welcome Centre&amp;middle=Level 1&amp;bottom=Riser">Riser</a></li>
                  <li><a href="page2.php?top=Queen's Building/Welcome Centre&amp;middle=Level 1&amp;bottom=Haki Stairs">Haki Stairs</a></li>
                  <li><a href="page2.php?top=Queen's Building/Welcome Centre&amp;middle=Level 1&amp;bottom=Storage Area">Storage Area</a></li>
                  <li><a href="page2.php?top=Queen's Building/Welcome Centre&amp;middle=Level 1&amp;bottom=Lightwell">Lightwell</a></li>
                  <li><a href="page2.php?top=Queen's Building/Welcome Centre&amp;middle=Level 1&amp;bottom=Atrium">Atrium</a></li>
               </ul>
              </li>
              <li><a href="#" id="Drop18">Level 2</a>
              <ul id="sub-menu18" style="top:-5px;">
              <li><a href="page2.php?top=Queen's Building/Welcome Centre&amp;middle=Level 2&amp;bottom=Room">Room</a></li>
                  <li><a href="page2.php?top=Queen's Building/Welcome Centre&amp;middle=Level 2&amp;bottom=Plant Room">Plant Room</a></li>
                  <li><a href="page2.php?top=Queen's Building/Welcome Centre&amp;middle=Level 2&amp;bottom=Corridor">Corridor</a></li>
                  <li><a href="page2.php?top=Queen's Building/Welcome Centre&amp;middle=Level 2&amp;bottom=Stair Core">Stair Core</a></li>
                  <li><a href="page2.php?top=Queen's Building/Welcome Centre&amp;middle=Level 2&amp;bottom=Riser">Riser</a></li>
                  <li><a href="page2.php?top=Queen's Building/Welcome Centre&amp;middle=Level 2&amp;bottom=Haki Stairs">Haki Stairs</a></li>
                  <li><a href="page2.php?top=Queen's Building/Welcome Centre&amp;middle=Level 2&amp;bottom=Storage Area">Storage Area</a></li>
                  <li><a href="page2.php?top=Queen's Building/Welcome Centre&amp;middle=Level 2&amp;bottom=Lightwell">Lightwell</a></li>
                  <li><a href="page2.php?top=Queen's Building/Welcome Centre&amp;middle=Level 2&amp;bottom=Atrium">Atrium</a></li>              
               </ul>
              </li>
              <li><a href="#" id="Drop19">Level 3</a>
              <ul id="sub-menu19" style="top:-54px;">
                  <li><a href="page2.php?top=Queen's Building/Welcome Centre&amp;middle=Level 3&amp;bottom=Room">Room</a></li>
                  <li><a href="page2.php?top=Queen's Building/Welcome Centre&amp;middle=Level 3&amp;bottom=Plant Room">Plant Room</a></li>
                  <li><a href="page2.php?top=Queen's Building/Welcome Centre&amp;middle=Level 3&amp;bottom=Corridor">Corridor</a></li>
                  <li><a href="page2.php?top=Queen's Building/Welcome Centre&amp;middle=Level 3&amp;bottom=Stair Core">Stair Core</a></li>
                  <li><a href="page2.php?top=Queen's Building/Welcome Centre&amp;middle=Level 3&amp;bottom=Riser">Riser</a></li>
                  <li><a href="page2.php?top=Queen's Building/Welcome Centre&amp;middle=Level 3&amp;bottom=Haki Stairs">Haki Stairs</a></li>
                  <li><a href="page2.php?top=Queen's Building/Welcome Centre&amp;middle=Level 3&amp;bottom=Storage Area">Storage Area</a></li>
                  <li><a href="page2.php?top=Queen's Building/Welcome Centre&amp;middle=Level 3&amp;bottom=Lightwell">Lightwell</a></li>
                  <li><a href="page2.php?top=Queen's Building/Welcome Centre&amp;middle=Level 3&amp;bottom=Atrium">Atrium</a></li>
               </ul>
              </li>
              <li><a href="#" id="Drop20">Level 4</a>
              <ul id="sub-menu20" style="top:-103px;">
                  <li><a href="page2.php?top=Queen's Building/Welcome Centre&amp;middle=Level 4&amp;bottom=Room">Room</a></li>
                  <li><a href="page2.php?top=Queen's Building/Welcome Centre&amp;middle=Level 4&amp;bottom=Plant Room">Plant Room</a></li>
                  <li><a href="page2.php?top=Queen's Building/Welcome Centre&amp;middle=Level 4&amp;bottom=Corridor">Corridor</a></li>
                  <li><a href="page2.php?top=Queen's Building/Welcome Centre&amp;middle=Level 4&amp;bottom=Stair Core">Stair Core</a></li>
                  <li><a href="page2.php?top=Queen's Building/Welcome Centre&amp;middle=Level 4&amp;bottom=Riser">Riser</a></li>
                  <li><a href="page2.php?top=Queen's Building/Welcome Centre&amp;middle=Level 4&amp;bottom=Haki Stairs">Haki Stairs</a></li>
                  <li><a href="page2.php?top=Queen's Building/Welcome Centre&amp;middle=Level 4&amp;bottom=Storage Area">Storage Area</a></li>
                  <li><a href="page2.php?top=Queen's Building/Welcome Centre&amp;middle=Level 4&amp;bottom=Lightwell">Lightwell</a></li>
                  <li><a href="page2.php?top=Queen's Building/Welcome Centre&amp;middle=Level 4&amp;bottom=Atrium">Atrium</a></li>
               </ul>
              </li>
              <li><a href="#" id="Drop21">Level 5</a>
              <ul id="sub-menu21" style="top:-152px;">
                  <li><a href="page2.php?top=Queen's Building/Welcome Centre&amp;middle=Level 5&amp;bottom=Room">Room</a></li>
                  <li><a href="page2.php?top=Queen's Building/Welcome Centre&amp;middle=Level 5&amp;bottom=Plant Room">Plant Room</a></li>
                  <li><a href="page2.php?top=Queen's Building/Welcome Centre&amp;middle=Level 5&amp;bottom=Corridor">Corridor</a></li>
                  <li><a href="page2.php?top=Queen's Building/Welcome Centre&amp;middle=Level 5&amp;bottom=Stair Core">Stair Core</a></li>
                  <li><a href="page2.php?top=Queen's Building/Welcome Centre&amp;middle=Level 5&amp;bottom=Riser">Riser</a></li>
                  <li><a href="page2.php?top=Queen's Building/Welcome Centre&amp;middle=Level 5&amp;bottom=Haki Stairs">Haki Stairs</a></li>
                  <li><a href="page2.php?top=Queen's Building/Welcome Centre&amp;middle=Level 5&amp;bottom=Storage Area">Storage Area</a></li>
                  <li><a href="page2.php?top=Queen's Building/Welcome Centre&amp;middle=Level 5&amp;bottom=Lightwell">Lightwell</a></li>
                  <li><a href="page2.php?top=Queen's Building/Welcome Centre&amp;middle=Level 5&amp;bottom=Atrium">Atrium</a></li>
               </ul>
              </li>
              <li><a href="#" id="Drop22">Level 6</a>
              <ul id="sub-menu22" style="top:-201px;">
                  <li><a href="page2.php?top=Queen's Building/Welcome Centre&amp;middle=Level 6&amp;bottom=Room">Room</a></li>
                  <li><a href="page2.php?top=Queen's Building/Welcome Centre&amp;middle=Level 6&amp;bottom=Plant Room">Plant Room</a></li>
                  <li><a href="page2.php?top=Queen's Building/Welcome Centre&amp;middle=Level 6&amp;bottom=Corridor">Corridor</a></li>
                  <li><a href="page2.php?top=Queen's Building/Welcome Centre&amp;middle=Level 6&amp;bottom=Stair Core">Stair Core</a></li>
                  <li><a href="page2.php?top=Queen's Building/Welcome Centre&amp;middle=Level 6&amp;bottom=Riser">Riser</a></li>
                  <li><a href="page2.php?top=Queen's Building/Welcome Centre&amp;middle=Level 6&amp;bottom=Haki Stairs">Haki Stairs</a></li>
                  <li><a href="page2.php?top=Queen's Building/Welcome Centre&amp;middle=Level 6&amp;bottom=Storage Area">Storage Area</a></li>
                  <li><a href="page2.php?top=Queen's Building/Welcome Centre&amp;middle=Level 6&amp;bottom=Lightwell">Lightwell</a></li>
                  <li><a href="page2.php?top=Queen's Building/Welcome Centre&amp;middle=Level 6&amp;bottom=Atrium">Atrium</a></li>
               </ul>
              </li>
              <li><a href="#" id="Drop23">Level 7</a>
              <ul id="sub-menu23" style="top:-250px;">
                  <li><a href="page2.php?top=Queen's Building/Welcome Centre&amp;middle=Level 7&amp;bottom=Room">Room</a></li>
                  <li><a href="page2.php?top=Queen's Building/Welcome Centre&amp;middle=Level 7&amp;bottom=Plant Room">Plant Room</a></li>
                  <li><a href="page2.php?top=Queen's Building/Welcome Centre&amp;middle=Level 7&amp;bottom=Corridor">Corridor</a></li>
                  <li><a href="page2.php?top=Queen's Building/Welcome Centre&amp;middle=Level 7&amp;bottom=Stair Core">Stair Core</a></li>
                  <li><a href="page2.php?top=Queen's Building/Welcome Centre&amp;middle=Level 7&amp;bottom=Riser">Riser</a></li>
                  <li><a href="page2.php?top=Queen's Building/Welcome Centre&amp;middle=Level 7&amp;bottom=Haki Stairs">Haki Stairs</a></li>
                  <li><a href="page2.php?top=Queen's Building/Welcome Centre&amp;middle=Level 7&amp;bottom=Storage Area">Storage Area</a></li>
                  <li><a href="page2.php?top=Queen's Building/Welcome Centre&amp;middle=Level 7&amp;bottom=Lightwell">Lightwell</a></li>
                  <li><a href="page2.php?top=Queen's Building/Welcome Centre&amp;middle=Level 7&amp;bottom=Atrium">Atrium</a></li>
               </ul>
              </li>
              <li><a href="#" id="Drop24">Level 8</a>
              <ul id="sub-menu24" style="top:-299px;">
                  <li><a href="page2.php?top=Queen's Building/Welcome Centre&amp;middle=Level 8&amp;bottom=Room">Room</a></li>
                  <li><a href="page2.php?top=Queen's Building/Welcome Centre&amp;middle=Level 8&amp;bottom=Plant Room">Plant Room</a></li>
                  <li><a href="page2.php?top=Queen's Building/Welcome Centre&amp;middle=Level 8&amp;bottom=Corridor">Corridor</a></li>
                  <li><a href="page2.php?top=Queen's Building/Welcome Centre&amp;middle=Level 8&amp;bottom=Stair Core">Stair Core</a></li>
                  <li><a href="page2.php?top=Queen's Building/Welcome Centre&amp;middle=Level 8&amp;bottom=Riser">Riser</a></li>
                  <li><a href="page2.php?top=Queen's Building/Welcome Centre&amp;middle=Level 8&amp;bottom=Haki Stairs">Haki Stairs</a></li>
                  <li><a href="page2.php?top=Queen's Building/Welcome Centre&amp;middle=Level 8&amp;bottom=Storage Area">Storage Area</a></li>
                  <li><a href="page2.php?top=Queen's Building/Welcome Centre&amp;middle=Level 8&amp;bottom=Lightwell">Lightwell</a></li>
                  <li><a href="page2.php?top=Queen's Building/Welcome Centre&amp;middle=Level 8&amp;bottom=Atrium">Atrium</a></li>
               </ul>
              </li>
              <li><a href="#" id="Drop25">Level 9</a>
              <ul id="sub-menu25" style="top:-348px;">
                  <li><a href="page2.php?top=Queen's Building/Welcome Centre&amp;middle=Level 9&amp;bottom=Room">Room</a></li>
                  <li><a href="page2.php?top=Queen's Building/Welcome Centre&amp;middle=Level 9&amp;bottom=Plant Room">Plant Room</a></li>
                  <li><a href="page2.php?top=Queen's Building/Welcome Centre&amp;middle=Level 9&amp;bottom=Corridor">Corridor</a></li>
                  <li><a href="page2.php?top=Queen's Building/Welcome Centre&amp;middle=Level 9&amp;bottom=Stair Core">Stair Core</a></li>
                  <li><a href="page2.php?top=Queen's Building/Welcome Centre&amp;middle=Level 9&amp;bottom=Riser">Riser</a></li>
                  <li><a href="page2.php?top=Queen's Building/Welcome Centre&amp;middle=Level 9&amp;bottom=Haki Stairs">Haki Stairs</a></li>
                  <li><a href="page2.php?top=Queen's Building/Welcome Centre&amp;middle=Level 9&amp;bottom=Storage Area">Storage Area</a></li>
                  <li><a href="page2.php?top=Queen's Building/Welcome Centre&amp;middle=Level 9&amp;bottom=Lightwell">Lightwell</a></li>
                  <li><a href="page2.php?top=Queen's Building/Welcome Centre&amp;middle=Level 9&amp;bottom=Atrium">Atrium</a></li>
               </ul>
              </li>
              <li><a href="#" id="Drop26">Helipad</a>
              <ul id="sub-menu26" style="top:-397px;">
                  <li><a href="page2.php?top=Queen's Building/Welcome Centre&amp;middle=Helipad&amp;bottom=Room">Room</a></li>
                  <li><a href="page2.php?top=Queen's Building/Welcome Centre&amp;middle=Helipad&amp;bottom=Plant Room">Plant Room</a></li>
                  <li><a href="page2.php?top=Queen's Building/Welcome Centre&amp;middle=Helipad&amp;bottom=Corridor">Corridor</a></li>
                  <li><a href="page2.php?top=Queen's Building/Welcome Centre&amp;middle=Helipad&amp;bottom=Stair Core">Stair Core</a></li>
                  <li><a href="page2.php?top=Queen's Building/Welcome Centre&amp;middle=Helipad&amp;bottom=Riser">Riser</a></li>
                  <li><a href="page2.php?top=Queen's Building/Welcome Centre&amp;middle=Helipad&amp;bottom=Haki Stairs">Haki Stairs</a></li>
                  <li><a href="page2.php?top=Queen's Building/Welcome Centre&amp;middle=Helipad&amp;bottom=Storage Area">Storage Area</a></li>
                  <li><a href="page2.php?top=Queen's Building/Welcome Centre&amp;middle=Helipad&amp;bottom=Lightwell">Lightwell</a></li>
                  <li><a href="page2.php?top=Queen's Building/Welcome Centre&amp;middle=Helipad&amp;bottom=Atrium">Atrium</a></li>
               </ul>
              </li>
            </ul>
            </li>
            <li><a href="#" id="Drop4">CSP</a>
            <ul id="sub-menu4" style="top:-54px;">
              <li><a href="#" id="Drop27">Level 2</a>
              <ul id="sub-menu27" style="top:44px;">
                  <li><a href="page2.php?top=CSP&amp;middle=Level 2&amp;bottom=Room">Room</a></li>
                  <li><a href="page2.php?top=CSP&amp;middle=Level 2&amp;bottom=Plant Room">Plant Room</a></li>
                  <li><a href="page2.php?top=CSP&amp;middle=Level 2&amp;bottom=Corridor">Corridor</a></li>
                  <li><a href="page2.php?top=CSP&amp;middle=Level 2&amp;bottom=Stair Core">Stair Core</a></li>
                  <li><a href="page2.php?top=CSP&amp;middle=Level 2&amp;bottom=Riser">Riser</a></li>
                  <li><a href="page2.php?top=CSP&amp;middle=Level 2&amp;bottom=Haki Stairs">Haki Stairs</a></li>
                  <li><a href="page2.php?top=CSP&amp;middle=Level 2&amp;bottom=Storage Area">Storage Area</a></li>
                  <li><a href="page2.php?top=CSP&amp;middle=Level 2&amp;bottom=Lightwell">Lightwell</a></li>
                  <li><a href="page2.php?top=CSP&amp;middle=Level 2&amp;bottom=Atrium">Atrium</a></li>
               </ul>
              </li>
              <li><a href="#" id="Drop28">Level 2a</a>
              <ul id="sub-menu28" style="top:-5px;">
                  <li><a href="page2.php?top=CSP&amp;middle=Level 2a&amp;bottom=Room">Room</a></li>
                  <li><a href="page2.php?top=CSP&amp;middle=Level 2a&amp;bottom=Plant Room">Plant Room</a></li>
                  <li><a href="page2.php?top=CSP&amp;middle=Level 2a&amp;bottom=Corridor">Corridor</a></li>
                  <li><a href="page2.php?top=CSP&amp;middle=Level 2a&amp;bottom=Stair Core">Stair Core</a></li>
                  <li><a href="page2.php?top=CSP&amp;middle=Level 2a&amp;bottom=Riser">Riser</a></li>
                  <li><a href="page2.php?top=CSP&amp;middle=Level 2a&amp;bottom=Haki Stairs">Haki Stairs</a></li>
                  <li><a href="page2.php?top=CSP&amp;middle=Level 2a&amp;bottom=Storage Area">Storage Area</a></li>
                  <li><a href="page2.php?top=CSP&amp;middle=Level 2a&amp;bottom=Lightwell">Lightwell</a></li>
                  <li><a href="page2.php?top=CSP&amp;middle=Level 2a&amp;bottom=Atrium">Atrium</a></li>
               </ul>
              </li>
              <li><a href="#" id="Drop29">Level 3</a>
              <ul id="sub-menu29" style="top:-54px;">
                  <li><a href="page2.php?top=CSP&amp;middle=Level 3&amp;bottom=Room">Room</a></li>
                  <li><a href="page2.php?top=CSP&amp;middle=Level 3&amp;bottom=Plant Room">Plant Room</a></li>
                  <li><a href="page2.php?top=CSP&amp;middle=Level 3&amp;bottom=Corridor">Corridor</a></li>
                  <li><a href="page2.php?top=CSP&amp;middle=Level 3&amp;bottom=Stair Core">Stair Core</a></li>
                  <li><a href="page2.php?top=CSP&amp;middle=Level 3&amp;bottom=Riser">Riser</a></li>
                  <li><a href="page2.php?top=CSP&amp;middle=Level 3&amp;bottom=Haki Stairs">Haki Stairs</a></li>
                  <li><a href="page2.php?top=CSP&amp;middle=Level 3&amp;bottom=Storage Area">Storage Area</a></li>
                  <li><a href="page2.php?top=CSP&amp;middle=Level 3&amp;bottom=Lightwell">Lightwell</a></li>
                  <li><a href="page2.php?top=CSP&amp;middle=Level 3&amp;bottom=Atrium">Atrium</a></li>
               </ul>
              </li>
              <li><a href="#" id="Drop30">Level 4</a>
              <ul id="sub-menu30" style="top:-103px;">
                  <li><a href="page2.php?top=CSP&amp;middle=Level 4&amp;bottom=Room">Room</a></li>
                  <li><a href="page2.php?top=CSP&amp;middle=Level 4&amp;bottom=Plant Room">Plant Room</a></li>
                  <li><a href="page2.php?top=CSP&amp;middle=Level 4&amp;bottom=Corridor">Corridor</a></li>
                  <li><a href="page2.php?top=CSP&amp;middle=Level 4&amp;bottom=Stair Core">Stair Core</a></li>
                  <li><a href="page2.php?top=CSP&amp;middle=Level 4&amp;bottom=Riser">Riser</a></li>
                  <li><a href="page2.php?top=CSP&amp;middle=Level 4&amp;bottom=Haki Stairs">Haki Stairs</a></li>
                  <li><a href="page2.php?top=CSP&amp;middle=Level 4&amp;bottom=Storage Area">Storage Area</a></li>
                  <li><a href="page2.php?top=CSP&amp;middle=Level 4&amp;bottom=Lightwell">Lightwell</a></li>
                  <li><a href="page2.php?top=CSP&amp;middle=Level 4&amp;bottom=Atrium">Atrium</a></li>
               </ul>
              </li>
              <li><a href="#" id="Drop31">Level 5</a>
              <ul id="sub-menu31" style="top:-152px;">
                  <li><a href="page2.php?top=CSP&amp;middle=Level 5&amp;bottom=Room">Room</a></li>
                  <li><a href="page2.php?top=CSP&amp;middle=Level 5&amp;bottom=Plant Room">Plant Room</a></li>
                  <li><a href="page2.php?top=CSP&amp;middle=Level 5&amp;bottom=Corridor">Corridor</a></li>
                  <li><a href="page2.php?top=CSP&amp;middle=Level 5&amp;bottom=Stair Core">Stair Core</a></li>
                  <li><a href="page2.php?top=CSP&amp;middle=Level 5&amp;bottom=Riser">Riser</a></li>
                  <li><a href="page2.php?top=CSP&amp;middle=Level 5&amp;bottom=Haki Stairs">Haki Stairs</a></li>
                  <li><a href="page2.php?top=CSP&amp;middle=Level 5&amp;bottom=Storage Area">Storage Area</a></li>
                  <li><a href="page2.php?top=CSP&amp;middle=Level 5&amp;bottom=Lightwell">Lightwell</a></li>
                  <li><a href="page2.php?top=CSP&amp;middle=Level 5&amp;bottom=Atrium">Atrium</a></li>
               </ul>
              </li>
              <li><a href="#" id="Drop32">Level 6</a>
              <ul id="sub-menu32" style="top:-201px;">
                  <li><a href="page2.php?top=CSP&amp;middle=Level 6&amp;bottom=Room">Room</a></li>
                  <li><a href="page2.php?top=CSP&amp;middle=Level 6&amp;bottom=Plant Room">Plant Room</a></li>
                  <li><a href="page2.php?top=CSP&amp;middle=Level 6&amp;bottom=Corridor">Corridor</a></li>
                  <li><a href="page2.php?top=CSP&amp;middle=Level 6&amp;bottom=Stair Core">Stair Core</a></li>
                  <li><a href="page2.php?top=CSP&amp;middle=Level 6&amp;bottom=Riser">Riser</a></li>
                  <li><a href="page2.php?top=CSP&amp;middle=Level 6&amp;bottom=Haki Stairs">Haki Stairs</a></li>
                  <li><a href="page2.php?top=CSP&amp;middle=Level 6&amp;bottom=Storage Area">Storage Area</a></li>
                  <li><a href="page2.php?top=CSP&amp;middle=Level 6&amp;bottom=Lightwell">Lightwell</a></li>
                  <li><a href="page2.php?top=CSP&amp;middle=Level 6&amp;bottom=Atrium">Atrium</a></li>
               </ul>
              </li>
              <li><a href="#" id="Drop33">Level 7</a>
              <ul id="sub-menu33" style="top:-250px;">
                  <li><a href="page2.php?top=CSP&amp;middle=Level 7&amp;bottom=Room">Room</a></li>
                  <li><a href="page2.php?top=CSP&amp;middle=Level 7&amp;bottom=Plant Room">Plant Room</a></li>
                  <li><a href="page2.php?top=CSP&amp;middle=Level 7&amp;bottom=Corridor">Corridor</a></li>
                  <li><a href="page2.php?top=CSP&amp;middle=Level 7&amp;bottom=Stair Core">Stair Core</a></li>
                  <li><a href="page2.php?top=CSP&amp;middle=Level 7&amp;bottom=Riser">Riser</a></li>
                  <li><a href="page2.php?top=CSP&amp;middle=Level 7&amp;bottom=Haki Stairs">Haki Stairs</a></li>
                  <li><a href="page2.php?top=CSP&amp;middle=Level 7&amp;bottom=Storage Area">Storage Area</a></li>
                  <li><a href="page2.php?top=CSP&amp;middle=Level 7&amp;bottom=Lightwell">Lightwell</a></li>
                  <li><a href="page2.php?top=CSP&amp;middle=Level 7&amp;bottom=Atrium">Atrium</a></li>
               </ul>
              </li>
              <li><a href="#" id="Drop34">Level 8</a>
              <ul id="sub-menu34" style="top:-299px;">
                  <li><a href="page2.php?top=CSP&amp;middle=Level 8&amp;bottom=Room">Room</a></li>
                  <li><a href="page2.php?top=CSP&amp;middle=Level 8&amp;bottom=Plant Room">Plant Room</a></li>
                  <li><a href="page2.php?top=CSP&amp;middle=Level 8&amp;bottom=Corridor">Corridor</a></li>
                  <li><a href="page2.php?top=CSP&amp;middle=Level 8&amp;bottom=Stair Core">Stair Core</a></li>
                  <li><a href="page2.php?top=CSP&amp;middle=Level 8&amp;bottom=Riser">Riser</a></li>
                  <li><a href="page2.php?top=CSP&amp;middle=Level 8&amp;bottom=Haki Stairs">Haki Stairs</a></li>
                  <li><a href="page2.php?top=CSP&amp;middle=Level 8&amp;bottom=Storage Area">Storage Area</a></li>
                  <li><a href="page2.php?top=CSP&amp;middle=Level 8&amp;bottom=Lightwell">Lightwell</a></li>
                  <li><a href="page2.php?top=CSP&amp;middle=Level 8&amp;bottom=Atrium">Atrium</a></li>
               </ul>
              </li>
            </ul>
            </li>
            <li><a href="#" id="Drop5">BHOC</a>
    		  <ul id="sub-menu5" style="top:-103px;">
              <li><a href="#" id="Drop35">LG 1</a>
              <ul id="sub-menu35" style="top:44px;">
                  <li><a href="page2.php?top=BHOC&amp;middle=LG 1&amp;bottom=Room">Room</a></li>
                  <li><a href="page2.php?top=BHOC&amp;middle=LG 1&amp;bottom=Plant Room">Plant Room</a></li>
                  <li><a href="page2.php?top=BHOC&amp;middle=LG 1&amp;bottom=Corridor">Corridor</a></li>
                  <li><a href="page2.php?top=BHOC&amp;middle=LG 1&amp;bottom=Stair Core">Stair Core</a></li>
                  <li><a href="page2.php?top=BHOC&amp;middle=LG 1&amp;bottom=Riser">Riser</a></li>
                  <li><a href="page2.php?top=BHOC&amp;middle=LG 1&amp;bottom=Haki Stairs">Haki Stairs</a></li>
                  <li><a href="page2.php?top=BHOC&amp;middle=LG 1&amp;bottom=Storage Area">Storage Area</a></li>
                  <li><a href="page2.php?top=BHOC&amp;middle=LG 1&amp;bottom=Lightwell">Lightwell</a></li>
                  <li><a href="page2.php?top=BHOC&amp;middle=LG 1&amp;bottom=Atrium">Atrium</a></li>
               </ul>
              </li>
              <li><a href="#" id="Drop36">LG 2</a>
              <ul id="sub-menu36" style="top:-5px;">
                  <li><a href="page2.php?top=BHOC&amp;middle=LG 2&amp;bottom=Room">Room</a></li>
                  <li><a href="page2.php?top=BHOC&amp;middle=LG 2&amp;bottom=Plant Room">Plant Room</a></li>
                  <li><a href="page2.php?top=BHOC&amp;middle=LG 2&amp;bottom=Corridor">Corridor</a></li>
                  <li><a href="page2.php?top=BHOC&amp;middle=LG 2&amp;bottom=Stair Core">Stair Core</a></li>
                  <li><a href="page2.php?top=BHOC&amp;middle=LG 2&amp;bottom=Riser">Riser</a></li>
                  <li><a href="page2.php?top=BHOC&amp;middle=LG 2&amp;bottom=Haki Stairs">Haki Stairs</a></li>
                  <li><a href="page2.php?top=BHOC&amp;middle=LG 2&amp;bottom=Storage Area">Storage Area</a></li>
                  <li><a href="page2.php?top=BHOC&amp;middle=LG 2&amp;bottom=Lightwell">Lightwell</a></li>
                  <li><a href="page2.php?top=BHOC&amp;middle=LG 2&amp;bottom=Atrium">Atrium</a></li>
               </ul>
              </li>
              <li><a href="#" id="Drop37">G</a>
              <ul id="sub-menu37" style="top:-54px;">
                  <li><a href="page2.php?top=BHOC&amp;middle=G&amp;bottom=Room">Room</a></li>
                  <li><a href="page2.php?top=BHOC&amp;middle=G&amp;bottom=Plant Room">Plant Room</a></li>
                  <li><a href="page2.php?top=BHOC&amp;middle=G&amp;bottom=Corridor">Corridor</a></li>
                  <li><a href="page2.php?top=BHOC&amp;middle=G&amp;bottom=Stair Core">Stair Core</a></li>
                  <li><a href="page2.php?top=BHOC&amp;middle=G&amp;bottom=Riser">Riser</a></li>
                  <li><a href="page2.php?top=BHOC&amp;middle=G&amp;bottom=Haki Stairs">Haki Stairs</a></li>
                  <li><a href="page2.php?top=BHOC&amp;middle=G&amp;bottom=Storage Area">Storage Area</a></li>
                  <li><a href="page2.php?top=BHOC&amp;middle=G&amp;bottom=Lightwell">Lightwell</a></li>
                  <li><a href="page2.php?top=BHOC&amp;middle=G&amp;bottom=Atrium">Atrium</a></li>
               </ul>
              </li>
              <li><a href="#" id="Drop38">Level 1</a>
              <ul id="sub-menu38" style="top:-103px;">
                  <li><a href="page2.php?top=BHOC&amp;middle=Level 1&amp;bottom=Room">Room</a></li>
                  <li><a href="page2.php?top=BHOC&amp;middle=Level 1&amp;bottom=Plant Room">Plant Room</a></li>
                  <li><a href="page2.php?top=BHOC&amp;middle=Level 1&amp;bottom=Corridor">Corridor</a></li>
                  <li><a href="page2.php?top=BHOC&amp;middle=Level 1&amp;bottom=Stair Core">Stair Core</a></li>
                  <li><a href="page2.php?top=BHOC&amp;middle=Level 1&amp;bottom=Riser">Riser</a></li>
                  <li><a href="page2.php?top=BHOC&amp;middle=Level 1&amp;bottom=Haki Stairs">Haki Stairs</a></li>
                  <li><a href="page2.php?top=BHOC&amp;middle=Level 1&amp;bottom=Storage Area">Storage Area</a></li>
                  <li><a href="page2.php?top=BHOC&amp;middle=Level 1&amp;bottom=Lightwell">Lightwell</a></li>
                  <li><a href="page2.php?top=BHOC&amp;middle=Level 1&amp;bottom=Atrium">Atrium</a></li>
               </ul>
              </li>
              <li><a href="#" id="Drop39">Level 2</a>
              <ul id="sub-menu39" style="top:-152px;">
                  <li><a href="page2.php?top=BHOC&amp;middle=Level 2&amp;bottom=Room">Room</a></li>
                  <li><a href="page2.php?top=BHOC&amp;middle=Level 2&amp;bottom=Plant Room">Plant Room</a></li>
                  <li><a href="page2.php?top=BHOC&amp;middle=Level 2&amp;bottom=Corridor">Corridor</a></li>
                  <li><a href="page2.php?top=BHOC&amp;middle=Level 2&amp;bottom=Stair Core">Stair Core</a></li>
                  <li><a href="page2.php?top=BHOC&amp;middle=Level 2&amp;bottom=Riser">Riser</a></li>
                  <li><a href="page2.php?top=BHOC&amp;middle=Level 2&amp;bottom=Haki Stairs">Haki Stairs</a></li>
                  <li><a href="page2.php?top=BHOC&amp;middle=Level 2&amp;bottom=Storage Area">Storage Area</a></li>
                  <li><a href="page2.php?top=BHOC&amp;middle=Level 2&amp;bottom=Lightwell">Lightwell</a></li>
                  <li><a href="page2.php?top=BHOC&amp;middle=Level 2&amp;bottom=Atrium">Atrium</a></li>
               </ul>
              </li>
              <li><a href="#" id="Drop40">Level 3</a>
              <ul id="sub-menu40" style="top:-201px;">
                  <li><a href="page2.php?top=BHOC&amp;middle=Level 3&amp;bottom=Room">Room</a></li>
                  <li><a href="page2.php?top=BHOC&amp;middle=Level 3&amp;bottom=Plant Room">Plant Room</a></li>
                  <li><a href="page2.php?top=BHOC&amp;middle=Level 3&amp;bottom=Corridor">Corridor</a></li>
                  <li><a href="page2.php?top=BHOC&amp;middle=Level 3&amp;bottom=Stair Core">Stair Core</a></li>
                  <li><a href="page2.php?top=BHOC&amp;middle=Level 3&amp;bottom=Riser">Riser</a></li>
                  <li><a href="page2.php?top=BHOC&amp;middle=Level 3&amp;bottom=Haki Stairs">Haki Stairs</a></li>
                  <li><a href="page2.php?top=BHOC&amp;middle=Level 3&amp;bottom=Storage Area">Storage Area</a></li>
                  <li><a href="page2.php?top=BHOC&amp;middle=Level 3&amp;bottom=Lightwell">Lightwell</a></li>
                  <li><a href="page2.php?top=BHOC&amp;middle=Level 3&amp;bottom=Atrium">Atrium</a></li>
               </ul>
              </li>
              <li><a href="#" id="Drop41">Level 4</a>
              <ul id="sub-menu41" style="top:-250px;">
                  <li><a href="page2.php?top=BHOC&amp;middle=Level 4&amp;bottom=Room">Room</a></li>
                  <li><a href="page2.php?top=BHOC&amp;middle=Level 4&amp;bottom=Plant Room">Plant Room</a></li>
                  <li><a href="page2.php?top=BHOC&amp;middle=Level 4&amp;bottom=Corridor">Corridor</a></li>
                  <li><a href="page2.php?top=BHOC&amp;middle=Level 4&amp;bottom=Stair Core">Stair Core</a></li>
                  <li><a href="page2.php?top=BHOC&amp;middle=Level 4&amp;bottom=Riser">Riser</a></li>
                  <li><a href="page2.php?top=BHOC&amp;middle=Level 4&amp;bottom=Haki Stairs">Haki Stairs</a></li>
                  <li><a href="page2.php?top=BHOC&amp;middle=Level 4&amp;bottom=Storage Area">Storage Area</a></li>
                  <li><a href="page2.php?top=BHOC&amp;middle=Level 4&amp;bottom=Lightwell">Lightwell</a></li>
                  <li><a href="page2.php?top=BHOC&amp;middle=Level 4&amp;bottom=Atrium">Atrium</a></li>
               </ul>
              </li>
          </ul>
          </li>
          <li><a href="page2.php?top=Welfare/Other" id="Drop5">Welfare/Other</a></li>
        </ul>
      </li>
        <li>PAGE <span style="color:#F00; text-decoration:underline">1</span> | 2 | 3 | 4</li>
        <li><div id="time"><?=date("d/m/Y H:i") ?></div></li>
      </ul>
    </div>
    This is the CSS if needed:

    Code:
    #Drop_down_wrapper {
        width:810px;
        background: #fff;
        height: 45px;
    }
    #Drop_down_wrapper ul li a:link {
    	display:block;
        color: black !important;
    	width:100%;
    	height:100%;
        }
    #Drop_down_wrapper ul li a:visited {
    	display:block;
        color: black !important;
    	width:100%;
    	height:100%;	
        }
    #Drop_down_wrapper ul li a:hover {
    	display:block;
    	width:250px;
    	height:45px;
        color: white !important;
    	background-color:#FF0000;
        }
    #Drop_down_wrapper ul > li {
        float: left;
        line-height: 45px;
    	width:250px;
    	position:relative;
    	font-weight:normal; 
    	text-align:center; 
    	background-color:#FFFFFF; 
    	line-height:43px; 
    	height:43px; 
    	border:#333 solid 1px; 
    	color:#0099FF; 
    	margin-top:-1px;
    	margin-right:1px;
    	left:-40px;
    	display:!important;
    }    
    
    #Drop_down_wrapper ul > li a:link{
        color: #1961B2;
        font-size: 14px;
        font-weight: normal;
    	text-decoration:none;
    }
    #Drop_down_wrapper ul li a:visited {
    	color: #1961B2; 
        font-size: 14px;
        font-weight: normal;
    	text-decoration:none;   
    }          	
    #Drop_down_wrapper ul li a:hover {
    	color:#F09909;
        font-size: 14px;
        font-weight: normal;
    	text-decoration:underline;   
    }
    #Drop_down_wrapper ul li ul {
        display: none;
        position: absolute;
        border: 0px solid #000000;
        border-top: none;
    	float:left;
    	left:-41px;
    	width:250px;
    	top:44px;
    }   
    #Drop_down_wrapper ul li ul li {
    	position:relative;
        line-height: 45px;
        height: 45px;
    	left:0px;
    	margin-top:2px;
    }   
    #Drop_down_wrapper ul li ul li a:link {
    	display:block;
        color: black !important;
    	width:100%;
    	height:100%;
        }
    #Drop_down_wrapper ul li ul li a:visited {
    	display:block;
        color: black !important;
    	width:100%;
    	height:100%;	
        }
    #Drop_down_wrapper ul li ul li a:hover {
    	display:block;
    	width:250px;
    	height:45px;
        color: white !important;
    	background-color:#FF0000;
        }
    #Drop_down_wrapper ul li ul li ul li{
    	float:left;
    	left:252px;
    	top:-47px;
    	margin-left:1px;
    }
    #Drop_down_wrapper ul li ul li ul li a {
    	color: blue !important;	
    }
    #Drop_down_wrapper ul li ul li ul li ul li a {
    	color: orange !important;	
    }

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,002
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hi there,

    You'll need to define an active class, then apply this depending on what was clicked:

    Code JavaScript:
    $links = $("#sub-menu1").find("a");
    $linksLevel1 = $("#sub-menu1 > li > a");
    $linksLevel2 = $("#sub-menu1 > li > ul > li > a");
    $linksLevel3 = $("#sub-menu1 > li > ul > li > ul > li > a");
     
    $links.on("click", function(e){
      e.preventDefault();
     
      var arr = [
        $linksLevel1.index($(this)), 
        $linksLevel2.index($(this)), 
        $linksLevel3.index($(this))
      ]
     
      var level = arr.indexOf(Math.max.apply(Math, arr));
     
      if (level === 0){
        $linksLevel1.removeClass("active");
      } else if (level === 1){
        $linksLevel2.removeClass("active");
      } else {
        $linksLevel3.removeClass("active");
      }
     
      $(this).addClass("active");
    });

    HTH

  3. #3
    SitePoint Guru
    Join Date
    Feb 2006
    Location
    Chepstow, South Wales
    Posts
    911
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Pullo,

    Thanks for getting back to me.

    I added that script with this change inthe css:

    Code:
    a:active, a:focus {
        outline: 0;
        outline-style:none;
        outline-width:0;
    	background-color:#FF0000;
    	color:#FFFFFF;
    }
    And it works perfectly, but for one issue.

    The breadcrumb effect isnt working, in that the selection in the top level goes away when the button in level 2 is selected, when ideally it needs to stay on each level, to show the breadcrumb.

    Have I missed anything to change?

    Thanks though Pullo, your very good at what you do.

  4. #4
    SitePoint Guru
    Join Date
    Feb 2006
    Location
    Chepstow, South Wales
    Posts
    911
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah, by adding that css have i over written that script?

    Do I just add say a background colour on .active in the css file?

    Sorry Pullo, think I may have taken a wrong turn there

    I'll take that css bit away i think, and what made me do it, is because i cant get it working just with the script itself.

  5. #5
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,002
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hi,

    Sorry for the short reply, but I'm away from the PC.
    Anyway, all you need to do is define an active class, thus:

    Code CSS:
    .active{ background-color: yellow; }

    Let me know if you are still having problems having done that.

  6. #6
    SitePoint Guru
    Join Date
    Feb 2006
    Location
    Chepstow, South Wales
    Posts
    911
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah yes good, thats exactly what I did, so i did sort of read it right, this is what I put:

    Code:
    .active{
    background-color:#FF0000; 
    }
    And unfortunately its not working.

    Dont worry about putting yourself out Pullo, if your busy there no rush at all.

  7. #7
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,002
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hi there,

    You need to put the script at the end of your document, just before the closing body tag:

    Code:
        <script>
          $links = $("#sub-menu1").find("a");
          $linksLevel1 = $("#sub-menu1 > li > a");
          $linksLevel2 = $("#sub-menu1 > li > ul > li > a");
          $linksLevel3 = $("#sub-menu1 > li > ul > li > ul > li > a");
           
          $links.on("click", function(e){
            e.preventDefault();
           
            var arr = [
              $linksLevel1.index($(this)), 
              $linksLevel2.index($(this)), 
              $linksLevel3.index($(this))
            ]
           
            var level = arr.indexOf(Math.max.apply(Math, arr));
           
            if (level === 0){
              $linksLevel1.removeClass("active");
            } else if (level === 1){
              $linksLevel2.removeClass("active");
            } else {
              $linksLevel3.removeClass("active");
            }
           
            $(this).addClass("active");
          });
        </script>
      </body>
    </html>
    You currently have it in the head section of your document and it is attempting to reference elements before they exist on the page.

  8. #8
    SitePoint Guru
    Join Date
    Feb 2006
    Location
    Chepstow, South Wales
    Posts
    911
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah yes, sorry Pullo.

    Thats works perfectly, but would you help me with one last thing.
    When you get to the last level, I had it so that when you clicked the last elevel you moved to the next page, whats happening now is that its staying there, so could it be removed for the last section, so on click it moves to page 2.

    Thakns for coming back to me Pullo, your great fair play.

  9. #9
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,002
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Ah yes, that was the e.preventDefault().
    I had that in there for my own testing purposes.
    Try removing that line.

  10. #10
    SitePoint Guru
    Join Date
    Feb 2006
    Location
    Chepstow, South Wales
    Posts
    911
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Perfect thank you Pullo.

    Good night.

  11. #11
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,002
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Good night?
    I thought you were in Wales.
    It should only be 5pm in your part of the world.

  12. #12
    SitePoint Guru
    Join Date
    Feb 2006
    Location
    Chepstow, South Wales
    Posts
    911
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Pullo,

    Ye I am in Wales and yes it is only 5 lol, I dont know whay I said good night, funny though.

    I am returning though with a little problem which I didnt see as in work we are using IE9 I think and at home I'm using IE8.

    It seems OK in other borwsers, but in IE8 the button doesnt work, in that when you click it the second level doesnt appear, and the active function doesnt work either.

    But I'm still chuckling now about the good night thing, it must be the lack of sleep due to the high temps we are having at the mo.

    Whats it like in Germany, from what I have heard you get good summers in the south there.

    I am getting an error and the details are below, these are from error on page that appears at the bottom corner in IE.

    Webpage error details

    User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; GTB7.5; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729)
    Timestamp: Thu, 11 Jul 2013 19:49:59 UTC


    Message: 'setActive' is undefined
    Line: 526
    Char: 1
    Code: 0
    URI: http://www.whhazardreport.co.uk/index1.php


    Message: Object doesn't support this property or method
    Line: 543
    Char: 3
    Code: 0
    URI: http://www.whhazardreport.co.uk/index1.php

  13. #13
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,002
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hey multichild,

    Quote Originally Posted by multichild View Post
    I am returning though with a little problem which I didnt see as in work we are using IE9 I think and at home I'm using IE8.

    It seems OK in other borwsers, but in IE8 the button doesnt work, in that when you click it the second level doesnt appear, and the active function doesnt work either.
    This is because I used [samp]indexOf[samp] to find the index of the largest value in the array.

    Replace this line:

    Code JavaScript:
    var level = arr.indexOf(Math.max.apply(Math, arr));

    with this:

    Code JavaScript:
    var i = 0, m = arr[0], level = 0;
     
    while(++i < arr.length) {
      if(arr[i] > m) {
        level = i;
        m = arr[i];
      }
    }

    and it'll work in IE8, too.

    I can't claim ownership of that little snippet.
    It was taken from here: http://stackoverflow.com/questions/1...ue-in-an-array

    Quote Originally Posted by multichild View Post
    Message: 'setActive' is undefined
    Line: 526
    Char: 1
    Code: 0
    URI: http://www.whhazardreport.co.uk/index1.php
    This is an unrelated message, caused by window.onload = setActive; in line 526 of your code.

    It has nothing to do with me and was there when I initially looked at the document yesterday.

    Quote Originally Posted by multichild View Post
    Whats it like in Germany, from what I have heard you get good summers in the south there.
    That's true, but I'm in the north.
    The weather isn't too bad at the moment - blue skies, sun shining, birds singing - perfect weather to sit staring at a monitor

  14. #14
    SitePoint Guru
    Join Date
    Feb 2006
    Location
    Chepstow, South Wales
    Posts
    911
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you Pullo,

    Yes I only posted the error as I thought it might be related, but thank you for you help and same here I'm sat in front of a screen in the cellar of an old converted wine warehouse by day, and I dont get to see much light.

    Thanks again though, and take care

  15. #15
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Pullo View Post
    Code JavaScript:
    var i = 0, m = arr[0], level = 0;
     
    while(++i < arr.length) {
      if(arr[i] > m) {
        level = i;
        m = arr[i];
      }
    }

    I can't claim ownership of that little snippet.
    It's best left alone - it's attempting to optimize for speed and is losing significant levels of comprehension in its wake.

    A much less confusing version of that loop is:

    Code javascript:
    var level,
        i,
        max = arr[0];
    for (i = 0; i < arr.length; i += 1) {
        if(arr[i] > max) {
            max = arr[i];
            level = i;
        }
    }

    Or even:

    Code javascript:
    var level = 0,
        i;
    for (i = 0; i < arr.length; i += 1) {
        if(arr[i] > arr[level]) {
            level = i;
        }
    }
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  16. #16
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,002
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Good point, Paul.
    Thanks for picking up on that.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •