Forum Moderators: not2easy
My problem is that hovering over my navigation expands the submenus, but only for a second disallowing any hovering or clicking on a submenu option.
<snip>
I've narrowed down the problem to overflow. The working navigation in the url above does not have an overflow:auto line and works.
The following url has the overflow line and does not work: <snip>
This only occurs in Firefox mac and pc.
IE6, Mac IE5.2, and Safari the navigation does not conflict with overflow. Works fine in these.
Any ideas on how to solve this? Or a work around
[edited by: SuzyUK at 6:42 pm (utc) on Oct. 13, 2004]
[edit reason] sorry no URLs : see TOS #13 [webmasterworld.com] [/edit]
I had a look at the page before the URLS were removed ..
for info here's a stripped down code version which demonstrates the phenomena!
(btw.. there is some code missing from the top of that page.. DTD, <html>, <title> etc.. probably just an include error but it doesn't affect the outcome anyhow..)
Code sample:
<!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>
<title>Untitled</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css" media="screen">
body {
behavior:url(csshover.htc);
}#content {
position:absolute;
width: 600px;
height: 150px;
border: 1px solid #000;
background: #fcc;
left: 0px;
top: 0px;
overflow:auto;
}#navcontainer {
position:absolute;
left:1px;
top: 151px;
height: 15px;
color:#000;
font-size:10px;
font-family:sans-serif;
text-transform:uppercase;
width: 600px;
}div#navcontainer ul {
background-color:#fff;
margin:0;
padding:0;
list-style:none;
}div#navcontainer li {
background-color:#fff;
position: relative;
float:left;
margin-left:-1px;
width: 100px;
height: 15px;
border:1px solid #000;
}div#navcontainer li:hover { background: #ccc;}
div#navcontainer li a {
display:block;
text-decoration:none;
text-align:center;
height: 15px;
}div#navcontainer ul ul {
position:absolute;
width: 100px;
bottom: 16px;
display:none;
}div#navcontainer ul ul li {
margin-bottom: -1px;
height:15px;
}div#navcontainer ul.level1 li.submenu:hover ul.level2,
div#navcontainer ul.level1 li.submenu ul.level2 li:hover ul.level2
{display:block;}</style>
</head>
<body>
<div id="content">
<h1>Heading</h1>
<p>footext</p>
</div><div id="navcontainer">
<ul class="level1">
<li class="submenu"><a href="#">link</a></li>
<li class="submenu"><a href="#">link</a></li>
<li class="submenu"><a href="#">link</a></li>
<li class="submenu"><a href="/">drop menu</a>
<ul class="level2">
<li><a href="#">link1</a></li>
<li><a href="#">link2</a></li>
<li><a href="#">link3</a></li>
<li><a href="#">link4</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
Suzy
I did wonder if it was something similar to why FF won't (mouse) scroll a div with overflow on it?
But good news is it can be worked around, moving the navcontainer up (1px should do it) to overlap the scrolled div seems to make it work.. so it must be something to do with the border. (note there sometimes is still a small flicker but only on very quick movements)
This makes it less than pixel perfect (the nav is overlapping the scroll by 1px;} but you could remove the bottom border from the content div and put a top border on the navcontainer instead.. it's barely noticeable then
HTH
Suzy
Getting that nav to work through as many browsers as possible was a PITA. Webstats showed that 60% of the hits come from IE6, 10% mac ie5, 20% gecko browsers, and 10% everything else. Eventually and to some degree still now, mac IE5 has been the least forgivable.
Anyways, since the above nav, I went through 3 more versions before giving up, doing a google and discovering UDM...which is essentially a more in-depth version of what I had already made, but in-depth enough that it works on everything I've tested it on.
