title: Wire-up links to show lists on hover
body: <p>I have a navigation menu made from nested lists.  On lower screen widths (&lt;800px) I want to simply show all list items/hyperlinks.</p>
  
  <p>However, for larger widths, I want to only show the child-lists when the respective hyperlink is hovered over.  My approach (and there may be a better way which I am eager to hear about!) is:</p>
  
  <ul>
  <li>Check the screen width</li>
  <li>If >800px then hide the nested lists</li>
  <li>Wire up the links to show their respective list (adjacent sibling) when hovered over</li>
  </ul>
  
  <p>I am struggling with the final step and would appreciate some guidance please.  One consideration is that if JS is disabled, then the lists should all appear as per lower screen widths.</p>
  
  <pre><code>$(document).ready(function () {
      SetupNavMenus();
  });
  
  /* 
  If the screen width is greater than 800px, hide the child lists and wire-up the 
  hyperlinks to show them on hover
  */
  function SetupNavMenus() {
      if (screen.width &gt; 800) {
          HideSubMenus();
          WireUpExpandableLinks();
      }
  }
  
  function HideSubMenus() {
      $("#menus ul ul").hide();
  }
  
  function WireUpExpandableLinks() {
      $("#menus ul a").each(function() {
          // show the respective list on link:hover
      });
  }
  
  function ShowSubMenu(lnk) {
      $(lnk).next('ul').slideToggle('fast');
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/vj8VA/2/" rel="nofollow">A JsFiddle is here.</a></p>