[CSS21] problem with :hover pseudo-class when crossing layer borders

Hi

Assume that something like the following should end up on the screen:

_________________________________1
| ________________________________2
| |__|menu |________________________|
| |  |entry 1|                                          |
| |  |entry 2|                                          |
| |                                                        |
| |                       3                               |
| |                                                        |
| ---------------------------------------------------------|
|_________________________________|

Ah well, it may display horribly though...

Maybe the following code clarifies things a bit:

<body>
   <div id="container">
      <div id="header">
         <ul>
            <li class="menu_with_submenus">
               <a href="projects/" title="Projects overview">Projects</a>
               <ul>
                  <li><a href="projects/foo/" title="foo overview">foo</a></li>
                  <li><a href="projects/bar/" title="bar overview">bar</a></li>
               </ul>
             </li>
          </ul>
      </div>
      <div id="main">
          some content
      </div>
</body>

Applying the following css to it:

body #container {
	position: fixed;
	overflow: hidden;
	top:    0;
	bottom: 0;
	height: auto;
	left:   0;
	right:  0;
	width:  auto;
	z-index: 1;
}

body #container #header {
	position: absolute;
	top:    0;
	bottom: 85%;
	left:   0;
	right:  0;
	z-index: 3;
	background: transparent;
}

body #container #header ul li.menu_with_submenus ul {
	/* second level list of an entry */
	display: none;
	width: 100%;
	position: absolute;
	left: -1px;
	border-color: black;
	background-color: #cccccc;
}

body #container #header ul li.menu_with_submenus:hover ul {
	/* hovering over a top menu entry which has a sub menu */
	display: block;
}

body #container #header ul li.menu_with_submenus ul:hover {
	/* hovering over the sub menu box */
	display: block;
}

body #container #main {
	position: absolute;
	overflow: none;
	top:    15%;
	bottom: 0;
	left:   0;
	right:  0;
	z-index: 2;
	background: transparent;
}

[ 1 corresponds to #container, 2 to #header and 3 to #main ]

The goal therefore is to create a page with a header (the menu bar)
which is fixed. Below this header goes the main content. The thing is
to have the scrollbar not on the right of the whole page content, but
only to the right of the box with id #main. This should guarantee a
fixed width of the header, which otherwise would vary, depending on
the lenght of the content (i.e. if a scrollbar is drawn or not).

The problem now is that the menu (or more specifically, the second
level ul, which is being rendered as display: block), when rendered
during hovering over the top level li, overlaps the #header as well as
the #main block. When staying on the top level entry, all is well. But
as soon as one moves the pointer below the border of the #header (but
NOT yet below the lower boundary of the ul rendered as menu box), the
menu disappears.

I discovered an ugly hack which made it work at least on Firefox by
adding a div around the inner li's, and using this div with the css
entry above used by ul. The menu keeps popped up (although it shortly
disappears when crossing the box boundaries of #header and #main, but
then reappears again when having crossed that boundary). But this is
not at all xhtml conform, nor does it seem to work too well.

I'd liked to ask if this is a problem of current css implementations,
or if the spec does not consider such dynamic pop ups across box
boundaries, or is there some other way to achieve this.

I hope you can give me some insight on this.

-- 
Kind regards,
Andi

Received on Saturday, 5 March 2005 04:55:34 UTC