Customizing a 'Son of Suckerfish' drop down menu...

[drnic010]

Hey guys,

I don't know whether any of you are familiar with the Son of Suckerfish (http://htmldog.com/articles/suckerfish/dropdowns/) drop down menu, but this is the method I have used to implement a drop down menu in my intranet. The problem is, I'm not too confident with editting the code to create the effect I want.

I've attached an image which shows the menu with one of the links expanded. As you can see, the menu has expanded too far to the right. What I would like to do is have it rest directly under the link that it connects to.

Below is the code for the menu (javascript, html and css are all held in separate files to my page, linked using SSI):



sfHover = function() {

var sfElement = document.getElementById("nav").getElementsByTagName("LI");

for (var i = 0; i < sfElement.length; i++)

{

sfElement[i].onmouseover = function()

{

this.className += " sfhover";

}

sfElement[i].onmouseout = function()

{

this.className = this.className.replace(new RegExp(" sfhover\\b"), "");

}

}

}

if (window.attachEvent) window.attachEvent("onload", sfHover);




#nav, nav ul
{
padding: 0px;
margin: 0px;
list-style: none;
}

#nav li
{
position: relative;
float: left;
width: 10em;
}

#nav li ul
{
position: absolute;
width: 10em;
left: -999em;
}

#nav li:hover ul, #nav li.sfhover ul
{
left: auto;
background: white;
opacity: .80;
filter:alpha(opacity=80);
}

#nav a
{
display: block;
width: 10em;
}



<ul id="nav">

<li><a href="../home.shtml">Home</a></li>

<li><a href="#">Students</a>

<ul id="navStu">

<li><a href="../students-prep.shtml">Prep</a></li>

<li><a href="../students-lower.shtml">Lower</a></li>

<li><a href="../students-middle.shtml">Middle</a></li>

<li><a href="../students-senior.shtml">Senior</a></li>

<li><a href="../students-house.shtml">House</a></li>

<li><a href="../students-careers.shtml">Careers</a></li>

<li><a href="../sites/library/home.html">Library</a></li>


</ul>

</li>

<li><a href="#">Staff</a>

<ul id="navSta">

<li><a href="../Secured/staff-documents.shtml">Documents</a></li>

<li><a href="../Secured/staff-links.shtml">Links</a></li>

</ul>

</li>

<li><a href="#">Subjects</a>

<ul id="navSub">

<li><a href="../subjects-art.shtml">Art &amp; Design</a></li>

<li><a href="../subjects-classics.shtml">Classics</a></li>

<li><a href="../subjects-drama.shtml">Drama</a></li>

<li><a href="../subjects-design.shtml">Design &amp; Technology</a></li>

<li><a href="../subjects-economics.shtml">Economics</a></li>

<li><a href="../subjects-english.shtml">English</a></li>

<li><a href="../subjects-food.shtml">Food Technology</a></li>

<li><a href="../subjects-geography.shtml">Geography</a></li>

<li><a href="../subjects-history.shtml">History</a></li>

<li><a href="../subjects-ict.shtml">ICT</a></li>

<li><a href="../subjects-maths.shtml">Maths</a></li>

<li><a href="../subjects-mfl.shtml">MFL</a></li>

<li><a href="../subjects-music.shtml">Music</a></li>

<li><a href="../subjects-politics.shtml">Politics</a></li>

<li><a href="../subjects-prep.shtml">Prep</a></li>

<li><a href="../subjects-rs.shtml">Religious Studies</a></li>

<li><a href="../subjects-science.shtml">Science</a></li>

<li><a href="../subjects-sport.shtml">Sport &amp; PE</a></li>

<li><a href="../subjects-textiles.shtml">Textiles</a></li>

</ul>

</li>

<li><a href="O:\">LGS Common Drive</a></li>

<li><a href="http://eserver/exchange/">Email</a></li>

</ul>