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 PROTECTED]
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/
