title: Hiding nested vertical menu until mouse over (Nav menu)
body: <p>I am having some trouble using jQuery to hide my vertical menu. I just learned jQuery, so I am fairly new to using it. I can't get jQuery to modify anything (change color for example, using any action.. <code>mouseenter()</code>, <code>click()</code> etc)</p>
  
  <p>Help is much appreciated. </p>
  
  <p><strong>EDIT:</strong> I am getting errors in JSLint.. trying to use jQuery in brackets editor. Not sure what to do :/ First error is on line 1 using $ before defined.. any help would be awesome</p>
  
  <p>This code is simply trying to change the green "link1, link2, link3" text from green to purple when mousing over "Program"</p>
  
  <p>***also, is there a way to easily reduce the size of my ul li items? The area that I can currently click is larger than the text. I tried modifying my display: property, but that messes up the layout of my list.. *******</p>
  
  <p>jQuery</p>
  
  <pre><code>$(document).ready(function() {
      $('#headerMenu &gt; li').mouseenter(function() {
         ('#headerMenu ul li a').Color('purple'); 
      });
  });
  </code></pre>
  
  <p>HTML: </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  
  &lt;html&gt;
  &lt;head&gt;
      &lt;link type = "text/css" rel="stylesheet" href="stylesheet.css"/&gt;
      &lt;script type='text/javascript' src='script.js'&gt;&lt;/script&gt;
      &lt;title&gt;Home Page&lt;/title&gt; 
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="header"&gt;
          &lt;ul id="headerMenu"&gt;
              &lt;li&gt;
                  &lt;a href="#"&gt;DROP&lt;/a&gt;
                  &lt;ul&gt;
                      &lt;li&gt;&lt;a href='#'&gt;LINK 1&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href='#'&gt;LINK 2&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href='#'&gt;LINK 3&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;LOGIN&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;ABOUT&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
      &lt;div class="wrapper"&gt;
          &lt;div id="mainPhoto"&gt;   fffffff
              &lt;div&gt; change color&lt;/div&gt;
          &lt;/div&gt;
          &lt;div id="mainScrollUp"&gt;    &lt;/div&gt;
      &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>css code</p>
  
  <pre><code>.header {
      background-color: skyblue;
      font-family: sans-serif;
      height: 75px;
      width: 100%;
      display: table;
  }
  
  /* Main centered menu on top */
  
      #headerMenu {
      text-align: center;
      padding: 0;
      list-style: none;
      display: table-cell;
      vertical-align: bottom;
  }
  
  #headerMenu &gt; li {
      display: inline-block;
      text-align: center;
  }
  
  #headerMenu li a {
      text-decoration: none;
      color: black;
      padding: 2rem;
      }
  
  #headerMenu li a:hover {
      color: lightgray;
  }
  
  /* Sub Menu for Link One */
  
  #headerMenu ul {
      text-decoration: none;
      list-style: none;
      display: block;
      color: red;
      padding-left: 0;
      position:absolute;
  }
  
  #headerMenu ul li a{
      color:green;
  }
  
  
  #mainPhoto {
      height: 650px;
      width: 100%;
      background-color: bisque;
      color:palevioletred;
  
  }
  
  #mainScrollUp {
      z-index: 1;
      height: 1000px;
      width: 100%;
      background-color: aqua;
      clear: both;
  }
  
  .fixed {
      position: fixed;
      top: 0;
  }
  </code></pre>