以下のすべての位置を変更せずにナビゲーションホバーに下枠を追加してください

Question

ホバー内に下枠が表示されるようにしたいのですが、すべてのコンテンツを3px下に移動します。どのようにすべてのコンテンツを動かすことなく動作させるのですか？

ナビゲーションのCSS：

nav { 
    width: 80%; 
    margin: 0 auto; 

} 
nav ul { 
    list-style-type: none; 
} 
nav ul li { 
    float: left; 
    width: 19.7%; 
    background-color: #e88610; 
    text-align: center; 
    border-right: 3px solid gray; 
    border-top: 1px solid gray; 
} 
nav ul li:last-child { 
    border-right: none; 
    border-bottom-right-radius: 5px; 
} 
nav ul li:first-child { 
    border-bottom-left-radius: 5px; 
} 
nav ul li a { 
    text-decoration:none; 
    display: block; 
    padding: 10px 0px; 
    color: white; 
} 
nav ul li a:visited { 
    color: white; 
} 
nav ul li a:hover{ 
    background-color: orange; 
    border-bottom: 3px solid gray; 
} 

下記内容のCSS：

#novi_clanak { 
    background-color: rgba(255, 255, 255, 0.65); 
    width: 100%; 
    padding-bottom: 40px; 
    margin-top:35px; 
} 

Answer 1

をNAVに追加、あなたはNAVを拡張しています3pxずつhttp://www.w3schools.com/css/css3_box-sizing.aspにCSSのbox-sizingプロパティを見てください。 nav ul li a:hoverにbox-sizing: border-box;が必要です。下端の3ピクセルが要素の高さを考慮して設定されます。

また、nav ul li a:hoverの高さを3px（39pxに設定）に短縮します。

Answer 2

が境界線を追加することで、CSS

基本的に

position: fixed;