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
<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&middle=Level 2&bottom=Room">Room</a></li>
<li><a href="page2.php?top=Ward Block&middle=Level 2&bottom=Plant Room">Plant Room</a></li>
<li><a href="page2.php?top=Ward Block&middle=Level 2&bottom=Corridor">Corridor</a></li>
<li><a href="page2.php?top=Ward Block&middle=Level 2&bottom=Stair Core">Stair Core</a></li>
<li><a href="page2.php?top=Ward Block&middle=Level 2&bottom=Riser">Riser</a></li>
<li><a href="page2.php?top=Ward Block&middle=Level 2&bottom=Haki Stairs">Haki Stairs</a></li>
<li><a href="page2.php?top=Ward Block&middle=Level 2&bottom=Storage Area">Storage Area</a></li>
<li><a href="page2.php?top=Ward Block&middle=Level 2&bottom=Lightwell">Lightwell</a></li>
<li><a href="page2.php?top=Ward Block&middle=Level 2&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&middle=Level 3&bottom=Room">Room</a></li>
<li><a href="page2.php?top=Ward Block&middle=Level 3&bottom=Plant Room">Plant Room</a></li>
<li><a href="page2.php?top=Ward Block&middle=Level 3&bottom=Corridor">Corridor</a></li>
<li><a href="page2.php?top=Ward Block&middle=Level 3&bottom=Stair Core">Stair Core</a></li>
<li><a href="page2.php?top=Ward Block&middle=Level 3&bottom=Riser">Riser</a></li>
<li><a href="page2.php?top=Ward Block&middle=Level 3&bottom=Haki Stairs">Haki Stairs</a></li>
<li><a href="page2.php?top=Ward Block&middle=Level 3&bottom=Storage Area">Storage Area</a></li>
<li><a href="page2.php?top=Ward Block&middle=Level 3&bottom=Lightwell">Lightwell</a></li>
<li><a href="page2.php?top=Ward Block&middle=Level 3&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&middle=Level 4&bottom=Room">Room</a></li>
<li><a href="page2.php?top=Ward Block&middle=Level 4&bottom=Plant Room">Plant Room</a></li>
<li><a href="page2.php?top=Ward Block&middle=Level 4&bottom=Corridor">Corridor</a></li>
<li><a href="page2.php?top=Ward Block&middle=Level 4&bottom=Stair Core">Stair Core</a></li>
<li><a href="page2.php?top=Ward Block&middle=Level 4&bottom=Riser">Riser</a></li>
<li><a href="page2.php?top=Ward Block&middle=Level 4&bottom=Haki Stairs">Haki Stairs</a></li>
<li><a href="page2.php?top=Ward Block&middle=Level 4&bottom=Storage Area">Storage Area</a></li>
<li><a href="page2.php?top=Ward Block&middle=Level 4&bottom=Lightwell">Lightwell</a></li>
<li><a href="page2.php?top=Ward Block&middle=Level 4&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&middle=Level 5&bottom=Room">Room</a></li>
<li><a href="page2.php?top=Ward Block&middle=Level 5&bottom=Plant Room">Plant Room</a></li>
<li><a href="page2.php?top=Ward Block&middle=Level 5&bottom=Corridor">Corridor</a></li>
<li><a href="page2.php?top=Ward Block&middle=Level 5&bottom=Stair Core">Stair Core</a></li>
<li><a href="page2.php?top=Ward Block&middle=Level 5&bottom=Riser">Riser</a></li>
<li><a href="page2.php?top=Ward Block&middle=Level 5&bottom=Haki Stairs">Haki Stairs</a></li>
<li><a href="page2.php?top=Ward Block&middle=Level 5&bottom=Storage Area">Storage Area</a></li>
<li><a href="page2.php?top=Ward Block&middle=Level 5&bottom=Lightwell">Lightwell</a></li>
<li><a href="page2.php?top=Ward Block&middle=Level 5&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&middle=Level 6&bottom=Room">Room</a></li>
<li><a href="page2.php?top=Ward Block&middle=Level 6&bottom=Plant Room">Plant Room</a></li>
<li><a href="page2.php?top=Ward Block&middle=Level 6&bottom=Corridor">Corridor</a></li>
<li><a href="page2.php?top=Ward Block&middle=Level 6&bottom=Stair Core">Stair Core</a></li>
<li><a href="page2.php?top=Ward Block&middle=Level 6&bottom=Riser">Riser</a></li>
<li><a href="page2.php?top=Ward Block&middle=Level 6&bottom=Haki Stairs">Haki Stairs</a></li>
<li><a href="page2.php?top=Ward Block&middle=Level 6&bottom=Storage Area">Storage Area</a></li>
<li><a href="page2.php?top=Ward Block&middle=Level 6&bottom=Lightwell">Lightwell</a></li>
<li><a href="page2.php?top=Ward Block&middle=Level 6&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&middle=Level 7&bottom=Room">Room</a></li>
<li><a href="page2.php?top=Ward Block&middle=Level 7&bottom=Plant Room">Plant Room</a></li>
<li><a href="page2.php?top=Ward Block&middle=Level 7&bottom=Corridor">Corridor</a></li>
<li><a href="page2.php?top=Ward Block&middle=Level 7&bottom=Stair Core">Stair Core</a></li>
<li><a href="page2.php?top=Ward Block&middle=Level 7&bottom=Riser">Riser</a></li>
<li><a href="page2.php?top=Ward Block&middle=Level 7&bottom=Haki Stairs">Haki Stairs</a></li>
<li><a href="page2.php?top=Ward Block&middle=Level 7&bottom=Storage Area">Storage Area</a></li>
<li><a href="page2.php?top=Ward Block&middle=Level 7&bottom=Lightwell">Lightwell</a></li>
<li><a href="page2.php?top=Ward Block&middle=Level 7&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&middle=Level 8&bottom=Room">Room</a></li>
<li><a href="page2.php?top=Ward Block&middle=Level 8&bottom=Plant Room">Plant Room</a></li>
<li><a href="page2.php?top=Ward Block&middle=Level 8&bottom=Corridor">Corridor</a></li>
<li><a href="page2.php?top=Ward Block&middle=Level 8&bottom=Stair Core">Stair Core</a></li>
<li><a href="page2.php?top=Ward Block&middle=Level 8&bottom=Riser">Riser</a></li>
<li><a href="page2.php?top=Ward Block&middle=Level 8&bottom=Haki Stairs">Haki Stairs</a></li>
<li><a href="page2.php?top=Ward Block&middle=Level 8&bottom=Storage Area">Storage Area</a></li>
<li><a href="page2.php?top=Ward Block&middle=Level 8&bottom=Lightwell">Lightwell</a></li>
<li><a href="page2.php?top=Ward Block&middle=Level 8&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&middle=Level 9&bottom=Room">Room</a></li>
<li><a href="page2.php?top=Ward Block&middle=Level 9&bottom=Plant Room">Plant Room</a></li>
<li><a href="page2.php?top=Ward Block&middle=Level 9&bottom=Corridor">Corridor</a></li>
<li><a href="page2.php?top=Ward Block&middle=Level 9&bottom=Stair Core">Stair Core</a></li>
<li><a href="page2.php?top=Ward Block&middle=Level 9&bottom=Riser">Riser</a></li>
<li><a href="page2.php?top=Ward Block&middle=Level 9&bottom=Haki Stairs">Haki Stairs</a></li>
<li><a href="page2.php?top=Ward Block&middle=Level 9&bottom=Storage Area">Storage Area</a></li>
<li><a href="page2.php?top=Ward Block&middle=Level 9&bottom=Lightwell">Lightwell</a></li>
<li><a href="page2.php?top=Ward Block&middle=Level 9&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&middle=Level 10&bottom=Room">Room</a></li>
<li><a href="page2.php?top=Ward Block&middle=Level 10&bottom=Plant Room">Plant Room</a></li>
<li><a href="page2.php?top=Ward Block&middle=Level 10&bottom=Corridor">Corridor</a></li>
<li><a href="page2.php?top=Ward Block&middle=Level 10&bottom=Stair Core">Stair Core</a></li>
<li><a href="page2.php?top=Ward Block&middle=Level 10&bottom=Riser">Riser</a></li>
<li><a href="page2.php?top=Ward Block&middle=Level 10&bottom=Haki Stairs">Haki Stairs</a></li>
<li><a href="page2.php?top=Ward Block&middle=Level 10&bottom=Storage Area">Storage Area</a></li>
<li><a href="page2.php?top=Ward Block&middle=Level 10&bottom=Lightwell">Lightwell</a></li>
<li><a href="page2.php?top=Ward Block&middle=Level 10&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&middle=Level 11&bottom=Room">Room</a></li>
<li><a href="page2.php?top=Ward Block&middle=Level 11&bottom=Plant Room">Plant Room</a></li>
<li><a href="page2.php?top=Ward Block&middle=Level 11&bottom=Corridor">Corridor</a></li>
<li><a href="page2.php?top=Ward Block&middle=Level 11&bottom=Stair Core">Stair Core</a></li>
<li><a href="page2.php?top=Ward Block&middle=Level 11&bottom=Riser">Riser</a></li>
<li><a href="page2.php?top=Ward Block&middle=Level 11&bottom=Haki Stairs">Haki Stairs</a></li>
<li><a href="page2.php?top=Ward Block&middle=Level 11&bottom=Storage Area">Storage Area</a></li>
<li><a href="page2.php?top=Ward Block&middle=Level 11&bottom=Lightwell">Lightwell</a></li>
<li><a href="page2.php?top=Ward Block&middle=Level 11&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&middle=Level 12&bottom=Room">Room</a></li>
<li><a href="page2.php?top=Ward Block&middle=Level 12&bottom=Plant Room">Plant Room</a></li>
<li><a href="page2.php?top=Ward Block&middle=Level 12&bottom=Corridor">Corridor</a></li>
<li><a href="page2.php?top=Ward Block&middle=Level 12&bottom=Stair Core">Stair Core</a></li>
<li><a href="page2.php?top=Ward Block&middle=Level 12&bottom=Riser">Riser</a></li>
<li><a href="page2.php?top=Ward Block&middle=Level 12&bottom=Haki Stairs">Haki Stairs</a></li>
<li><a href="page2.php?top=Ward Block&middle=Level 12&bottom=Storage Area">Storage Area</a></li>
<li><a href="page2.php?top=Ward Block&middle=Level 12&bottom=Lightwell">Lightwell</a></li>
<li><a href="page2.php?top=Ward Block&middle=Level 12&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&middle=Level 1&bottom=Room">Room</a></li>
<li><a href="page2.php?top=Queen's Building/Welcome Centre&middle=Level 1&bottom=Plant Room">Plant Room</a></li>
<li><a href="page2.php?top=Queen's Building/Welcome Centre&middle=Level 1&bottom=Corridor">Corridor</a></li>
<li><a href="page2.php?top=Queen's Building/Welcome Centre&middle=Level 1&bottom=Stair Core">Stair Core</a></li>
<li><a href="page2.php?top=Queen's Building/Welcome Centre&middle=Level 1&bottom=Riser">Riser</a></li>
<li><a href="page2.php?top=Queen's Building/Welcome Centre&middle=Level 1&bottom=Haki Stairs">Haki Stairs</a></li>
<li><a href="page2.php?top=Queen's Building/Welcome Centre&middle=Level 1&bottom=Storage Area">Storage Area</a></li>
<li><a href="page2.php?top=Queen's Building/Welcome Centre&middle=Level 1&bottom=Lightwell">Lightwell</a></li>
<li><a href="page2.php?top=Queen's Building/Welcome Centre&middle=Level 1&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&middle=Level 2&bottom=Room">Room</a></li>
<li><a href="page2.php?top=Queen's Building/Welcome Centre&middle=Level 2&bottom=Plant Room">Plant Room</a></li>
<li><a href="page2.php?top=Queen's Building/Welcome Centre&middle=Level 2&bottom=Corridor">Corridor</a></li>
<li><a href="page2.php?top=Queen's Building/Welcome Centre&middle=Level 2&bottom=Stair Core">Stair Core</a></li>
<li><a href="page2.php?top=Queen's Building/Welcome Centre&middle=Level 2&bottom=Riser">Riser</a></li>
<li><a href="page2.php?top=Queen's Building/Welcome Centre&middle=Level 2&bottom=Haki Stairs">Haki Stairs</a></li>
<li><a href="page2.php?top=Queen's Building/Welcome Centre&middle=Level 2&bottom=Storage Area">Storage Area</a></li>
<li><a href="page2.php?top=Queen's Building/Welcome Centre&middle=Level 2&bottom=Lightwell">Lightwell</a></li>
<li><a href="page2.php?top=Queen's Building/Welcome Centre&middle=Level 2&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&middle=Level 3&bottom=Room">Room</a></li>
<li><a href="page2.php?top=Queen's Building/Welcome Centre&middle=Level 3&bottom=Plant Room">Plant Room</a></li>
<li><a href="page2.php?top=Queen's Building/Welcome Centre&middle=Level 3&bottom=Corridor">Corridor</a></li>
<li><a href="page2.php?top=Queen's Building/Welcome Centre&middle=Level 3&bottom=Stair Core">Stair Core</a></li>
<li><a href="page2.php?top=Queen's Building/Welcome Centre&middle=Level 3&bottom=Riser">Riser</a></li>
<li><a href="page2.php?top=Queen's Building/Welcome Centre&middle=Level 3&bottom=Haki Stairs">Haki Stairs</a></li>
<li><a href="page2.php?top=Queen's Building/Welcome Centre&middle=Level 3&bottom=Storage Area">Storage Area</a></li>
<li><a href="page2.php?top=Queen's Building/Welcome Centre&middle=Level 3&bottom=Lightwell">Lightwell</a></li>
<li><a href="page2.php?top=Queen's Building/Welcome Centre&middle=Level 3&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&middle=Level 4&bottom=Room">Room</a></li>
<li><a href="page2.php?top=Queen's Building/Welcome Centre&middle=Level 4&bottom=Plant Room">Plant Room</a></li>
<li><a href="page2.php?top=Queen's Building/Welcome Centre&middle=Level 4&bottom=Corridor">Corridor</a></li>
<li><a href="page2.php?top=Queen's Building/Welcome Centre&middle=Level 4&bottom=Stair Core">Stair Core</a></li>
<li><a href="page2.php?top=Queen's Building/Welcome Centre&middle=Level 4&bottom=Riser">Riser</a></li>
<li><a href="page2.php?top=Queen's Building/Welcome Centre&middle=Level 4&bottom=Haki Stairs">Haki Stairs</a></li>
<li><a href="page2.php?top=Queen's Building/Welcome Centre&middle=Level 4&bottom=Storage Area">Storage Area</a></li>
<li><a href="page2.php?top=Queen's Building/Welcome Centre&middle=Level 4&bottom=Lightwell">Lightwell</a></li>
<li><a href="page2.php?top=Queen's Building/Welcome Centre&middle=Level 4&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&middle=Level 5&bottom=Room">Room</a></li>
<li><a href="page2.php?top=Queen's Building/Welcome Centre&middle=Level 5&bottom=Plant Room">Plant Room</a></li>
<li><a href="page2.php?top=Queen's Building/Welcome Centre&middle=Level 5&bottom=Corridor">Corridor</a></li>
<li><a href="page2.php?top=Queen's Building/Welcome Centre&middle=Level 5&bottom=Stair Core">Stair Core</a></li>
<li><a href="page2.php?top=Queen's Building/Welcome Centre&middle=Level 5&bottom=Riser">Riser</a></li>
<li><a href="page2.php?top=Queen's Building/Welcome Centre&middle=Level 5&bottom=Haki Stairs">Haki Stairs</a></li>
<li><a href="page2.php?top=Queen's Building/Welcome Centre&middle=Level 5&bottom=Storage Area">Storage Area</a></li>
<li><a href="page2.php?top=Queen's Building/Welcome Centre&middle=Level 5&bottom=Lightwell">Lightwell</a></li>
<li><a href="page2.php?top=Queen's Building/Welcome Centre&middle=Level 5&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&middle=Level 6&bottom=Room">Room</a></li>
<li><a href="page2.php?top=Queen's Building/Welcome Centre&middle=Level 6&bottom=Plant Room">Plant Room</a></li>
<li><a href="page2.php?top=Queen's Building/Welcome Centre&middle=Level 6&bottom=Corridor">Corridor</a></li>
<li><a href="page2.php?top=Queen's Building/Welcome Centre&middle=Level 6&bottom=Stair Core">Stair Core</a></li>
<li><a href="page2.php?top=Queen's Building/Welcome Centre&middle=Level 6&bottom=Riser">Riser</a></li>
<li><a href="page2.php?top=Queen's Building/Welcome Centre&middle=Level 6&bottom=Haki Stairs">Haki Stairs</a></li>
<li><a href="page2.php?top=Queen's Building/Welcome Centre&middle=Level 6&bottom=Storage Area">Storage Area</a></li>
<li><a href="page2.php?top=Queen's Building/Welcome Centre&middle=Level 6&bottom=Lightwell">Lightwell</a></li>
<li><a href="page2.php?top=Queen's Building/Welcome Centre&middle=Level 6&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&middle=Level 7&bottom=Room">Room</a></li>
<li><a href="page2.php?top=Queen's Building/Welcome Centre&middle=Level 7&bottom=Plant Room">Plant Room</a></li>
<li><a href="page2.php?top=Queen's Building/Welcome Centre&middle=Level 7&bottom=Corridor">Corridor</a></li>
<li><a href="page2.php?top=Queen's Building/Welcome Centre&middle=Level 7&bottom=Stair Core">Stair Core</a></li>
<li><a href="page2.php?top=Queen's Building/Welcome Centre&middle=Level 7&bottom=Riser">Riser</a></li>
<li><a href="page2.php?top=Queen's Building/Welcome Centre&middle=Level 7&bottom=Haki Stairs">Haki Stairs</a></li>
<li><a href="page2.php?top=Queen's Building/Welcome Centre&middle=Level 7&bottom=Storage Area">Storage Area</a></li>
<li><a href="page2.php?top=Queen's Building/Welcome Centre&middle=Level 7&bottom=Lightwell">Lightwell</a></li>
<li><a href="page2.php?top=Queen's Building/Welcome Centre&middle=Level 7&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&middle=Level 8&bottom=Room">Room</a></li>
<li><a href="page2.php?top=Queen's Building/Welcome Centre&middle=Level 8&bottom=Plant Room">Plant Room</a></li>
<li><a href="page2.php?top=Queen's Building/Welcome Centre&middle=Level 8&bottom=Corridor">Corridor</a></li>
<li><a href="page2.php?top=Queen's Building/Welcome Centre&middle=Level 8&bottom=Stair Core">Stair Core</a></li>
<li><a href="page2.php?top=Queen's Building/Welcome Centre&middle=Level 8&bottom=Riser">Riser</a></li>
<li><a href="page2.php?top=Queen's Building/Welcome Centre&middle=Level 8&bottom=Haki Stairs">Haki Stairs</a></li>
<li><a href="page2.php?top=Queen's Building/Welcome Centre&middle=Level 8&bottom=Storage Area">Storage Area</a></li>
<li><a href="page2.php?top=Queen's Building/Welcome Centre&middle=Level 8&bottom=Lightwell">Lightwell</a></li>
<li><a href="page2.php?top=Queen's Building/Welcome Centre&middle=Level 8&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&middle=Level 9&bottom=Room">Room</a></li>
<li><a href="page2.php?top=Queen's Building/Welcome Centre&middle=Level 9&bottom=Plant Room">Plant Room</a></li>
<li><a href="page2.php?top=Queen's Building/Welcome Centre&middle=Level 9&bottom=Corridor">Corridor</a></li>
<li><a href="page2.php?top=Queen's Building/Welcome Centre&middle=Level 9&bottom=Stair Core">Stair Core</a></li>
<li><a href="page2.php?top=Queen's Building/Welcome Centre&middle=Level 9&bottom=Riser">Riser</a></li>
<li><a href="page2.php?top=Queen's Building/Welcome Centre&middle=Level 9&bottom=Haki Stairs">Haki Stairs</a></li>
<li><a href="page2.php?top=Queen's Building/Welcome Centre&middle=Level 9&bottom=Storage Area">Storage Area</a></li>
<li><a href="page2.php?top=Queen's Building/Welcome Centre&middle=Level 9&bottom=Lightwell">Lightwell</a></li>
<li><a href="page2.php?top=Queen's Building/Welcome Centre&middle=Level 9&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&middle=Helipad&bottom=Room">Room</a></li>
<li><a href="page2.php?top=Queen's Building/Welcome Centre&middle=Helipad&bottom=Plant Room">Plant Room</a></li>
<li><a href="page2.php?top=Queen's Building/Welcome Centre&middle=Helipad&bottom=Corridor">Corridor</a></li>
<li><a href="page2.php?top=Queen's Building/Welcome Centre&middle=Helipad&bottom=Stair Core">Stair Core</a></li>
<li><a href="page2.php?top=Queen's Building/Welcome Centre&middle=Helipad&bottom=Riser">Riser</a></li>
<li><a href="page2.php?top=Queen's Building/Welcome Centre&middle=Helipad&bottom=Haki Stairs">Haki Stairs</a></li>
<li><a href="page2.php?top=Queen's Building/Welcome Centre&middle=Helipad&bottom=Storage Area">Storage Area</a></li>
<li><a href="page2.php?top=Queen's Building/Welcome Centre&middle=Helipad&bottom=Lightwell">Lightwell</a></li>
<li><a href="page2.php?top=Queen's Building/Welcome Centre&middle=Helipad&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&middle=Level 2&bottom=Room">Room</a></li>
<li><a href="page2.php?top=CSP&middle=Level 2&bottom=Plant Room">Plant Room</a></li>
<li><a href="page2.php?top=CSP&middle=Level 2&bottom=Corridor">Corridor</a></li>
<li><a href="page2.php?top=CSP&middle=Level 2&bottom=Stair Core">Stair Core</a></li>
<li><a href="page2.php?top=CSP&middle=Level 2&bottom=Riser">Riser</a></li>
<li><a href="page2.php?top=CSP&middle=Level 2&bottom=Haki Stairs">Haki Stairs</a></li>
<li><a href="page2.php?top=CSP&middle=Level 2&bottom=Storage Area">Storage Area</a></li>
<li><a href="page2.php?top=CSP&middle=Level 2&bottom=Lightwell">Lightwell</a></li>
<li><a href="page2.php?top=CSP&middle=Level 2&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&middle=Level 2a&bottom=Room">Room</a></li>
<li><a href="page2.php?top=CSP&middle=Level 2a&bottom=Plant Room">Plant Room</a></li>
<li><a href="page2.php?top=CSP&middle=Level 2a&bottom=Corridor">Corridor</a></li>
<li><a href="page2.php?top=CSP&middle=Level 2a&bottom=Stair Core">Stair Core</a></li>
<li><a href="page2.php?top=CSP&middle=Level 2a&bottom=Riser">Riser</a></li>
<li><a href="page2.php?top=CSP&middle=Level 2a&bottom=Haki Stairs">Haki Stairs</a></li>
<li><a href="page2.php?top=CSP&middle=Level 2a&bottom=Storage Area">Storage Area</a></li>
<li><a href="page2.php?top=CSP&middle=Level 2a&bottom=Lightwell">Lightwell</a></li>
<li><a href="page2.php?top=CSP&middle=Level 2a&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&middle=Level 3&bottom=Room">Room</a></li>
<li><a href="page2.php?top=CSP&middle=Level 3&bottom=Plant Room">Plant Room</a></li>
<li><a href="page2.php?top=CSP&middle=Level 3&bottom=Corridor">Corridor</a></li>
<li><a href="page2.php?top=CSP&middle=Level 3&bottom=Stair Core">Stair Core</a></li>
<li><a href="page2.php?top=CSP&middle=Level 3&bottom=Riser">Riser</a></li>
<li><a href="page2.php?top=CSP&middle=Level 3&bottom=Haki Stairs">Haki Stairs</a></li>
<li><a href="page2.php?top=CSP&middle=Level 3&bottom=Storage Area">Storage Area</a></li>
<li><a href="page2.php?top=CSP&middle=Level 3&bottom=Lightwell">Lightwell</a></li>
<li><a href="page2.php?top=CSP&middle=Level 3&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&middle=Level 4&bottom=Room">Room</a></li>
<li><a href="page2.php?top=CSP&middle=Level 4&bottom=Plant Room">Plant Room</a></li>
<li><a href="page2.php?top=CSP&middle=Level 4&bottom=Corridor">Corridor</a></li>
<li><a href="page2.php?top=CSP&middle=Level 4&bottom=Stair Core">Stair Core</a></li>
<li><a href="page2.php?top=CSP&middle=Level 4&bottom=Riser">Riser</a></li>
<li><a href="page2.php?top=CSP&middle=Level 4&bottom=Haki Stairs">Haki Stairs</a></li>
<li><a href="page2.php?top=CSP&middle=Level 4&bottom=Storage Area">Storage Area</a></li>
<li><a href="page2.php?top=CSP&middle=Level 4&bottom=Lightwell">Lightwell</a></li>
<li><a href="page2.php?top=CSP&middle=Level 4&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&middle=Level 5&bottom=Room">Room</a></li>
<li><a href="page2.php?top=CSP&middle=Level 5&bottom=Plant Room">Plant Room</a></li>
<li><a href="page2.php?top=CSP&middle=Level 5&bottom=Corridor">Corridor</a></li>
<li><a href="page2.php?top=CSP&middle=Level 5&bottom=Stair Core">Stair Core</a></li>
<li><a href="page2.php?top=CSP&middle=Level 5&bottom=Riser">Riser</a></li>
<li><a href="page2.php?top=CSP&middle=Level 5&bottom=Haki Stairs">Haki Stairs</a></li>
<li><a href="page2.php?top=CSP&middle=Level 5&bottom=Storage Area">Storage Area</a></li>
<li><a href="page2.php?top=CSP&middle=Level 5&bottom=Lightwell">Lightwell</a></li>
<li><a href="page2.php?top=CSP&middle=Level 5&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&middle=Level 6&bottom=Room">Room</a></li>
<li><a href="page2.php?top=CSP&middle=Level 6&bottom=Plant Room">Plant Room</a></li>
<li><a href="page2.php?top=CSP&middle=Level 6&bottom=Corridor">Corridor</a></li>
<li><a href="page2.php?top=CSP&middle=Level 6&bottom=Stair Core">Stair Core</a></li>
<li><a href="page2.php?top=CSP&middle=Level 6&bottom=Riser">Riser</a></li>
<li><a href="page2.php?top=CSP&middle=Level 6&bottom=Haki Stairs">Haki Stairs</a></li>
<li><a href="page2.php?top=CSP&middle=Level 6&bottom=Storage Area">Storage Area</a></li>
<li><a href="page2.php?top=CSP&middle=Level 6&bottom=Lightwell">Lightwell</a></li>
<li><a href="page2.php?top=CSP&middle=Level 6&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&middle=Level 7&bottom=Room">Room</a></li>
<li><a href="page2.php?top=CSP&middle=Level 7&bottom=Plant Room">Plant Room</a></li>
<li><a href="page2.php?top=CSP&middle=Level 7&bottom=Corridor">Corridor</a></li>
<li><a href="page2.php?top=CSP&middle=Level 7&bottom=Stair Core">Stair Core</a></li>
<li><a href="page2.php?top=CSP&middle=Level 7&bottom=Riser">Riser</a></li>
<li><a href="page2.php?top=CSP&middle=Level 7&bottom=Haki Stairs">Haki Stairs</a></li>
<li><a href="page2.php?top=CSP&middle=Level 7&bottom=Storage Area">Storage Area</a></li>
<li><a href="page2.php?top=CSP&middle=Level 7&bottom=Lightwell">Lightwell</a></li>
<li><a href="page2.php?top=CSP&middle=Level 7&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&middle=Level 8&bottom=Room">Room</a></li>
<li><a href="page2.php?top=CSP&middle=Level 8&bottom=Plant Room">Plant Room</a></li>
<li><a href="page2.php?top=CSP&middle=Level 8&bottom=Corridor">Corridor</a></li>
<li><a href="page2.php?top=CSP&middle=Level 8&bottom=Stair Core">Stair Core</a></li>
<li><a href="page2.php?top=CSP&middle=Level 8&bottom=Riser">Riser</a></li>
<li><a href="page2.php?top=CSP&middle=Level 8&bottom=Haki Stairs">Haki Stairs</a></li>
<li><a href="page2.php?top=CSP&middle=Level 8&bottom=Storage Area">Storage Area</a></li>
<li><a href="page2.php?top=CSP&middle=Level 8&bottom=Lightwell">Lightwell</a></li>
<li><a href="page2.php?top=CSP&middle=Level 8&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&middle=LG 1&bottom=Room">Room</a></li>
<li><a href="page2.php?top=BHOC&middle=LG 1&bottom=Plant Room">Plant Room</a></li>
<li><a href="page2.php?top=BHOC&middle=LG 1&bottom=Corridor">Corridor</a></li>
<li><a href="page2.php?top=BHOC&middle=LG 1&bottom=Stair Core">Stair Core</a></li>
<li><a href="page2.php?top=BHOC&middle=LG 1&bottom=Riser">Riser</a></li>
<li><a href="page2.php?top=BHOC&middle=LG 1&bottom=Haki Stairs">Haki Stairs</a></li>
<li><a href="page2.php?top=BHOC&middle=LG 1&bottom=Storage Area">Storage Area</a></li>
<li><a href="page2.php?top=BHOC&middle=LG 1&bottom=Lightwell">Lightwell</a></li>
<li><a href="page2.php?top=BHOC&middle=LG 1&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&middle=LG 2&bottom=Room">Room</a></li>
<li><a href="page2.php?top=BHOC&middle=LG 2&bottom=Plant Room">Plant Room</a></li>
<li><a href="page2.php?top=BHOC&middle=LG 2&bottom=Corridor">Corridor</a></li>
<li><a href="page2.php?top=BHOC&middle=LG 2&bottom=Stair Core">Stair Core</a></li>
<li><a href="page2.php?top=BHOC&middle=LG 2&bottom=Riser">Riser</a></li>
<li><a href="page2.php?top=BHOC&middle=LG 2&bottom=Haki Stairs">Haki Stairs</a></li>
<li><a href="page2.php?top=BHOC&middle=LG 2&bottom=Storage Area">Storage Area</a></li>
<li><a href="page2.php?top=BHOC&middle=LG 2&bottom=Lightwell">Lightwell</a></li>
<li><a href="page2.php?top=BHOC&middle=LG 2&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&middle=G&bottom=Room">Room</a></li>
<li><a href="page2.php?top=BHOC&middle=G&bottom=Plant Room">Plant Room</a></li>
<li><a href="page2.php?top=BHOC&middle=G&bottom=Corridor">Corridor</a></li>
<li><a href="page2.php?top=BHOC&middle=G&bottom=Stair Core">Stair Core</a></li>
<li><a href="page2.php?top=BHOC&middle=G&bottom=Riser">Riser</a></li>
<li><a href="page2.php?top=BHOC&middle=G&bottom=Haki Stairs">Haki Stairs</a></li>
<li><a href="page2.php?top=BHOC&middle=G&bottom=Storage Area">Storage Area</a></li>
<li><a href="page2.php?top=BHOC&middle=G&bottom=Lightwell">Lightwell</a></li>
<li><a href="page2.php?top=BHOC&middle=G&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&middle=Level 1&bottom=Room">Room</a></li>
<li><a href="page2.php?top=BHOC&middle=Level 1&bottom=Plant Room">Plant Room</a></li>
<li><a href="page2.php?top=BHOC&middle=Level 1&bottom=Corridor">Corridor</a></li>
<li><a href="page2.php?top=BHOC&middle=Level 1&bottom=Stair Core">Stair Core</a></li>
<li><a href="page2.php?top=BHOC&middle=Level 1&bottom=Riser">Riser</a></li>
<li><a href="page2.php?top=BHOC&middle=Level 1&bottom=Haki Stairs">Haki Stairs</a></li>
<li><a href="page2.php?top=BHOC&middle=Level 1&bottom=Storage Area">Storage Area</a></li>
<li><a href="page2.php?top=BHOC&middle=Level 1&bottom=Lightwell">Lightwell</a></li>
<li><a href="page2.php?top=BHOC&middle=Level 1&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&middle=Level 2&bottom=Room">Room</a></li>
<li><a href="page2.php?top=BHOC&middle=Level 2&bottom=Plant Room">Plant Room</a></li>
<li><a href="page2.php?top=BHOC&middle=Level 2&bottom=Corridor">Corridor</a></li>
<li><a href="page2.php?top=BHOC&middle=Level 2&bottom=Stair Core">Stair Core</a></li>
<li><a href="page2.php?top=BHOC&middle=Level 2&bottom=Riser">Riser</a></li>
<li><a href="page2.php?top=BHOC&middle=Level 2&bottom=Haki Stairs">Haki Stairs</a></li>
<li><a href="page2.php?top=BHOC&middle=Level 2&bottom=Storage Area">Storage Area</a></li>
<li><a href="page2.php?top=BHOC&middle=Level 2&bottom=Lightwell">Lightwell</a></li>
<li><a href="page2.php?top=BHOC&middle=Level 2&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&middle=Level 3&bottom=Room">Room</a></li>
<li><a href="page2.php?top=BHOC&middle=Level 3&bottom=Plant Room">Plant Room</a></li>
<li><a href="page2.php?top=BHOC&middle=Level 3&bottom=Corridor">Corridor</a></li>
<li><a href="page2.php?top=BHOC&middle=Level 3&bottom=Stair Core">Stair Core</a></li>
<li><a href="page2.php?top=BHOC&middle=Level 3&bottom=Riser">Riser</a></li>
<li><a href="page2.php?top=BHOC&middle=Level 3&bottom=Haki Stairs">Haki Stairs</a></li>
<li><a href="page2.php?top=BHOC&middle=Level 3&bottom=Storage Area">Storage Area</a></li>
<li><a href="page2.php?top=BHOC&middle=Level 3&bottom=Lightwell">Lightwell</a></li>
<li><a href="page2.php?top=BHOC&middle=Level 3&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&middle=Level 4&bottom=Room">Room</a></li>
<li><a href="page2.php?top=BHOC&middle=Level 4&bottom=Plant Room">Plant Room</a></li>
<li><a href="page2.php?top=BHOC&middle=Level 4&bottom=Corridor">Corridor</a></li>
<li><a href="page2.php?top=BHOC&middle=Level 4&bottom=Stair Core">Stair Core</a></li>
<li><a href="page2.php?top=BHOC&middle=Level 4&bottom=Riser">Riser</a></li>
<li><a href="page2.php?top=BHOC&middle=Level 4&bottom=Haki Stairs">Haki Stairs</a></li>
<li><a href="page2.php?top=BHOC&middle=Level 4&bottom=Storage Area">Storage Area</a></li>
<li><a href="page2.php?top=BHOC&middle=Level 4&bottom=Lightwell">Lightwell</a></li>
<li><a href="page2.php?top=BHOC&middle=Level 4&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:
#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;
}
