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
    Jul 2009
    Location
    Chicago, IL
    Posts
    169
    Thanks
    26
    Thanked 3 Times in 3 Posts

    Trouble with my CSS dropdown menu

    I recently implemented a CSS dropdown menu. I want the menu to pop up whenever you mouseover a certain link or click the link, and to have the menu disappear when you mouseout from the menu. I got that to work, but I noticed an issue that I believe has to do with the z-index. Below a portion of the menu is an image (the menu covers the image because it has a higher z-index). When the user moves his mouse to an area of the menu that has the image below it, the menu disappears. Let me demonstrate...
    -----------------
    |___________|
    |xx_________|
    |___________|

    The "xx" is an image that is blocked by the menu, but if I mouseover that portion of the menu, the menu disappears. For reference, the "xx" has a z-index of 2, and the menu has a z-index of 4.

    Code:
    <script type="text/javascript">
    function showlayer(layer,e)
    {
    	var myLayer = document.getElementById(layer);
    	if(myLayer.style.display=="none" || myLayer.style.display=="" || e=="mouse")
    	{
    		myLayer.style.display="block";
    	} 
    	else 
    	{
    		myLayer.style.display="none";
    	}
    }
    
    </script>
    <div id="foodMenu" align="center">
    	<ul class="dropDownMenu">
    		<li><a href="#" onclick="showlayer('subLayer')" title="Sort by food" onmouseover="showlayer('subLayer','mouse')">Food*</a></li>
    		<ul class="subDropDownMenu" id="subLayer" onmouseout="showlayer('subLayer')">
    			<li><a href="<?php echo $food_name_link;?>" title="Sort by food name">Sort by food name</a></li>
    			<li><a href="<?php echo $food_rating_link;?>" title="Sort by food rating">Sort by food rating</a></li>
    		</ul>
    	</ul>
    </div>
    And here's the CSS...
    Code:
    ul, li{list-style:none;}
    #foodMenu{
    	height:0px;
    	padding:0px 78px 36px 0px;
    	width:150px;
    }
    #foodMenu .dropDownMenu li {
    	float:none;
    	width:150px;
    }
    #foodMenu .dropDownMenu li a{
    	display:block;
    }
    
    #foodMenu ul .subDropDownMenu {
    	border:solid 1px #004A66;
    	background:#FFFFFF;
    	position:relative;
    	width:150px;
    	padding:0px 0px;
    	clear:both;
    	z-index:4;
    	display:none;
    }
    #foodMenu ul .subDropDownMenu li{
    	background:none;
    	display:block;
    	float:none;
    	border:0;
    	height:auto;
    	line-height:normal;
    	border-bottom:solid 1px #004A66;
    }
    #foodMenu .subDropDownMenu li a{
    	background:none;
    	display:block;
    	float:none;
    	padding:6px 6px;
    	margin:0;
    	border:0;
    	height:auto;
    	line-height:normal;
    }
    #foodMenu .subDropDownMenu li a:hover{
    	background:#5195CE;
    	color:#FFF;
    }

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,863
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Could you please post a link to your page?
    btw, relying completely on javascript to make the drop down effect may cause some accessibility issues for those who have no javascript support in their browser. I'd recommend to use a CSS based one instead, see http://htmldog.com/articles/suckerfish/dropdowns/
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Posting Permissions

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