Return Focus After Scroll

[icabod]

I'm using CSS to hide/show an unordered list of image links. Basically I've got an unordered list of links, and am displaying an unordered list when one of the links is active or hovered. Firefox wont recognize the link in the list as hovered, so I've got to check for hover on the list element as well, and that's a problem; but my main problem is that when the scroll bar is used to move down the list the anchor above looses focus, and if the user moves the cursor out of the list area, it hides again. I need a solution to return focus to the anchor. Here's the basic setup, the html is alot, but perhaps it'll help answer my problem. CSS.menu ul li a ul {display: none;}.menu ul li a:hover ul, .menu ul li a:focus ul, .menu ul li:hover ul { display:block;}HTML <div class="menu2"><ul><li><a href="#nogo">Exteriors<table><tr><td><ul><li><a class="horiz" href="#portrait1"><span><img src="./img/ext/1_tn.jpg" alt="" title="" /></span><em><img src="./img/ext/1.jpg" alt="" title="" /></em></a><a class="horiz" href="#portrait2"><span><img src="./img/ext/2_tn.jpg" alt="" title="" /></span><em><img src="./img/ext/2.jpg" alt="" title="" /></em></a><a class="horiz" href="#portrait3"><span><img src="./img/ext/3_tn.jpg" alt="" title="" /></span><em><img src="./img/ext/3.jpg" alt="" title="" /></em></a><a class="horiz" href="#portrait4"><span><img src="./img/ext/4_tn.jpg" alt="" title="" /></span><em><img src="./img/ext/4.jpg" alt="" title="" /></em></a><span class="clr"></span><a class="horiz" href="#portrait5"><span><img src="./img/ext/5_tn.jpg" alt="" title="" /></span><em><img src="./img/ext/5.jpg" alt="" title="" /></em></a><a class="horiz" href="#portrait6"><span><img src="./img/ext/6_tn.jpg" alt="" title="" /></span><em><img src="./img/ext/6.jpg" alt="" title="" /></em></a><a class="horiz" href="#portrait7"><span><img src="./img/ext/7_tn.jpg" alt="" title="" /></span><em><img src="./img/ext/7.jpg" alt="" title="" /></em></a><a class="horiz" href="#portrait8"><span><img src="./img/ext/8_tn.jpg" alt="" title="" /></span><em><img src="./img/ext/8.jpg" alt="" title="" /></em></a><span class="clr"></span></li></ul></td></tr></table><![if IE 7]></a><![endif]><!--[if lte IE 6]></a><![endif]--></li><li><a href="#nogo">Interiors<table><tr><td> <ul> <li><a class="vert" href="#portrait1"><span><img src="./img/int/1_tn.jpg" alt="" title="" /></span><em><img src="./img/int/1.jpg" alt="" title="" /></em></a><a class="vert" href="#portrait2"><span><img src="./img/int/2_tn.jpg" alt="" title="" /></span><em><img src="./img/int/2.jpg" alt="" title="" /></em></a><a class="horiz" href="#portrait3"><span><img src="./img/int/3_tn.jpg" alt="" title="" /></span><em><img src="./img/int/3.jpg" alt="" title="" /></em></a><a class="horiz" href="#portrait4"><span><img src="./img/int/4_tn.jpg" alt="" title="" /></span><em><img src="./img/int/4.jpg" alt="" title="" /></em></a><span class="clr"></span><a class="vert" href="#portrait5"><span><img src="./img/int/5_tn.jpg" alt="" title="" /></span><em><img src="./img/int/5.jpg" alt="" title="" /></em></a><a class="horiz" href="#portrait6"><span><img src="./img/int/6_tn.jpg" alt="" title="" /></span><em><img src="./img/int/6.jpg" alt="" title="" /></em></a><a class="vert" href="#portrait7"><span><img src="./img/int/7_tn.jpg" alt="" title="" /></span><em><img src="./img/int/7.jpg" alt="" title="" /></em></a><a class="horiz" href="#portrait8"><span><img src="./img/int/8_tn.jpg" alt="" title="" /></span><em><img src="./img/int/8.jpg" alt="" title="" /></em></a><span class="clr"></span><a class="vert" href="#portrait9"><span><img src="./img/int/9_tn.jpg" alt="" title="" /></span><em><img src="./img/int/9.jpg" alt="" title="" /></em></a><a class="vert" href="#portrait10"><span><img src="./img/int/10_tn.jpg" alt="" title="" /></span><em><img src="./img/int/10.jpg" alt="" title="" /></em></a><a class="horiz" href="#portrait11"><span><img src="./img/int/11_tn.jpg" alt="" title="" /></span><em><img src="./img/int/11.jpg" alt="" title="" /></em></a><a class="vert" href="#portrait12"><span><img src="./img/int/12_tn.jpg" alt="" title="" /></span><em><img src="./img/int/12.jpg" alt="" title="" /></em></a><span class="clr"></span><a class="vert" href="#portrait13"><span><img src="./img/int/13_tn.jpg" alt="" title="" /></span><em><img src="./img/int/13.jpg" alt="" title="" /></em></a><a class="vert" href="#portrait14"><span><img src="./img/int/14_tn.jpg" alt="" title="" /></span><em><img src="./img/int/14.jpg" alt="" title="" /></em></a><a class="vert" href="#portrait15"><span><img src="./img/int/15_tn.jpg" alt="" title="" /></span><em><img src="./img/int/15.jpg" alt="" title="" /></em></a><a class="vert" href="#portrait16"><span><img src="./img/int/16_tn.jpg" alt="" title="" /></span><em><img src="./img/int/16.jpg" alt="" title="" /></em></a><span class="clr"></span><a class="vert" href="#portrait17"><span><img src="./img/int/17_tn.jpg" alt="" title="" /></span><em><img src="./img/int/17.jpg" alt="" title="" /></em></a> </li> </ul></td></tr></table><![if IE 7]></a><![endif]><!--[if lte IE 6]></a><![endif]--></li><li><a href="#nogo">Details<table><tr><td> <ul> <li><a class="vert" href="#portrait1"><span><img src="./img/det/1_tn.jpg" alt="" title="" /></span><em><img src="./img/det/1.jpg" alt="" title="" /></em></a><a class="horiz" href="#portrait2"><span><img src="./img/det/2_tn.jpg" alt="" title="" /></span><em><img src="./img/det/2.jpg" alt="" title="" /></em></a><a class="vert" href="#portrait3"><span><img src="./img/det/3_tn.jpg" alt="" title="" /></span><em><img src="./img/det/3.jpg" alt="" title="" /></em></a><a class="horiz" href="#portrait4"><span><img src="./img/det/4_tn.jpg" alt="" title="" /></span><em><img src="./img/det/4.jpg" alt="" title="" /></em></a><span class="clr"></span><a class="horiz" href="#portrait5"><span><img src="./img/det/5_tn.jpg" alt="" title="" /></span><em><img src="./img/det/5.jpg" alt="" title="" /></em></a><a class="horiz" href="#portrait6"><span><img src="./img/det/6_tn.jpg" alt="" title="" /></span><em><img src="./img/det/6.jpg" alt="" title="" /></em></a><a class="vert" href="#portrait7"><span><img src="./img/det/7_tn.jpg" alt="" title="" /></span><em><img src="./img/det/7.jpg" alt="" title="" /></em></a><a class="horiz" href="#portrait8"><span><img src="./img/det/8_tn.jpg" alt="" title="" /></span><em><img src="./img/det/8.jpg" alt="" title="" /></em></a><span class="clr"></span><a class="horiz" href="#portrait9"><span><img src="./img/det/9_tn.jpg" alt="" title="" /></span><em><img src="./img/det/9.jpg" alt="" title="" /></em></a><a class="horiz" href="#portrait10"><span><img src="./img/det/10_tn.jpg" alt="" title="" /></span><em><img src="./img/det/10.jpg" alt="" title="" /></em></a><a class="vert" href="#portrait11"><span><img src="./img/det/11_tn.jpg" alt="" title="" /></span><em><img src="./img/det/11.jpg" alt="" title="" /></em></a><a class="horiz" href="#portrait12"><span><img src="./img/det/12_tn.jpg" alt="" title="" /></span><em><img src="./img/det/12.jpg" alt="" title="" /></em></a><span class="clr"></span><a class="vert" href="#portrait13"><span><img src="./img/det/13_tn.jpg" alt="" title="" /></span><em><img src="./img/det/13.jpg" alt="" title="" /></em></a><a class="vert" href="#portrait14"><span><img src="./img/det/14_tn.jpg" alt="" title="" /></span><em><img src="./img/det/14.jpg" alt="" title="" /></em></a><a class="vert" href="#portrait15"><span><img src="./img/det/15_tn.jpg" alt="" title="" /></span><em><img src="./img/det/15.jpg" alt="" title="" /></em></a><a class="horiz" href="#portrait16"><span><img src="./img/det/16_tn.jpg" alt="" title="" /></span><em><img src="./img/det/16.jpg" alt="" title="" /></em></a><span class="clr"></span><a class="horiz" href="#portrait17"><span><img src="./img/det/17_tn.jpg" alt="" title="" /></span><em><img src="./img/det/17.jpg" alt="" title="" /></em></a><a class="vert" href="#portrait18"><span><img src="./img/det/18_tn.jpg" alt="" title="" /></span><em><img src="./img/det/18.jpg" alt="" title="" /></em></a><a class="horiz" href="#portrait19"><span><img src="./img/det/19_tn.jpg" alt="" title="" /></span><em><img src="./img/det/19.jpg" alt="" title="" /></em></a><a class="vert" href="#portrait20"><span><img src="./img/det/20_tn.jpg" alt="" title="" /></span><em><img src="./img/det/20.jpg" alt="" title="" /></em></a><span class="clr"></span> </li> </ul></td></tr></table><![if IE 7]></a><![endif]><!--[if lte IE 6]></a><![endif]--></li></ul></div>

[chibineku]

It seems weird that you have nested a third of the images in span tags and another third in emphasis tags. Does <em> do anything to a picture? You should probably remove the if statements around the closing anchor tags...all tags should be closed. I wouldn't be surprised if that helps somewhat in FF and other browsers.

[icabod]

It seems weird that you have nested a third of the images in span tags and another third in emphasis tags. Does <em> do anything to a picture? You should probably remove the if statements around the closing anchor tags...all tags should be closed. I wouldn't be surprised if that helps somewhat in FF and other browsers.

The emphasis tag is really a placeholder for the css further in the document. Basically, the list contains thumbnails, and when clicked the active/focus tags use the emphasis tags to display. I think that I just got too fancy on this one. I was really pleased with the result, but it's bothersome to my users, so I'm going to redesign. I hate that, but it has to be done sometimes.