Меню наведения перемещается при наведении на место

Question

При перемещении по ссылкам в drop2 div, весь drop2 div перемещается вверх на несколько пикселей. Такая же проблема с drop3.

Любые идеи, почему div смещается, когда я навис над ним? Спасибо, любой совет, который очень ценится.

#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 > a { 
 
    color: #373737; 
 
} 
 
.drop3 > a { 
 
    color: #373737; 
 
} 
 
.drop2 > a:hover { 
 
    font-weight: bold; 
 
} 
 
.drop3 > a:hover { 
 
    font-weight: bold; 
 
}

<div id="nav"> 
 
    <div class="nav"> 
 
    <ul class="menu"> 
 
     <li class="items"> 
 
     <a href="#" class="item">Photos</a> 
 
     </li> 
 
     <li class="items"> 
 
     <a href="#" class="item">Locations</a> 
 
     <div class="drop2"> 
 
      <a href="#">Bays</a> 
 
      <a href="#">Lakes</a> 
 
      <a href="#">Pacific Ocean</a> 
 
     </div> 
 
     </li> 
 
     <li class="items"> 
 
     <a href="#" class="item">Catches</a> 
 
     <div class="drop3"> 
 
      <a href="#">Bass</a> 
 
      <a href="#">Other</a> 
 
     </div> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</div>

Answer 1

Добавить line-height: 30px; в свой #nav тег в CSS.

jsfiddle