hello
i have managed to get a working menu where i want it and have managed to have a fixed header and footer. however, i have a problem when the main page scrolls the dropdown menu seems to scroll with it. instead of the dropdown being below the heading where it normally is, if i scroll the page the header and footer stay where they are but if i click the menu heading again, the dropdown is halfway down the page. i have attached css and the correct and incorrect screenshots to give you an idea if my outline is fuzzy. i would be grateful if someone could tell me where i am going wrong? i am only learning css and would be grateful for any advice. many thanks
CSS CODE
body
{
margin: 0px;
padding: 0px;
font-family: Arial;
}
/* Don't touch */
ul#jmenu
{
margin: 0px;
padding: 0px;
list-style: none;
}
ul#jmenu li
{
float: left;
margin: 0px;
padding: 0px;
//width: 1px; /* ie */
//vertical-align: bottom; /* ie */
}
ul#jmenu li a
{
display: block;
white-space: nowrap;
}
ul#jmenu li ul
{
display: none;
position: absolute;
margin: 0px;
padding: 0px;
list-style: none;
zoom: 1; /* ie */
}
ul#jmenu li ul li
{
float: none;
}
/* Styling starts here */
ul#jmenu
{
margin-top:80px;
width: 100%;
height: 40px;
background: #3f4a58 url('../images/menu-bg.gif') repeat-x left top;
}
ul#jmenu li
{
background: url('../images/separator.gif') no-repeat right center;
padding: 0px 10px;
}
ul#jmenu li a:link, ul#jmenu li a:visited
{
padding: 0px 10px;
height: 40px;
line-height: 40px;
color: #e4ecf6;
font-size: 13px;
text-decoration: none;
background: none;
}
ul#jmenu li a:hover
{
color: #ffffff;
background: #3f4a58 url('../images/menu-bg.gif') repeat-x left bottom;
margin-top:0px;
}
ul#jmenu ul
{
background-color: #3f4a58;
border-left: 1px solid #7a8087;
}
ul#jmenu li ul li
{
padding: 0px;
background: url('../images/sub-separator.gif') repeat-x left bottom;
}
ul#jmenu li ul li a:link, ul#jmenu li ul li a:visited
{
;
min-width: 100px;
//width: 100px; /* ie */
font-size: 12px;
height: 30px;
line-height: 30px;
}
ul#jmenu li ul li a:hover
{
background: #3f4a58 url('../images/menu-bg.gif') repeat-x left top;
}
#header {
position:fixed;
width:100%;
left:0px;
top:0px;
height: 80px;
background: #808080 url(../../images/logo.jpg) no-repeat left center;
}
#logo {
/*background-image:url(../../images/logo.jpg) no-repeat left;*/
}
#footer {
position:fixed;
left:0px;
bottom:0px;
height:30px;
width:100%;
background:#808080;
border-top:1px solid #333333;
}
.footertext {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFFFFF;
margin:10px;
display:block;
}
/* IE 6 */
* html #footer {
position:absolute;
top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
}
#main{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
height:100%;
margin-top:25px;
}
#main p {
margin-left:20px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}
HTML CODE
<div id="header">
<ul id="jmenu">
<li><a href="#">Home</a></li>
<li>
<a href="#">Requests</a>
<ul>
<li><a href="#">Item 2-1</a></li>
<li><a href="#">Item 2-2</a></li>
<li>
<a href="#">Item 2-3</a>
<ul>
<li><a href="#">Item 2-3-1</a></li>
<li>
<a href="#">Item 2-3-2</a>
<ul>
<li><a href="#">Item 2-3-2-1</a></li>
</ul>
</li>
<li><a href="#">Item 2-3-3</a></li>
</ul>
</li>
<li>
<a href="#">Item 2-4</a>
<ul>
<li><a href="#">Item 2-4-1</a></li>
<li><a href="#">Item 2-4-2</a></li>
<li><a href="#">Item 2-4-3</a></li>
</ul>
</li>
<li><a href="#">Item 2-5</a></li>
</ul>
</li>
<li><a href="#">Reports</a></li>
<li>
<a href="#">Control Panel</a>
<ul>
<li><a href="#">Item 4-1</a></li>
<li><a href="#">Item 4-2</a></li>
<li><a href="#">Item 4-3</a></li>
</ul>
</li>
<li>
<?php
echo $tNGs->getErrorMsg();
?><a href="<?php echo $logoutTransaction->getLogoutLink(); ?>">Logout</a></li>
</ul>
</div></div>