title: Jquery: When Hover on Menu Item, Display Text
body: <p>I'm new to JQuery, but wish to use it in a site that I'm building.</p>
  
  <p>When the user mouses over an item in the menu with <em>li</em> class <code>hovertriggerssubhead</code>, I want to display some text below it, located in the div (nested inside the li) with id <code>NavSubhead</code>. I have looked at several examples of this, namely in the cookbook in the FAQ of the JQuery documentation and the code of the JQuery site itself. </p>
  
  <p>This is my HTML code:</p>
  
  <pre><code>&lt;div id="Navigation"&gt;
  &lt;ul&gt;
  
  &lt;li class="current"&gt;
  &lt;a href="index.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
  
  &lt;li class="hovertriggerssubhead"&gt;
  &lt;a href="gallery.html"&gt;Gallery&lt;/a&gt;
  
  &lt;div class="NavSubhead"&gt;
  &lt;p class="navsubheadtext"&gt;Under Construction&lt;/p&gt;
  &lt;/div&gt; 
  &lt;/li&gt;
  
  &lt;li class="hovertriggerssubhead"&gt;
  
  &lt;div class="NavSubhead"&gt;
  &lt;p class="navsubheadtext"&gt;Under Construction&lt;/p&gt;
  &lt;/div&gt; 
  &lt;a href="contact.html"&gt;Contact&lt;/a&gt;&lt;/li&gt;
  
  &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I tried two methods of accomplishing this in my JQuery code; they are below:</p>
  
  <pre><code>$(document).ready(function() {
  
  //first method
  $(".NavSubhead").hide();
  
  $('#Navigation li').hover(
              function(){$(this).find('div.NavSubhead:hidden').fadeIn(500);},
              function(){$(this).find('div.NavSubhead:visible').fadeOut(500);}
          );
  
  
  //second method 
      $("#Navigation li div").hide(); 
  
      $("#Navigation li.hovertriggerssubhead").hover(
          function () {
          $(this).children("div.NavSubhead").show();
          },function(){
          $(this).children("div.NavSubhead").hide();
      });//hover
  
  });// document ready
  </code></pre>
  
  <p>Any help would be appreciated. Thanks!</p>
  
  <p><strong>UPDATE</strong>: I've tried numerous answers, even one with a working demo, but it still doesn't work, which is very weird. Could it be related by any chance to constraints of the navigation html because of an encompassing table? The table has a fixed width. Other than that, I don't know what is the problem, and JQuery is referenced correctly. Thanks in advance!</p>
  
  <p><strong>UPDATE #2</strong>: As it's possible that this is not working because of some weird constraints in regards to my HTML, I'm going to post it here. As you can see below, I'm using <a href="http://code.google.com/p/slideshow/" rel="nofollow noreferrer">this</a> Slideshow framework too.</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;MZ Photography&lt;/title&gt;
  
  &lt;!-- Jquery Stuff --&gt;
  
  &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
  
  /*
  
  $(function() {
  
    $("div.NavSubhead").hide();
  
   $('#Navigation li a').hover(
      function(){$(this).next().stop(false, true).slideDown().fadeIn(500);},
      function(){$(this).next().stop(false, true).slideUp().fadeOut(500);}
    );
  
  });
  */
  
  
  
  $(function() {
  
  /* hacky nav highlighting */
  var loc = window.location.href;
  //strip the existing current state
  $('#Navigation .current').removeClass('current');
  
  //add class to current section...
  //Home
  if(loc.indexOf('MZPhotography.html') &gt; -1){
         $('#Navigation #home').addClass('current');
  }
  //Gallery
  else if(loc.indexOf('gallery') &gt; -1){
         $('#Navigation #gallery').addClass('current');
  }
  //Contact
  else if(loc.indexOf('contact.html') &gt; -1){
         $('#Navigation #contact').addClass('current');
  }
  
  
  
  });
  
  $(document).ready(function() {
  
  
  
    $("div.NavSubhead").hide();
  
    $('#Navigation li a').hover(
      function(){$(this).next().stop(false, true).slideDown().fadeIn(500);},
      function(){$(this).next().stop(false, true).slideUp().fadeOut(500);}
    ); 
  
  
  
  
  
  
  
  });
  
  
  &lt;/script&gt;
  
  
  &lt;!-- End jquery stuff --&gt;
  
  
  &lt;!-- Slideshow stuff begins here --&gt;
  
  
  &lt;link rel="stylesheet" type="text/css" href="css/slideshow.css" media="screen" /&gt;
      &lt;script type="text/javascript" src="js/mootools.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="js/slideshow.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;     
      //&lt;![CDATA[
        window.addEvent('domready', function(){
          var data = {
            '30.jpg': { caption: '' }, 
            '25.jpg': { caption: '' }, 
            '21.jpg': { caption: '' }, 
            '16.jpg': { caption: '' },
            '11.jpg': { caption: '' },
            '13.jpg': { caption: '' },
            '12.jpg': { caption: '' },
            '9.jpg': { caption: '' },
            '4.jpg': { caption: '' },
            '2.jpg': { caption: '' },
            '3.jpg': { caption: '' },
            '6.jpg': { caption: '' },
            '7.jpg': { caption: '' },
            '14.jpg': { caption: '' },
            '8.jpg': { caption: '' },
            '10.jpg': { caption: '' },
            '15.jpg': { caption: '' },
            '17.jpg': { caption: '' },
            '22.jpg': { caption: '' },
            '28.jpg': { caption: '' },
            '26.jpg': { caption: '' },
            '27.jpg': { caption: '' },
            '24.jpg': { caption: '' },
            '23.jpg': { caption: '' },
            '19.jpg': { caption: '' },
            '18.jpg': { caption: '' },
            '20.jpg': { caption: '' },
            '29.jpg': { caption: '' },
            '31.jpg': { caption: '' },
            '32.jpg': { caption: '' },
            '1.jpg': { caption: '' },
            '5.jpg': { caption: '' },
            '33.jpg': { caption: '' },
            '34.jpg': { caption: '' },
            '35.jpg': { caption: '' },
            '36.jpg': { caption: '' }
  
  
  
          };
          var myShow = new Slideshow('show', data, {controller: true, height: 450, hu: 'images/', thumbnails: false, width: 600});
        });
      //]]&gt;
      &lt;/script&gt;
  
  
      &lt;!-- end Slideshow --&gt;
  
  &lt;link rel="stylesheet" href="site.css"&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;table width="980"&gt; &lt;!--980 --&gt;
  
  &lt;tr&gt;
  
  &lt;td width="880"&gt;
  
  &lt;table width="880"&gt; &lt;!--880--&gt;
  
  &lt;tr&gt;
  
  &lt;td align="left"&gt;
  &lt;div id="logo"&gt;
  &lt;img src="images/title.png" /&gt;
  &lt;/div&gt;
  &lt;/td&gt;
  
  &lt;td align="right"&gt;&lt;!--MENU--&gt;
  &lt;div id="Navigation"&gt;
  &lt;ul&gt;
  
  &lt;li id="home" class="current"&gt;
  &lt;a href="#top"&gt;Home&lt;/a&gt;&lt;/li&gt;
  
  &lt;li id="gallery" class="hovertriggerssubhead"&gt;
  &lt;a href="gallery.html"&gt;Gallery&lt;/a&gt;
  
  &lt;div class="NavSubhead"&gt;
  &lt;p class="navsubheadtext"&gt;Under Construction&lt;/p&gt;
  &lt;/div&gt; 
  &lt;/li&gt;
  
  &lt;li id="contact" class="hovertriggerssubhead"&gt;
  &lt;a href="contact.html"&gt;Contact&lt;/a&gt;&lt;/li&gt;
  
  &lt;div class="NavSubhead"&gt;
  &lt;p class="navsubheadtext"&gt;Under Construction&lt;/p&gt;
  &lt;/div&gt; 
  
  &lt;/ul&gt;
  &lt;/div&gt;
  &lt;/td&gt;
  &lt;/tr&gt;
  &lt;/table&gt;
  
  &lt;table width="700"&gt;
  &lt;tr&gt;&lt;td&gt;&lt;br&gt;&lt;/td&gt;&lt;/tr&gt;
  &lt;tr&gt;
  &lt;!-- we don't rly need this --&gt;
  &lt;!-- How about about section here? --&gt;
  
  &lt;td align="left" id="tdAbout"&gt;
  
  &lt;!--Recent Changes --&gt; &lt;!-- NM --&gt;
  &lt;div id="aboutDiv"&gt;
  &lt;p class="yellowboxtransparent" id="about"&gt;
  Welcome to MZ's personal photography site. Here, you will find galleries of some of his photos, by pressing the Galleries link at the top right hand side of the page. Enjoy!
  
  &lt;/p&gt;
  &lt;/div&gt;
  
  &lt;!-- About --&gt; &lt;/td&gt;
  &lt;td&gt;&amp;nbsp;&amp;nbsp;&lt;/td&gt;
  &lt;td align="center"&gt;
  
  &lt;!--Slideshow--&gt;
  &lt;div align="center" id="show" class="slideshow"&gt;
      &lt;img src="images/1.jpg" alt="" /&gt;
    &lt;/div&gt;
  
  &lt;/td&gt;
  &lt;td align="right"&gt;
  &lt;/td&gt;
  &lt;/tr&gt;
  
  &lt;tr&gt;&lt;td&gt;&lt;br&gt;&lt;br&gt;&lt;/td&gt;&lt;/tr&gt;
  
  &lt;tr&gt;&lt;!--&lt;td align="left"&gt; --&gt;
  
  &lt;!--Copyright Statement--&gt;
  &lt;!--&lt;p class="copy"&gt;&amp;copy; Copyright 2009 by MZ. &lt;br/&gt;All Rights Reserved. &lt;/p&gt;
  
  &lt;/td&gt;&lt;td align="right"&gt;&lt;!--Links--&gt;&lt;!--&lt;/td&gt;--&gt;&lt;/tr&gt;&lt;/table&gt;
  &lt;/td&gt;
  &lt;td&gt;&lt;!--Right hand column --&gt;
  &lt;div id="meDiv"&gt;
  &lt;p class="blueboxtransparent"&gt;
  
  hi
  
  &lt;/p&gt;
  &lt;/div&gt;
  &lt;/td&gt;
  &lt;/tr&gt;
  &lt;/table&gt;
  &lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;
  &lt;!-- Beneath --&gt;
  
  &lt;div id="bottom"&gt;
  
  &lt;div class="leftfloat" id="divCopy"&gt;
  &lt;!--Copyright Statement--&gt;
  &lt;p class="copy"&gt;&amp;copy; Copyright 2009 by MZ. All Rights Reserved. &lt;/p&gt;
  &lt;/div&gt;
  &lt;div class="rightfloat" id="divLinks"&gt;
  
  &lt;ul id="linklist"&gt;
  &lt;li&gt;&lt;a href="http://absolutely2nothing.wordpress.com"&gt;Blog&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="http://twitter.com/maximz2005"&gt;Twitter - @maximz2005&lt;/a&gt;&lt;/li&gt;
  
  &lt;/ul&gt;
  
  
  &lt;/div&gt;
  
  
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The below is my css, in <em>site.css</em>.</p>
  
  <pre><code>/* CSS for MZ Photography site. Coypright 2009 by MZ, All Rights Reserved. */
  
  p.copy { color:#ffffff; font-face:Helvetica,Calibri,Arial; font-size:12; font-style:italic;}
  
  .leftfloat { float: left; }
  
  .rightfloat { float: right; }
  
  body {
  font: 12px/1.5 Helvetica, Arial, "Lucida Grande", "Lucida Sans Unicode", Tahoma, sans-serif!important;
  color: #ffffff;
  background: #000000; }
  
  #about { color: #3399FF; } /* #666 */
  
  h1 { font: Helvetica, "Comic Sans MS", "Arial Rounded MT Bold", Tahoma, "Times New Roman"; font-size: 32pt; color: #339; }
  
  h2 { font: Helvetica, Arial; font-size: 18pt; color: #666; }
  
  a.hover { background-color:#666; color:#ffffff; }
  
  #tdAbout { width:25 }
  
  #nav { float:right }
  
  #linklist
  {
  font-family: Calibri, Helvetica, Comic Sans MS, Arial, sans-serif;
  list-style-type:circle;
  white-space:nowrap;
  }
  
  #linklist li
  {
  display:inline
  
  
  }
  
  
  /* Warnings/Alerts */
  .warning, .alert, .yellowbox {
  padding: 6px 9px;
  background: #fffbbc;
  border: 1px solid #E6DB55;
  }
  
  .yellowboxtransparent, .warningtransparent, .alerttransparent { 
  padding:6px 9px;
  border: 1px solid #E6DB55;
  }
  
  /* Errors */
  .error, .redbox {
  padding: 6px 9px;
  background: #ffebe8;
  border: 1px solid #C00;
  }
  
  .redboxtransparent, .errortransparent{
  padding: 6px 9px;
  border: 1px solid #C00;
  }
  
  /* Downloads */
  .download, .greenbox {
  padding: 6px 9px;
  background: #e7f7d3;
  border: 1px solid #6c3;
  }
  
  .greenboxtransparent, .downloadtransparent {
  padding: 6px 9px;
  border: 1px solid #6c3;
  }
  
  /*Info Box */
  .bluebox, .info{
  padding: 6px 9px;
  background: #FFFF33;
  border: 2px solid #3399FF;
  color: 000000;
  }
  
  .blueboxtransparent, .infotransparent{
  padding: 6px 9px;
  border: 1px solid #3399FF;
  }
  
  a:link {
  COLOR: #DC143C; /* #0000FF */
  }
  a:visited {
  COLOR: #DC143C; /* #800080 */
  }
  a:hover { color: #ffffff; background-color: #00BFFF; }
  }
  a:active { color: #ffffff; background-color: #00BFFF; }
  
  
  
  
  /*Navigation*/
  #Navigation {
  float: right;
  background: #192839 url(images/bg_nav_left.gif) left bottom no-repeat;
  }
  
  #Navigation ul {
  float: left;
  background: url(images/bg_nav_right.gif) right bottom no-repeat;
  padding: 0 .8em 2px;
  margin: 0;
  }
  #Navigation li {
  float: left;
  list-style: none;
  margin: 0;
  background: none;
  padding: 0;
  }
  #Navigation li a {
  float: left;
  padding: 0 1em;
  line-height: 25px;
  font-size: 1.2em;
  color: #D0D0D0;
  text-decoration: none;
  margin-bottom: 2px;
  }
  #Navigation li.current a, #Navigation li.current a:hover {
      border-bottom: 2px solid #176092;
      background: #192839;
      margin-bottom: 0;
      cursor: default;
      color: #D0D0D0;
  }
  #Navigation li a:hover {
  color: #fff;
  border-bottom: 2px solid #4082ae;
  margin-bottom: 0;
  }
  
  #Navigation li.current a, #Navigation li.current a:hover {
      border-bottom: 2px solid #176092;
      background: #192839;
      margin-bottom: 0;
      cursor: default;
      color: #D0D0D0;
  }
  </code></pre>
  
  <p>Thanks so much in advance for all your help!</p>