ボーダートップを追加するときに要素が下に移動しないようにする方法

Question

リスト項目の上にマウスを置いたときにスニペットに表示されるように、上の境界線が追加されます。私の問題は、国境がリスト項目を2ピクセル下に移動させていることです。 hoverの間にリスト項目をそのまま残すにはどうすればいいですか？borderを追加しましたか？

#topnav { 
 
\t float: left; 
 
\t padding-top: 22px; 
 
\t width: 100%; 
 
\t text-align: center; 
 
\t font-size: .9em; 
 
\t background: #000000; 
 
\t font-family: Georgia, "Times New Roman", Times, serif; 
 
} 
 
#topnav li { 
 
\t display: inline-block; 
 
\t padding: 10px 12px 0 12px; 
 
} 
 
#topnav li:hover { 
 
\t border-top: 2px solid #0C3; 
 
\t color: #0C3; 
 
} 
 
#topnav a li { 
 
\t color: #FFF; 
 
\t line-height: 1.3em; 
 
}

<div id="topnav"> 
 
\t \t <ul> 
 
\t \t \t <a href="Spray-Foam-Parts-Repairs-Techs.php"><li class="last">TECH/PARTS/REPAIRS</li></a> 
 
\t \t \t <a href="Spray-Foam-school.php"><li>SPRAY FOAM SCHOOL</li></a> 
 
\t \t \t <a href="Used-For-sale-Spray-Foam-Insulation-Rigs-Machines.php"><li>USED/BUY/SELL</li></a> 
 
\t \t \t <a href="Spray-Foam-Rigs.php"><li>SPRAY FOAM RIGS</li></a> 
 
\t \t \t <a href="Spray-Foam-equipment.php"><li>SPRAY FOAM EQUIPMENT</li></a> 
 
\t \t </ul> 
 
\t \t </div>

Answer 1

。以下のスクリプトのようなあなたの:hover

#topnav li:hover { 
    border-top-color: #0C3; 
    color: #0C3; 
} 

で次に

#topnav li { 
    display: inline-block; 
    border-top: 2px solid transparent; 
    padding: 10px 12px 0 12px; 
} 

：

#topnav { 
 
\t float: left; 
 
\t padding-top: 22px; 
 
\t width: 100%; 
 
\t text-align: center; 
 
\t font-size: .9em; 
 
\t background: #000000; 
 
\t font-family: Georgia, "Times New Roman", Times, serif; 
 
} 
 
#topnav li { 
 
\t display: inline-block; 
 
    border-top: 2px solid transparent; 
 
\t padding: 10px 12px 0 12px; 
 
} 
 
#topnav li:hover { 
 
\t border-top-color: #0C3; 
 
\t color: #0C3; 
 
} 
 
#topnav a li { 
 
\t color: #FFF; 
 
\t line-height: 1.3em; 
 
}

<div id="topnav"> 
 
    <ul> 
 
    <a href="Spray-Foam-Parts-Repairs-Techs.php"> 
 
     <li class="last">TECH/PARTS/REPAIRS</li> 
 
    </a> 
 
    <a href="Spray-Foam-school.php"> 
 
     <li>SPRAY FOAM SCHOOL</li> 
 
    </a> 
 
    <a href="Used-For-sale-Spray-Foam-Insulation-Rigs-Machines.php"> 
 
     <li>USED/BUY/SELL</li> 
 
    </a> 
 
    <a href="Spray-Foam-Rigs.php"> 
 
     <li>SPRAY FOAM RIGS</li> 
 
    </a> 
 
    <a href="Spray-Foam-equipment.php"> 
 
     <li>SPRAY FOAM EQUIPMENT</li> 
 
    </a> 
 
    </ul> 
 
</div>

Answer 2

最も簡単な方法、あなたは2ピクセルを割くことができるかどうか - そこに国境のすべての時間を持っているが、それあなたがホバリングまでの背景と同じ色にします。あなたが#topnav li要素にデフォルトの境界線を設定し、それが国境を持っていないように見えるので、transparentに色を設定する必要が

#topnav { 
 
    float: left; 
 
    padding-top: 22px; 
 
    width: 100%; 
 
    text-align: center; 
 
    font-size: .9em; 
 
    background: #000000; 
 
    font-family: Georgia, "Times New Roman", Times, serif; 
 
} 
 
#topnav li { 
 
    display: inline-block; 
 
    border-top: 2px solid black; 
 
    padding: 10px 12px 0 12px; 
 
} 
 
#topnav li:hover { 
 
    border-top: 2px solid #0C3; 
 
    color: #0C3; 
 
} 
 
#topnav a li { 
 
    color: #FFF; 
 
    line-height: 1.3em; 
 
}

<div id="topnav"> 
 
    <ul> 
 
    <a href="Spray-Foam-Parts-Repairs-Techs.php"> 
 
     <li class="last">TECH/PARTS/REPAIRS</li> 
 
    </a> 
 
    <a href="Spray-Foam-school.php"> 
 
     <li>SPRAY FOAM SCHOOL</li> 
 
    </a> 
 
    <a href="Used-For-sale-Spray-Foam-Insulation-Rigs-Machines.php"> 
 
     <li>USED/BUY/SELL</li> 
 
    </a> 
 
    <a href="Spray-Foam-Rigs.php"> 
 
     <li>SPRAY FOAM RIGS</li> 
 
    </a> 
 
    <a href="Spray-Foam-equipment.php"> 
 
     <li>SPRAY FOAM EQUIPMENT</li> 
 
    </a> 
 
    </ul> 
 
</div>

Answer 3

あなたが同じ方向を保つが、ちょうどその時の行を追加したい場合ホバリング、あなたはパッドを補うことができますホバリング時に鳴る。例えば。

#topnav li:hover { 
    border-top: 2px solid #0C3; 
    color: #0C3; 
    padding-top: 8px; /* reduce top padding by 2px */ 
}