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:
http://www.seoconsultants.com/css/menus/tutorial/
 - Then I've used CSS to load images over text to give a better layout
using one of the methods described here:
http://www.stopdesign.com/articles/replace_text/

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:

Movies
   Action
   Comedy
   Sci-fi

- 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:

    <ul>
      <li><a href="movies.html"><span id="Movies"></span>Movies</a>
        <ul>
          <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>
        </ul>
      </li>
    </ul>

I'm really eager to see if you can help me. Thanks alot in advance! =)
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Previous Message
Next Message