title: jQuery show submenu on hover and add class if submenu exists
body: <p>Using jQuery, I want to show submenu when menu li is hovered such that: when .nav has a ul.submenu and .nav li is hovered, show .submenu and add class .arrow-down, and onmouse out hide it again.</p>
  
  <p>My HTML is as follows:                  </p>
  
  <pre><code>        &lt;ul class="nav"&gt;
              &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Facilities&lt;/a&gt;
                  &lt;ul class="submenu"&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Coaching&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Performance Tests&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Trainers&lt;/a&gt;
                  &lt;ul class="submenu"&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Coaching&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Performance Tests&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Membership&lt;/a&gt;
                  &lt;ul class="submenu"&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Coaching&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Performance Tests&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Schedule&lt;/a&gt;
                  &lt;ul class="submenu"&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Coaching&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Performance Tests&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
  </code></pre>
  
  <p>Thanks...</p>