simple jquery drop down menu?

[game_over]

I want to create a drop down div when another div is hovered. I've tried a few examples online but having trouble slimming one down as i have little jQuery experience.

literally just need 1 div, when hovered another div appears below it.

any suggestions?

[howarang15]

This is how i would do it.

<div id="mydiv1">
Hover Over Me
</div>

<div id="mydiv2" style="display:none;">
Now yo see
</div>

<script>
$('#mydiv1').hover(
  function () {
    $('#mydiv2').show();
  }, 
  function () {
       $('#mydiv2').hide();
  }
);
</script>

[game_over]

This is how i would do it.

<div id="mydiv1">
Hover Over Me
</div>

<div id="mydiv2" style="display:none;">
Now yo see
</div>

<script>
$('#mydiv1').hover(
  function () {
    $('#mydiv2').show();
  }, 
  function () {
   	$('#mydiv2').hide();
  }
);
</script>

as easy as that, thank you so much :)

[Duncank]

That would work indeed like hover on div 1 -> div2 shows, but when you leave div1 with your mouse, div2 hides again, so it wouldn't be very usefull in menu-terms ;)

Maybe it's a better idea to make 2 lists in eachother:

<ul class="nav">
  <li class="item1">menuitem1
    <ul class="subnav">
      <li>menuitem2</li>
    </ul>
  </li>
</ul>

and then you'll have to hide ul.subnav with css (display:none), and with jquery you create a hover effect on li.item1.

$(document).ready(function(){
  $('li.item1').hover(function(){
      $('.subnav').show();
    },function(){
      $('.subnav').hide();
    });
});

That will do the trick! This stays active while hovering subnav. and maybe you want to change show and hide for slideUp() and slideDown() to give it a nice effect.

[mildpanda]

Because you haven't mentioned whether you want transitions or not, I would say: use CSS instead of jQuery for the hide/show thing, as it's faster, lighter and works for people who JavaScript turned off.

Here's an example of a navigation drop down menu.

The HTML

<div id="nav">
	<ul>
		<li>
			<a href="/about" title="">About</a>
			<ul>
				<li>
					<a href="/about/history" title="">History</a>
				</li>
				<li>
					<a href="/about/special-thanks" title="">Special Thanks</a>
				</li>
				<li>
					<a href="/about/message-from-founder" title="">Message from the Founder</a>
				</li>
			</ul>
		</li>
	</ul>
</div>

The CSS

#nav ul { margin: 0px; }

	#nav li { float: left; list-style: none; margin: 0px; }

		#nav li ul { display: none; }

			#nav li:hover ul { display: block; position: absolute; }

				#nav li:hover ul li { float: none; }

					#nav li:hover ul a { width: 120px; }

View it in action here.

[mildpanda]

Because you haven't mentioned whether you want transitions or not, I would say: use CSS instead of jQuery for the hide/show thing, as it's faster, lighter and works for people who JavaScript turned off.

Here's an example of a navigation drop down menu.

The HTML

<div id="nav">
	<ul>
		<li>
			<a href="/about" title="">About</a>
			<ul>
				<li>
					<a href="/about/history" title="">History</a>
				</li>
				<li>
					<a href="/about/special-thanks" title="">Special Thanks</a>
				</li>
				<li>
					<a href="/about/message-from-founder" title="">Message from the Founder</a>
				</li>
			</ul>
		</li>
	</ul>
</div>

The CSS

#nav ul { margin: 0px; }

	#nav li { float: left; list-style: none; margin: 0px; }

		#nav li ul { display: none; }

			#nav li:hover ul { display: block; position: absolute; }

				#nav li:hover ul li { float: none; }

					#nav li:hover ul a { width: 120px; }

View it in action here.