Previous Message
Next Message

Issue with text-replacement in a pop-up menu

Sent by Erlend Badhwar Valen-Sendstad on 24 March 2006 11:11

OK. First some quick background info to put you into the task:

 - I've made a pop-up menu based on this tutorial:
 - Then I've used CSS to load images over text to give a better layout
using one of the methods described here:

Then the problem:

 - Everything works fine when I have a list with menu items, and each
menu item has got a pop-up with a sub-list. Every menu item and
sub-menu item are presented with text-images.
 - My problem is that I'd like the menu item to hover, also when the
mouse points over the sub-list. That doesn't seem to work for me.
Let's say I have a pop up looking like this:


- When 'Movies' is not hovered, the sub-list ( 'Action', 'Comedy',
'Sci-fi' ) will not be visible. When 'Movies' is hovered, the sub-list
will become visible and a separate image will be loaded, giving the
hovering-effect (shown with the CSS below). But when the mouse pointer
is moved over the sub-list, 'Movies' revert back to its normal state.
I'd like it to stay hovered as long as the mouse pointer is positioned
over the sub-list also. How can I acheive this? There must be
something I can add to the second CSS-class shown below...?

Some of the CSS-code:

#Movies {
background: url(../img/movies.gif) no-repeat;
position: absolute;
width: 100%;
height: 100%;

#Movies:hover {
background: url(../img/movies-hover.gif) no-repeat;
position: absolute;
width: 100%;
height: 100%;

The HTML-code:

      <li><a href="movies.html"><span id="Movies"></span>Movies</a>
          <li><a href="action.html"><span id="Action"></span>Action</a></li>
          <li><a href="comedy.html"><span id="Comedy"></span>Comedy</a></li>
          <li><a href="sci-fi.html"><span id="Sci-fi"></span>Sci-fi</a></li>

I'm really eager to see if you can help me. Thanks alot in advance! =)
css-discuss [EMAIL-REMOVED]]
IE7b2 testing hub --
List wiki/FAQ --
Supported by --
Previous Message
Next Message