Example:
<ul>
<li class="dir"><a href="#" >Link here</a>
<ul>
<li> <a href="#">This dropped down!</a> </li>
<li> <a href="#">Another Link</a> </li>
<li> <a href="#">Pretty Lightwieght and Dynamic?</a> </li>
</ul>
</li>
<li><a href="#" >Another here</a></li>
<li><a href="#" >One More here</a></li>
<li><a href="#" >Getting Kind of Repetative huh</a></li>
<li><a href="#" >Okay</a></li>
</ul>
----- image link download (http://www.zettersten.com/downloads/image-links.gif)
<style>
* { margin:0px; padding:0px; font-family:Arial, Helvetica, sans-serif;
font-size:11px; font-weight:bold; text-decoration:none; color:black;
list-style:none; }
ul { }
li { background:url(image-links.gif) left top; float:left; margin-right:1px; }
li a { background:url(image-links.gif) right -68px; display:block; padding:10px
14px; }
li:hover { background:url(image-links.gif) left -34px; }
li a:hover, li a:active { background:url(image-links.gif) right -102px; }
.dir ul { background:white; position:absolute; top:-9990px; }
.dir:hover ul { top:34px; }
.dir ul li { float:none; background:none; width:150px; }
.dir ul li:hover { background-color:#ccc }
.dir ul li a { background:none; }
.dir ul li a:hover { background:none; }
</style>
Question:
The sliding door techniques requires two "wrapping" elements to make it work.
In the example above I've used the "li" as the main wrapper and the "a" as the
inner wrapper (common in most cases).
When adding a drop down action by manipulating the child <ul>, how do I contain
the hover affect while my mouse cursor is hovering the child <li>?
I you've tried my example, then you'll notice that I do actually contain the
hover state for the parent "li" but no the parent "a". Logically I'd need
something in the child "ul" to call the hover on the parent "a".
If that's the case then I'm stuck and looking for a better solution to me
testing.
Thanks
______________________________________________________________________
css-discuss [[email protected]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
