PDA

View Full Version : help with drop down menu positioning needed



Skinnybobb
05-30-2006, 09:19 AM
Hiya everyone,
I have a problem with my css menu. When you hover over a tab the dropdown list doesn't dropdown underneath the tabs it appears at the right!

Can anyone see where i'm going wrong?
(No site up yet)


<head>
<script type="text/javascript"><!--//--><![CDATA[//><!--

sfHover = function() {
var sfEls = document.getElementById("tabs").getElementsByTagName("li");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

//--><!]]></script>
<style type="text/css">
body {
font-family: arial, tahoma, sans-serif;
margin:0;
padding:0;
background: #BBD9EE;
font-size: 10pt;
}

#content {
padding:5px;
color:#666666;
background: #ffffff;
}

#contentbackground {
background: #BBD9EE;
padding-left:5px;
padding-right:6px;
padding-bottom:5px;
}

a {
color:#FF9834;
font-weight: bold;
}

a:hover {
text-decoration: none;
}

#topright {
text-align: right;
float: right;
padding-right: 4px;
background:#BBD9EE;
line-height:normal;
}



#tabs {
float:left;
width:100%;
background:#BBD9EE;
font-size:93%;
font-weight: bold;
line-height:normal;
}
#tabs ul {
margin:0;
padding:4px 0px 0 5px;
list-style:none;
}
#tabs li {
display:inline;
margin:0;
padding:0;
}
#tabs a {
float:left;
background:url("../images/common/tableft.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabs a span {
font: bold;
float:left;
display:block;
background:url("../images/common/tabright.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#666;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabs a span {float:none;}
/* End IE5-Mac hack */
#tabs a:hover span {
color:#FF9834;
}
#tabs a:hover {
background-position:0% -42px;
}
#tabs a:hover span {
background-position:100% -42px;
}

#tabs #current a {
background-position:0% -42px;
}
#tabs #current a span {
background-position:100% -42px;
}

#tabs li ul { /* second-level lists */
position: absolute;
background: #E7F1F8;
width: 10em;
left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
}

#tabs li:hover ul, #tabs li.sfhover ul { /* lists nested under hovered list items */
left: auto;
position: relative;

}
</head>
<body>
<div id="tabs">
<ul>
<li id="current"><a href="index.asp"><span>Home</span></a></li>
<ul>
<li><a href="#">help</a></li>
<li><a href="#">contact</a></li>
</ul>

<li><a href="Library.asp"><span>Library</span></a></li>
<li><a href="directorates.asp"><span>Directorates</span></a></li>
<li><a href="Support.asp"><span>Support</span></a></li>
<li><a href="News.asp"><span>News</span></a></li>
<li><a href="About.asp"><span>About</span></a></li>
</ul>
<div id="topright">
<a href="accessibility.asp"><span>Accessibility</span></a>
<a href="search.asp"><span>Search</span></a>
</div>
</div>
</body>

Cheers
Mark