I'm having a problem with a fixed position element getting in the way of my dropdown menus in Firefox. O.K. as an example lets add
<style type="text/css" media="all">
h1#jts {
position:fixed;
top:120px;
left:5em;
}
</style>
</head>
<body>
to JTs dinner_menu.html as well as:
<div id='body'>
<h1 id='jts'>
JT's at Night
</h1>
<div id='content'>
In menu_system.css add a z-index of 2 to the first rule as such:
div#nav {
position: fixed;
right: 0;
left: 0;
top: 0.8em;
z-index: 2;
}
This works fine in IE with the ie7 patch, but in Firefox when I move the mouse down the menu, as soon as my mouse moves over the fixed element below the menu disappears.
Any ideas about why this happens and any fixes would be greatly appreciated . I want a nav menu fixed to the top of the screen, as well as a fixed position company name under it.
Thanks in advance
fixed positioning
