Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    Regular Coder
    Join Date
    Oct 2009
    Posts
    189
    Thanks
    38
    Thanked 3 Times in 3 Posts

    dropdown menu causes other elements to drop

    Hey all,

    I have a dropdown menu. When I hover over and the menu drops, all elements in the DOM below it drop as well. I know one solution is to use absolute positioning but I don't know how to make it conducive to this code:
    Code:
    	#navLinks {
    		float: right;
    	}
    	
    	#navLinks div {
    		width: 123px;
    		background-color: #c3c3c3;
    		padding: 3px 0 0;
    		border: 1px solid #707070;
    		float: left; 
    	}
    	
    	#navLinks ul.menu {
    		display: none;
    		list-style: none;
    		margin: 0;
    		padding: 0;
    		margin-top: 5px;
    	}
    	
    	#navLinks li {
    		margin: 0;
    		padding: 0;
    		padding-top: 1px;
    		border-top: 1px solid #fff;		
    	}
    	
    	a.menuLink {
    		font: bold normal normal .9em Trebuchet, sans-serif;
    		color: #fff;
    		display: block; 
    		text-align: center;
    		text-decoration: none;
    	}
    	
    	ul.menu a {
    		font: bold normal normal .85em Trebuchet, sans-serif;
    		color: #4c4d4c;
    		text-decoration: none;
    		display: block; 
    		padding: 3px;
    	}
    	
    	ul.menu a:hover, #navLinks a:active {
    		background-color: #d5d6d5;
    	}
    This is the javascript
    Code:
    window.onload = initAll;
    
    function initAll() {
    	var allLinks = document.getElementsByTagName("a");
    	
    	for(var i=0;i<allLinks.length; i++) {
    		if(allLinks[i].className.indexOf("menuLink") > -1) {
    			allLinks[i].onmouseover = toggleMenu;
    		}
    	}
    }
    
    function toggleMenu() {
    	var startMenu = this.href.lastIndexOf("/") + 1;
    	var stopMenu = this.href.lastIndexOf(".");
    	var thisMenuName = this.href.substring(startMenu, stopMenu);
    	
    	document.getElementById(thisMenuName).style.display = "block";
    	
    	this.parentNode.className = thisMenuName
    	this.parentNode.onmouseout = toggleDivOff; 
    	this.parentNode.onmouseover = toggleDivOn;
    	
    }
    
    function toggleDivOn() {
    	document.getElementById(this.className).style.display = "block"; 
    
    function toggleDivOff() {
    	document.getElementById(this.className).style.display = "none";
    }
    Thanks for any response.

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    When I hover over and the menu drops, all elements in the DOM below it drop as well.
    Sorry, the code provided is insufficient to identify the issue. Can we have a link to your page?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •