Forum Moderators: not2easy
I hope somebody can point out a workaround to this, or a way of circumventing a known bug. The following code validates xhtml 1.0 transitional and the css returns no errors or warnings at w3.org.
It is a fairly stripped-down version of a single-level css-only popup; the problem occurs when I add :hover to the links - then the popups cease to pop up in Opera 7.5. The code works in IE6 (with the aid of a htc file and a 'behavior'), Mozilla 1.7 and Firefox .9.
I know there must be something awry somewhere, because I the code examples (the 'suckerfish' dropdowns and Peter Nederlof's 'whatever:hover' menus) that this is based on work in Opera. Can anyone point out the bug/flaw? (Sorry, even stripped-down, the css is a bit long-ish)
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Opera 7.5 CSS Popup Bug Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><style type="text/css">
* {
font-size:11px;
font-family:verdana,sans-serif;
}#menu-container {
width:100%;
height:18px;
background:#CCCCCC;
border:1px solid #333333;
padding:2px;
}#menu-container ul {
list-style-type:none;
padding:0;
margin:0;
}#menu-container ul {
}
#menu-container ul li {
display:block;
width:150px;
float:left;
position:relative;
}#menu-container ul li ul {
width:150px;
border:1px solid #333333;
display: none;
position: absolute;
top:10px;
left:0;
}#menu-container ul li > ul {
top:auto;
left:auto;
}#menu-container ul li:hover ul {
display:block;
background:#CCCCCC;
padding:1px;
}#menu-container ul li ul li a {
border-style:none;
}#menu-container ul li ul li {
display:block;
}#menu-container ul li a {
height:18px;
display:block;
text-decoration:none;
font-weight:bold;
text-align:center;
color:#000000;
border-right:2px solid #333333;
}/* Comment out the following styles to make the menus work in Opera! */
#menu-container ul li a:hover {
background:#EFEFEF;
}
</style>
</head><body>
<div id="menu-container">
<ul>
<li><a href="#">Item 1</a>
<ul>
<li><a href="#">Submenu item 1</a></li>
<li><a href="#">Submenu item 2</a></li>
<li><a href="#">Submenu item 3</a></li>
</ul>
</li>
<li><a href="#">Item 2</a></li>
</ul>
</div>
</body>
</html>
I knew about the obscured bit, but does it work both with and without the :hover on the links?
-B
Can I ask you then, did you install Opera 7.5 fresh or update an earlier build?
-B
[edit]Hmmm again. Very interesting. A clean install of Opera 7.5 and the popups now appear, but the problem with the bottom half of the last menu item gets worse... Eh, well the major problem is solved anyhow. Thanks for having a look at it.[/edit]
