calmchess Posted April 9, 2010 Share Posted April 9, 2010 I'm using son of a sucker fish drop down menu......my menu works fine in IE but it doesn't work correctly in firefox.....in order to activate the link on the top most container you have to hover over the bottom 2-3 px the dropdown container works perfectly......if you want to visit the test page goto http://www.privatechatnow.com/homepages/suckerfishtest.html ........i've also included the code.....please help make it work in firefox <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/5559/xhtml" xml:lang="en" lang="en"> <html> <head> <style type="text/css"> <!-- div a:link{color:white;} div a:visited {color: white;} #nav, #nav ul { padding: 0;margin: 0;list-style:none;}a{text-decoration:none;} #nav a {display: block;width: 155px;}#nav li {float: left;width: 155px; position:relative;}#nav li ul {position: absolute;width: 155px;left: -999em;} #nav li:hover ul {left: auto;}#nav li:hover ul, #nav li.sfhover ul{left: auto;} .Nav1L1{float:left;position:relative;top:24px; color:white;height:20px;width:153px; text-align:center;background-color:black;border:1px solid white;} div.Nav1L1:hover{background-color:grey;} #navbak{ height:25px; width:100%; background-color:black;} #wrapper{width:743px;margin-left:auto;margin-right:auto;} .Nav1{float:left; padding:4px; height:20px; width:147px; color:white; text-align:center;} div.Nav1:hover{background-color:grey;} --> </style> <script type="text/javascript" > sfHover = function() { var sfEls = document.getElementById("nav").getElementsByTagName("LI"); for (var i=0; i<sfEls.length; i++) { sfEls[i].onmouseover=function() { this.className+="sfhover"; } sfEls[i].onmouseout=function() { this.className=this.className.replace(new RegExp("sfhover\\b"), ""); } } } if (window.attachEvent) window.attachEvent("onload", sfHover); </script> </head> <body> <div id="navbak"> <div id="wrapper"> <ul id="nav"> <li><div class ="Nav1"><a href="http://www.privatechatnow.com/homepages/suckerfishtest.html"> link1 </a></div> <ul> <li><div class="Nav1L1"><a href="http://www.privatechatnow.com/currentwebsite/hompages/suckerfishtest.html"> link2 </a></div> </li> </ul> </li> </ul> </div> </div> </body> </html> Quote Link to comment Share on other sites More sharing options...
calmchess Posted April 9, 2010 Author Share Posted April 9, 2010 I've found that if i remove my hover statements then the links work perfectly however i need my hover statments to change the background of the div. hope this helps. Quote Link to comment Share on other sites More sharing options...
haku Posted April 11, 2010 Share Posted April 11, 2010 Dead link. Quote Link to comment Share on other sites More sharing options...
calmchess Posted April 11, 2010 Author Share Posted April 11, 2010 sorry about the dead link i was booted to my linux partition for awhile.......i fixed it anyway.........i just had to remove the float:left; from the divs it didn't work well with the suckerfish. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.