CODEWITHSUNDEEP
htmlcss
Becky
Becky

Reputation: 2289

How to get an element to stay not move down when adding border-top

As you can see in my snippet whenever you hover over a list item, a top border is added. My issue is that the border is causing the list items to move down 2pxs. Is there anyway to get the list items to remain in their position during hover with the added border?

#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;
	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>

Upvotes: 1

Views: 34

Answers (3)

char
char

Reputation: 91

If you want to keep the same orientation but just add the line when hovering, you could compensate for the padding when hovering. E.g.

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

 

Upvotes: 2

dunli
dunli

Reputation: 1376

You have to set a default border to the #topnav li element and set the color to transparent so it looks like it doesn't have a border.

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

Then in your :hover

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

Like the script below:

#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 transparent;
	padding: 10px 12px 0 12px;
}
#topnav li:hover {
	border-top-color: #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>

Upvotes: 1

sideroxylon
sideroxylon

Reputation: 4416

Easiest way, if you can spare 2px - just have the border there all the time, but make it the same color as the background until you hover.

#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>

Upvotes: 2

Related Questions