CSS Dropdown Menu Shift

Question

Мне любопытно, почему моя ссылка «homepage» продолжает переходить. Я сделал скрипку проблемы:

jsfiddle.net/nbf8fwdv/

Спасибо за помощь. Я по-прежнему ощущаю семантику и правильное использование в CSS, поэтому, если вы видите какие-либо серьезные проблемы с моим кодом, который сделает только новичок, пожалуйста, дайте мне знать. Спасибо за помощь заранее.

Answer 1

Для того, чтобы предотвратить домашнюю страницу от перехода на парении, вы хотите, чтобы удалить это свойство:

max-width: 75px; 

из этого класса:

nav ul>li:hover { 
     background-color: rgba(253,235,193,.6); 
     max-width: 75px; 
     text-align:center; 
} 

Поскольку список домашнего элемента естественно больше чем 75px, свойство max-width фактически уменьшает его ширину при наведении.

Answer 2

Чтобы сохранить ваши другие ссылки, переместившись, наведите указатель мыши на «портфолио», вот мои 2 цента. http://jsfiddle.net/nbf8fwdv/5/

nav ul ul { 
     display: none; 
     position:absolute; 
     left:0; 
    } 

Answer 3

Вы можете написать класс как бутстрапе

body { 
    background-color: white; 
    font-family: PT Sans, sans-serif; 
    text-shadow: 1px 1px rgba(166,166,166,.2); 
} 
header { 
    background: white; 
    width: 100% 
    padding: 40px 0; 
    color: black; 
    text-align: center; 
} 
a { 
    text-decoration: none; 
    color: black; 
    font-size: 1.0em; 
    letter-spacing: 2px; 
} 
nav { 
    box-shadow: 1px 1px 10px rgba(166,166,166,.2); 
} 
nav ul { 
    background-color: rgba(253,235,193,.3); 
    overflow: visible; 
    color: white; 
    padding: 0; 
    text-align: center; 
    margin: 0; 
    position: relative; 
} 
nav ul li { 
    display: inline-block; 
    padding: 20px 40px; 
    position: relative; 
} 
nav ul ul { 
    display: none; 
} 
nav ul>li:hover { 
    background-color: rgba(253,235,193,.6);  
    text-align:center; 
} 
nav ul li:hover ul{ 
    display: block; 
    margin-top: 20px; 
} 
nav ul li:hover li{ 
    margin-left: -40px; 
    margin-top:-15px; 
    text-align: center; 
    float: left; 
    clear: left; 
} 

.portfolio_menu{position:absolute;top:100%;left:0;z-index:1000;display:none;float:left;min-width:160px;padding:5px 0;margin:2px 0 0;font-size:14px;text-align:left;list-style:none;background-color:#fff;-webkit-background-clip:padding-box;background-clip:padding-box;border:1px solid #ccc;border:1px solid rgba(0,0,0,.15);border-radius:4px;-webkit-box-shadow:0 6px 12px rgba(0,0,0,.175);box-shadow:0 6px 12px rgba(0,0,0,.175)}