Hover Menu Moves Up when Hovered
<p>When hovering over the links in <code>drop2</code> div, the entire <code>drop2</code> div moves upward a few pixels. Same problem with <code>drop3</code>.</p>

<p>Any ideas why the div is shifting up when I hover over it? Thank you, any advice much appreciated.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>#nav {
  background-color: #373737;
  float: left;
  height: 30px;
  padding: 0px 0px 0px 0px;
  width: 970px;
}
.nav a {
  display: block;
}
.nav ul li a {
  position: relative;
}
a {
  text-decoration: none;
}
a.item {
  color: white;
}
.item {
  position: relative;
}
a.item:hover {
  background-color: #dcd0c0;
  height: 30px;
  color: #373737;
  font-weight: bold;
}
.menu {
  list-style-type: none;
  margin: auto;
  width: 970px;
  text-align: center;
}
.nav .items {
  display: inline;
  float: left;
  margin: 0px 100px 0px 100px;
  padding: 0;
  text-align: center;
  width: 82px;
}
.drop2 {
  display: none;
  text-align: left;
  width: 150px;
  padding-left: 10px;
  padding-top: 5px;
  padding-bottom: 5px;
}
.items:hover .drop2 {
  display: block;
  width: 150px;
  padding-left: 10px;
  padding-top: 5px;
  padding-bottom: 5px;
  background-color: #f4f4f4;
  position: relative;
  z-index: 99;
}
.drop3 {
  display: none;
  text-align: left;
  padding-left: 10px;
  padding-top: 5px;
  padding-bottom: 5px;
  width: 150px;
}
.items:hover .drop3 {
  display: block;
  width: 150px;
  padding-left: 10px;
  padding-top: 5px;
  padding-bottom: 5px;
  background-color: #f4f4f4;
  position: relative;
  z-index: 99;
}
.drop2 &gt; a {
  color: #373737;
}
.drop3 &gt; a {
  color: #373737;
}
.drop2 &gt; a:hover {
  font-weight: bold;
}
.drop3 &gt; a:hover {
  font-weight: bold;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="nav"&gt;
  &lt;div class="nav"&gt;
    &lt;ul class="menu"&gt;
      &lt;li class="items"&gt;
        &lt;a href="#" class="item"&gt;Photos&lt;/a&gt;
      &lt;/li&gt;
      &lt;li class="items"&gt;
        &lt;a href="#" class="item"&gt;Locations&lt;/a&gt;
        &lt;div class="drop2"&gt;
          &lt;a href="#"&gt;Bays&lt;/a&gt;
          &lt;a href="#"&gt;Lakes&lt;/a&gt;
          &lt;a href="#"&gt;Pacific Ocean&lt;/a&gt;
        &lt;/div&gt;
      &lt;/li&gt;
      &lt;li class="items"&gt;
        &lt;a href="#" class="item"&gt;Catches&lt;/a&gt;
        &lt;div class="drop3"&gt;
          &lt;a href="#"&gt;Bass&lt;/a&gt;
          &lt;a href="#"&gt;Other&lt;/a&gt;
        &lt;/div&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>