PDA

View Full Version : Query re my own simple drop-down menu



susie123
12-13-2007, 03:20 PM
Before I start, I'm not sure if this is a JS query or a CSS (being fairly new) so I will put it in both sections... apologies if this causes inconvenience.

I have the following code... the dropdowns work BUT when I retract them, they move to a different position (up) and disappear from the screen AND when I move to the next menu item, the previous stays open/does not retract. Any ideas please? This is driving me mad and I'm desperate now. Many thanks for any help you can give me.


<html>
<head>
<title> </title>

<style type="text/css">
<!--
.menu {font-size:10pt; border-style:none; text-align:center; background-color:#ffffff; position:absolute; padding-left:116; top:10; width:710; height:25; padding:0; z-index:1}
//-->
</style>

<script type="text/javascript" language=javascript>
function toggleMenu(currElem){
if(document.all){
menuObj=eval("document.all."+currElem+".style")
menuObj.pixelTop=toggleVal(menuObj.pixelTop)
}
else{
menuObj = eval("document."+currElem)
menuObj.top=toggleVal(menuObj.top)
}
}
function toggleVal(inVal){
if (inVal==-5){
return -90
}
return -5
}
//-->
</script>

</head>
<body>

<div class="menu">

<span id="lang" class="menu" style="width:100; height:20; left:0; top:-2">
<a href="pages/lang.html" target="_blank" onMouseOver="window.status='Susan speaks...', 8000; return true" onMouseOut="window.status='', 8000; return true">LANGUAGES</a>
</SPAN>

<span id="itWeb" class="menu" style="left:100; width:140; height:25; top:-49">
<A HREF="pages/it.htm" target="_blank" onMouseOver="window.status='IT Packages & OS...', 8000; return true" onMouseOut="window.status='', 8000; return true">IT Packages & OS</a><br>
<A HREF="pages/design.htm" target="_blank" onMouseOver="window.status='Web Design...', 8000; return true" onMouseOut="window.status='', 8000; return true">Web Design</a><br>
<hr class="hrmenu">
<A HREF="javascript:toggleMenu('itWeb')" onMouseOver="window.status='IT & Web Design skills...', 8000; return true" onMouseOut="window.status='', 8000; return true">IT & WEB DESIGN</a>
</span>

<span id="educ" class="menu" style="width:100; left:233;top:-81">
<A HREF="pages/gcses.html" target="_blank" onMouseOver="window.status='Secondary education...', 8000; return true" onMouseOut="window.status='', 8000; return true">Secondary</a><br>
<A HREF="pages/btec.html" target="_blank" onMouseOver="window.status='Tertiary education...', 8000; return true" onMouseOut="window.status='', 8000; return true">Tertiary</a><br>
<A HREF="pages/adult.html" target="_blank" onMouseOver="window.status='Adult education...', 8000; return true" onMouseOut="window.status='', 8000; return true">Adult</a><br>
<A HREF="pages/education.html" target="_blank" onMouseOver="window.status='Other Qualifications/Training...', 8000; return true" onMouseOut="window.status='', 8000; return true">Other</a><br>
<hr class="hrmenu">
<A HREF="javascript:toggleMenu('educ')" onMouseOver="window.status='Education & Other Qualifications/Training...', 8000; return true" onMouseOut="window.status='', 8000; return true">EDUCATION</a>
</span>

<span id="hob" class="menu" style="width:175; left:333; top:-2">
<A HREF="pages/hobbies.html" target="_blank" onMouseOver="window.status='Hobbies & Interests...', 8000; return true" onMouseOut="window.status='', 8000; return true">HOBBIES & INTERESTS</a>
</span>

<span id="ref" class="menu" style="width:108; left:508; top:-97">
<A HREF="images/ssref1.jpg" target="_blank" onMouseOver="window.status='Student Report 1992-93...', 8000; return true" onMouseOut="window.status='', 8000; return true">Ref One</a><br>
<A HREF="images/ssref2.jpg" target="_blank" onMouseOver="window.status='Student Report 1993-94...', 8000; return true" onMouseOut="window.status='', 8000; return true">Ref Two</a><br>
<A HREF="images/ssref3.jpg" target="_blank" onMouseOver="window.status='Personal...', 8000; return true" onMouseOut="window.status='', 8000; return true">Ref Three</a><br>
<A HREF="images/ssref4.jpg" target="_blank" onMouseOver="window.status='Princess Cruises...', 8000; return true" onMouseOut="window.status='', 8000; return true">Ref Four</a><br>
<A HREF="images/ssref5.jpg" target="_blank" onMouseOver="window.status='American Express Europe Ltd...', 8000; return true" onMouseOut="window.status='', 8000; return true">Ref Five</a><br>
<hr class="hrmenu">
<A HREF="javascript:toggleMenu('ref')" onMouseOver="window.status='Various references, both professional & personal...', 8000; return true" onMouseOut="window.status='', 8000; return true">REFERENCES</a>
</span>

<span id="CV" class="menu" style="width:80; left:617; top:-2">
<A HREF="pages/cv-SeccombeSusan.doc" target="_blank" onMouseOver="window.status='Print CV...', 8000; return true" onMouseOut="window.status='', 8000; return true">PRINT CV</A><BR>
</span>
</div>

</body>
</html>