Having a similar sort of problem trying to apply this to my image rollover drop down navigation...
I changed rdoyle720's script so that it had my images sitting well in it...
Code:
<style type="text/css">
UL {list-style: none; margin: 0; padding: 0}
LI {position: relative; display: block; float: left; padding: 0px;}
LI UL {position: absolute; top: 1.5em; left: 0; width: 220px;}
</style>
however when I placed...
Code:
<ul>
<li><a href="index.html"><img src="images/linkportfolio.jpg" alt="" oversrc="images/linkportfolioover.jpg"/></a>
<ul>
<li><a href="index.html"><img src="images/linkimage.jpg" oversrc="images/linkimageover.jpg" /></a></li><li><a href="index.html"><img src="images/linkillustration.jpg" oversrc="images/linkillustrationover.jpg" /></a></li><li><a href="index.html"><img src="images/linkweb.jpg" oversrc="images/linkwebover.jpg" /></a></li>
</ul>
</li>
</ul>
in place of where i used to just have...
Code:
<a href="index.html"><img src="images/linkportfolio.jpg" alt="" oversrc="images/linkportfolioover.jpg"/>
it is moving the whole list to a new line in my div.
This is what it looks like when placed in the div below my navigation.
QUESTIONS:
1. How do I make the 2nd tier images appear on rollover, rather than just being always visible?
2. How can I make the "linkportfolioover.jpg" image stay when the mouse is over the drop downs?
2. How can I make the drop downs 'float', appearing under the same relative position as the proper placed instace of "linkportfolio.jpg" rather than moving it all onto a new line?
Any help would be really truly appreciated.