Перемещение элементов навигационной панели

Question

Когда я наводил указатель мыши на элементы меню, они не всегда идеально вписываются в навигационную панель, я также не могу исправить этот крошечный промежуток между границей и последним элементом навигации, а разрыв меняется при увеличении/на странице, когда я увеличиваю/уменьшаю масштаб на Google Chrome и наведите курсор на пункты меню, зависающий элемент становится выше, чем остальная часть бара. Я пытался понять это уже довольно давно. Благодарим вас за помощь.

Основные цели: избавление от пробела рядом с «контактом», создание зависающих элементов, вписывающихся в навигационную панель, исправление проблемы масштабирования google chrome navbar.

Вот мой codepen: http://codepen.io/anon/pen/QbBgKR

<nav class="menu"> 

     <ul class="clearfix"> 

      <li><a href="#">HOME</a> </li> 

      <li><a href="#">PROFILE</a></li> 

      <li><a href="#">STUFF</a></li> 

      <li><a href="#">STUFF</a></li> 

      <li id="long"> <a href="#">PRODUCTS<span class="arrow">&#9660;</span></a> 

       <ul class="sub-menu"> 

        <li><a href="#">STUFF1</a></li> 

        <li><a href="#">STUFF2</a></li> 

        <li><a href="#">STUFF3</a></li> 

       </ul> 

      </li> 

      <li><a href="#">CONTACT</a></li> 

     </ul> 

    </nav><!-- menu --> 

    .clearfix:after { 

    display: block; 
    clear: both; 

} 

.clearfix { 

    margin-left: -37px; 

} 

nav { 

    font-size: 1em; 
    width: 700px; 
    background-color: #3A5199; 
    font-family: Verdana; 
} 

#current { 

    background-color: #6082ec; 

} 



.menu li { 

    display: inline-block; 
    list-style: none; 
    position: relative; 
    width: 15.2%; 
    text-align: center; 
    margin-left: -0.4%; 
    margin-right: -0.4%; 

} 


.menu li:hover { 

    background-color: #6082ec; 

} 

.menu a { 

    text-decoration: none; 
    color: white; 
    display: block; 
    padding-top: 10px; 
    padding-bottom: 10px; 
} 



#long { 

    width: 24%; 

} 

.menu .arrow { 

    font-size: 12px; 
    line-height: 0%; 

} 

.sub-menu { 

    width: 128px; 
    position: absolute; 
    z-index: -1; 
    opacity: 0; 
    transition: opacity linear 0.15s; 
    background-color : #6082ec; 


} 

.menu li:hover .sub-menu { 

    z-index:1; 
    opacity:1; 

} 

.sub-menu li:hover { 

    background-color: #3A5199; 

} 

.sub-menu li { 

    width: 131%; 
    display: block; 
    right: 39.2px; 


} 

.sub-menu a { 

    position: relative; 
    text-align: center;  

} 

Answer 1

Использование reset stylesheet или что-то вроде normalize.css будет пройти долгий путь в борьбе с различными Маржа, дополняющие и отображения несогласованности в разных браузерах, и вы не должны делать отрицательные поля «хаки», как вы делали для .clearfix.

Хотя вы рассчитали ваши проценты правильно для вашего li добавить до 100%, разрыв справа от Контакта возникает с пиксельным округлением процентной ширины вы применили.

15.2% of 700px = 106.4px

Браузер, скорее всего, округлить до 106px. Изменение разрыва при масштабировании также, вероятно, связано с процентной шириной. На одном уровне масштабирования значение округляется по-разному.

106px * 5 = 530px + 24% of 700px (168px) = 698px

Поскольку вы используете фиксированный с на вашем <nav> элемента, то почему бы не использовать фиксированные ширины на li также? Или немного измените процентные значения. 15.2% для домашней ссылки создает больше отступов между текстом Домой и левый и правый края li, чем для Профиль.

равноширокого Solution

/* default width for all li */ 
.menu li { 
    width: 108px; 
} 
/* Home */ 
.menu li:nth-child(1) { 
    width: 100px; 
} 
/* Products */ 
.menu li:nth-child(5) { 
    width: 168px; 
} 

Насколько масштабирование в Chrome и получать изменения высоты при наведении курсора мыши, я не могу воспроизвести эту проблему.

Answer 2

Отрицательный запас для UL работает.

.clearfix { 

    margin-left: -37px; 
    margin-right:-0.4%; 

} 

Странная математика - имхо.