1 Replies - 777 Views - Last Post: 16 October 2011 - 08:02 PM

#1 Tangela   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 47
  • Joined: 08-October 10

drop down menu

Posted 12 October 2011 - 06:20 AM

Hello I am working on a ul drop down menu with jquery and css. Now the good thing is I know what is the problem with my drop down menu. When I roll over the button the ul is behind it and because its behind my button bar jquery thinks that it rolled off. So then it hides the ul. Well I can fix it buy making the ul appear infront on my button bar but I dont want that. If some could help me out that would be grate thanks.

index.html:
<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="css/template.css">
	<link rel="stylesheet" type="text/css" href="css/buttonbar.css">
	<script type="text/javascript" src="jquery.js"></script>
  </head>
  <body>
  <div id="backbar"></div>
  <div id="backbanner"></div>
    <div id="container">
	  <div id="banner"></div>
	  <div id="buttonbar">
	    <ul>
		  <li>Home
		    <ul>
			  <li>hello world hello worldorlm d</li>
			  <li>hello world</li>
			  <li>hello world</li>
			  <li>hello world</li>
			  <li>hello world</li>
			  <li>hello world</li>
			</ul>
		  </li>
		  <li>this is a test
		  		    <ul>
			  <li>hello world</li>
			  <li>hello world</li>
			  <li>hello world</li>
			  <li>hello world</li>
			  <li>hello world</li>
			  <li>hello world</li>
			</ul></li>
		</ul>
	  </div>
	</div>
	<script type="text/javascript">
	  $(document).ready(init());
	  
	  function init()
	  {
	    $("div#buttonbar ul li ul").hide();
		$("div#buttonbar ul li").hover(
		  function () {
		    $(this).find('ul').show();
		  },
		  function (){
		    $(this).find('ul').hide();
			});
	  }
	</script>
  </body>
</html>


buttonbar.css
#backbar
{
  position: absolute;
  left: 0px;
  top: 190px;
  width: 100%;
  height: 50px;
  background-color:#f6b300;
  z-index: -1;
}


#buttonbar
{
  width: 1000px;
  height: 50px;
  background-color: #f6c500;
  font-size: 20px;
  float:left;
}

#buttonbar ul
{
  position: absolute;
  list-style: none;
}

#buttonbar ul li
{
  float: left;
  padding: 0px 10px;
}

#buttonbar ul li:hover
{
  float: left;
  padding: 0px 10px;
  border-radius: 5px;
  -moz-border-radius: 5px;
  background-color: #FFA800;
}

#buttonbar ul li ul
{
  position: absolute;
  clear:both;
  padding: 5px 0px 0px 0px;
  border-radius: 5px;
  -moz-border-radius: 5px;
  list-style-type: none;
  background-color: #ffffff;
  z-index: -1;
}

#buttonbar ul li ul li
{
  float: none;
  width: 100%;
  margin: 0px;
  clear: both;
  padding: 0px 10px;
}


template.css:
body
{
  margin: 0px;
  padding: 0px;
  background-color: #ffedd1;
  font-family:"Arial";
}

#container
{
  margin: 0px auto;
  width: 1000px;
  min-height: 700px;
}

#backbanner
{
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 200px;
  background-color:#232736;
  z-index: -2;
}

#banner
{
  width: 1000px;
  height: 200px;
  background-image: url("image/banner.png");
}



Is This A Good Question/Topic? 0
  • +

Replies To: drop down menu

#2 sas1ni69   User is offline

  • D.I.C Regular
  • member icon

Reputation: 85
  • View blog
  • Posts: 431
  • Joined: 04-December 08

Re: drop down menu

Posted 16 October 2011 - 08:02 PM

Hi there, I've looked over your code and found that your problem is right here;

#buttonbar ul li ul
{
  position: absolute;
  clear:both;
  padding: 5px 0px 0px 0px;
  border-radius: 5px;
  -moz-border-radius: 5px;
  list-style-type: none;
  background-color: #ffffff;
  z-index: -1; //This is sending the div behind the background. Remove it.
}




You can also remove the javascript and make this menu in css completely. You'll use something like this;

#buttonbar ul ul{
	position: absolute;
	visibility: hidden;
}

#buttonbar ul li:hover ul{
	visibility: visible;
}


Hope this helps man :D

[Edit: Typo]

This post has been edited by sas1ni69: 16 October 2011 - 08:04 PM

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1