So erhalten Sie ein Element, das beim Hinzufügen von border-top nicht nach unten verschoben wird

Question

Wie Sie in meinem Snippet sehen können, wenn Sie den Mauszeiger über ein Listenelement bewegen, wird ein oberer Rahmen hinzugefügt. Mein Problem ist, dass der Rahmen die Listenelemente um 2pxs nach unten bewegt. Gibt es trotzdem, um die Listenelemente während mit der hinzugefügten border in ihrer Position zu bleiben?

#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

Sie haben eine Standard Grenze zum #topnav li Element zu setzen und die Farbe auf transparent so sieht es aus wie es keine Grenze hat.

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

Dann in Ihrem :hover

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

Wie das Skript unter:

#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

Der einfachste Weg, wenn Sie 2px erübrigen können - haben gerade die Grenze dort die ganze Zeit, aber es ist die gleiche Farbe wie der Hintergrund, bis Sie schweben.

#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

Wenn Sie die gleiche Orientierung behalten wollen aber nur die Zeile, wenn Schweben könnte man das Pad ausgleichen ding beim Schweben. Z.B.

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