I know that this is a common problem in the forums, but as a first-time site manager, I am having difficulty applying the responses to my own code. The page I'm working on is http://needlab.cumc.columbia.edu/links_testing.html (this may not show up until 12/05/12 when our server has had the chance to update).
Two problems to tackle: (1) The menu bar is not in the correct place. It should fall just below the lab name. (2) When I hover over "People," the first subitem option blocks "People." In other browsers, the subitems appear below their parent item.
Here's the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>NEED Lab</title>
<style type="text/css">
body,td,th {
font-family: Arial, Helvetica, sans-serif;
}
body {
background-color: #FFFFFF;
}
a:link {
text-decoration: none;
color: #FF6633;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:active {
text-decoration: none;
font-size: 10.5pt;
}
</style>
<style type="text/css">
#title {
position:absolute;
left:130px;
top:6px;
width:662px;
height:97px;
z-index:4;
font-size: 40px;
text-align: center;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
#pagetitle {
position:absolute;
left:333px;
top:237px;
width:99px;
height:41px;
z-index:10;
font-size: 24pt;
font-weight: bold;
font-family: Georgia, "Times New Roman", Times, serif;
}
#bottombar {
position:absolute;
left:0px;
top:715px;
width:100%;
height:25px;
z-index:11;
background-color: #333333;
font-size: 9.5pt;
color: #FFF;
padding-top: 8px;
padding-left: 7px;
}
#pageheader {
position:absolute;
left:12px;
top:11px;
width:650px;
height:126px;
z-index:15;
}
#background {
position:absolute;
left:10px;
top:194px;
width:771px;
height:520px;
z-index:1;
}
#spryholder {
position:absolute;
left:4px;
top:42px;
width:803px;
height:45px;
z-index:16;
}
</style>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#CUlogo {
position:absolute;
left:645px;
top:18px;
width:133px;
height:116px;
z-index:18;
}
#bodytext1 {
position:absolute;
left:68px;
top:292px;
width:340px;
height:354px;
z-index:19;
font-size: 10.5pt;
}
</style>
</head>
</div>
<div id="pagetitle">Links</div>
<div id="bottombar"><strong>© 2012 Neurocognition, Early Experience, and Development Lab | 212-305-9854 | Columbia University Medical Center</strong></div>
<div id="pageheader"><img src="Images/NEED header.jpg" width="620" height="116" /></div>
<div id="background"><img src="Images/775x500.gif" width="775" height="516" /></div>
<div id="spryholder">
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="index.html">Home</a> </li>
<li><a href="currentstudies.html">Research</a> </li>
<li><a href="publications.html">Publications</a> </li>
<li><a href="participants.html">For Parents</a></li>
<li><a href="jointhelab.html">Join the Lab</a></li>
<li><a href="#" class="MenuBarItemSubmenu">People</a>
<ul>
<li><a href="currentmembers.html">Current Members</a></li>
<li><a href="pastmembers.html">Past Members</a></li>
<li><a href="collaborators.html">Collaborators</a></li>
</ul>
</li>
<li><a href="links.html">Links</a></li>
</ul>
</div>
<div id="CUlogo"><img src="Images/CU logo.gif" width="120" height="110" /></div>
<div id="bodytext1">
<p><a href="http://www.columbia.edu/" target="_blank">Columbia University</a></p>
<p><a href="http://www.cumc.columbia.edu/dept/sergievsky/">GH Sergievsky Center</a></p>
<p><a href="http://irvinginstitute.columbia.edu/">Irving Institute for Clinical and Translational Research</a></p>
<p><a href="http://ies.ed.gov/">Institute of Education Sciences</a></p>
<p><a href="http://www.cumc.columbia.edu/dept/pediatrics/">Columbia University Department of Pediatrics</a></p>
<p><a href="http://childrensnyp.org/mschony/">Morgan Stanley Children's Hospital </a></p>
<p><a href="http://www.sacklerinstitute.org/cornell/">Sackler Institute for Developmental Psychobiology</a></p>
<p><a href="http://ccceh.hs.columbia.edu/index.html">Columbia Center for Children's Environmental Health</a></p>
<p><a href="http://www.mailman.columbia.edu/academic-departments/population-family -health/research-service/columbia-university-head-start">Columbia University Head Start</a></p>
</div>
<p> </p>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
