Drop Down Menu with Sucker Fish

Question

cakka 0 Junior Poster in Training

15 Years Ago

Hi, i am being creating a drop down menu. But i getting trouble in that.
The sub menu that must be displayed when the link is hover is displayed although the link is not hover.

This is the script that i create , please help me for correcting the wrong script.
Thanks

The html scripts

<ul id="menu">
        	<li class="noDivider"><a href="home.html" title="Home">Home</a></li>
        	<li><a href="contact_information/about-us.html" rel="nofollow" title="About Us">About Us</a></li>
        	<li><a href="products/products.html" rel="nofollow, noindex" title="Products">Products</a></li>
        	<li>
            <a href="/transformers" rel="nofollow, noindex" title="Catalog">Catalog</a>
           	<ul class="catalogNav">
            	<li><a href="transformers" rel="nofollow" title="Transformers">Transformers</a></li>
            	<li><a href="products/switch-panel.html" rel="nofollow" title="Switchgear">Switchgear</a></li>
            	<li><a href="products/switch-panel.html#panels" rel="nofollow" title="Circuit Breakers">Circuit Breakers</a></li>
            	<li><a href="products/qualty-con-un.html#power" rel="nofollow" title="UPS Systems">UPS Systems</a></li>
            	<li><a href="products/switch-panel.html#panels" rel="nofollow" title="Panelboards">Panelboards</a></li>
            	<li><a href=/power-line-conditioners" rel="nofollow" title="Power Line Conditioners">Power Line Conditioners</a></li>
            	<li><a href="products/qualty-con-un.html" rel="nofollow" title="Constant Voltage Power Conditioners">Constant Voltage Power Conditioners</a></li>
            	<li><a href="products/rect-phase.html#converters" rel="nofollow" title="Phase Converters">Phase Converters</a></li>
            	<li><a href="products/qualty-con-un.html#quality" rel="nofollow" title="Power Quality Equipment">Power Quality Equipment</a></li>
            	<li><a href="/transient-voltage-surge-suppressors" rel="nofollow" title="TVSS">TVSS</a></li>
            	<li><a href="/all-categories" rel="nofollow" title="Generators">Generators</a></li>
            	<li><a href="products/motors.html" rel="nofollow" title="Motors &amp; Motor Control">Motors &amp; Motor Control</a></li>
            	<li><a href="products/rect-phase.html" rel="nofollow" title="Rectifiers">Rectifiers</a></li>
            	<li><a href="products/switch-panel.html" rel="nofollow" title="Fuses">Fuses</a></li>
          </ul>
          </li>
        	<li><a href="contact_information/contact.html" rel="nofollow" title="Contact Us">Contact Us</a></li>
        </ul>

The Javascript

sfHover = function() {
	var sfEls = document.getElementById("menu").getElementsByTagName("li");
	for (var i=0; i<sfEls.length; i++) {
		sfEls[i].onmouseover=function() {
			this.className+="catalogNav";
		}
		sfEls[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" catalogNav\\b"), "");
		}
	}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

The CSS that i have created

#wrapper div#header ul li ul.catalogNav{
	width:214px;
	padding:6px 0 0;
	position:absolute;
	left:0px;
	top:20px;
	float:none;
	}
#wrapper div#header ul li ul.catalogNav li {

}


#wrapper div#header ul li ul.catalogNav li a{
    background: url(../images/black_arrow.gif) no-repeat 2px 8px #fff;;
    color:#3B3B3B;
    font:11px/21px Arial, Helvetica, sans-serif;
    display:block;
    padding:0 0 0 13px;
    height:21px;
    width: 214px;
}


#wrapper div#header ul li ul.catalogNav li a:hover{
    background-color:#FFFCE5;
    color:#990000;
}

javascript

2 Contributors
1 Reply
90 Views
17 Hours Discussion Span
Latest Post 15 Years Ago Latest Post by essential

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

essential 84 Posting Shark Featured Poster · Answer 1 · 2008-09-27T01:20:51+00:00

Sorry to keep you waiting! Here's your code and ive fixed some of the lines in your script.

<html>
<head>
<title><!--Sample--></title>

<style type="text/css">
<!--
/* Part of the testing that's why i have to simplify things.
Just dont forget to replace this one with ur default attribution */

li.blue a { color: blue; }
li.yellow { background-color: yellow; }

-->
</style>

<script type="text/javascript">
<!--

function sfHover() 
{ 
for ( var x = 0; x <= document.getElementsByTagName('ul').length; x++ ) { 

var sfEls = document.getElementsByTagName('ul')[x].getElementsByTagName('li'); 
 
for ( var i = 0; i <= sfEls.length; i++ ) { 
sfEls[i].onmouseover = function() { this.className += " yellow"; };



sfEls[i].onmouseout = function() { this.className = this.className.replace(/yellow/g, ''); 
   } 
  } 
 } 
}

if ( window.addEventListener ) 
window.addEventListener("load", sfHover, false ); 


else if ( window.attachEvent ) 
window.attachEvent ("onload", sfHover); 

else if ( document.getElementById ) 
window.onload = sfHover; 

//-->
</script>

</head>
<body>

<ul id="menu">  
<li class="blue"><a href="home.html" title="Home">Home</a></li>  

<li><a href="contact_information/about-us.html" rel="nofollow" title="About Us">About Us</a></li>  

<li><a href="products/products.html" rel="nofollow, noindex" title="Products">Products</a></li>   

<li><a href="/transformers" rel="nofollow, noindex" title="Catalog">Catalog</a></li> <!--Here's where you got those headache! Just try to observe this line of your code. Something is missing but all things got fixed now! -->  

<ul class="catalogNav">   

<li><a href="transformers" rel="nofollow" title="Transformers">Transformers</a></li>   

<li><a href="products/switch-panel.html" rel="nofollow" title="Switchgear">Switchgear</a></li>   

<li><a href="products/switch-panel.html#panels" rel="nofollow" title="Circuit Breakers">Circuit Breakers</a></li>   

<li><a href="products/qualty-con-un.html#power" rel="nofollow" title="UPS Systems">UPS Systems</a></li>   

<li><a href="products/switch-panel.html#panels" rel="nofollow" title="Panelboards">Panelboards</a></li>   

<li><a href=/power-line-conditioners" rel="nofollow" title="Power Line Conditioners">Power Line Conditioners</a></li>   

<li><a href="products/qualty-con-un.html" rel="nofollow" title="Constant Voltage Power Conditioners">Constant Voltage Power Conditioners</a></li>   

<li><a href="products/rect-phase.html#converters" rel="nofollow" title="Phase Converters">Phase Converters</a></li>   

<li><a href="products/qualty-con-un.html#quality" rel="nofollow" title="Power Quality Equipment">Power Quality Equipment</a></li>   

<li><a href="/transient-voltage-surge-suppressors" rel="nofollow" title="TVSS">TVSS</a></li>   

<li><a href="/all-categories" rel="nofollow" title="Generators">Generators</a></li>    

<li><a href="products/motors.html" rel="nofollow" title="Motors &amp; Motor Control">Motors &amp; Motor Control</a></li> 
  
<li><a href="products/rect-phase.html" rel="nofollow" title="Rectifiers">Rectifiers</a></li>
<li><a href="products/switch-panel.html" rel="nofollow" title="Fuses">Fuses</a></li>   </ul></li>  
<li><a href="contact_information/contact.html" rel="nofollow" title="Contact Us">Contact Us</a></li>  
</ul>



</body>
</html>