title: CSS Hover Menu Item
body: <p>I have a fixed navigation on the bottom of my website. The trouble I am having is that the hover effect (background) slides up before I even have my mouse over the text. At the moment the background slides up when my mouse enters the .item-container. Basically I need to make the hover effect take place ONLY when my mouse is over the text and not the outside divs.</p>
  
  <p>I have a jsFiddle: <a href="https://jsfiddle.net/tebrown/dLz8fL80/" rel="nofollow">https://jsfiddle.net/tebrown/dLz8fL80/</a></p>
  
  <pre><code>&lt;nav&gt;
      &lt;ul&gt;
          &lt;li&gt;
              &lt;a href="#"&gt;
                  &lt;div class="item-container"&gt;
                      &lt;div class="item-top"&gt;The Song&lt;/div&gt;
                      &lt;div class="item-bottom-song-content"&gt;The Song&lt;/div&gt;
                      &lt;div class="item-bottom-song"&gt;Have a Listen&lt;/div&gt;
                  &lt;/div&gt;
              &lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
          ...
      &lt;/ul&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>Any help would be much appreciated. </p>
  
  <p>Cheers</p>