CODEWITHSUNDEEP
htmlcss
derrickogole
derrickogole

Reputation: 127

How do I add a bottom border under contact in my vertical navigation bar using css?

I am learning to code and can't seem to apply a 1px solid border-bottom under contact.

And if I do, the other bottom borders above become bolder as if they are double bordering. 

 #navbar ul {
  list-style-type: none;
  margin: 0px;
  padding: 0px;
}

#navbar li a {
  display: block;
  width: 60px;
  padding: 16px 32px;
  text-decoration: none;
  text-align: center;
  color: black;
  border: 1px solid black;
}

#navbar a:hover {
  background-color: black;
  color: white;
}

#navbar a:last-child {
  border-bottom: none;
}

Image of the current result of vertical navigation bar

<div>
      <ul id="navbar">
        <li><a href="index.html">Home</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="models.html">Models</a></li>
        <li><a href="services.html">Services</a></li>
        <li><a href="contact.html">Contact</a></li>
      </ul>
    </div>

Upvotes: 0

Views: 145

Answers (1)

Douglas Riddle
Douglas Riddle

Reputation: 873

You need your last-child selector on the li element.

#navbar li a {
  display: block;
  width: 60px;
  padding: 16px 32px;
  text-decoration: none;
  text-align: center;
  color: black;
  border: 1px solid black;
  border-bottom: none; /* add this */
}

#navbar li:last-child a {
  border-bottom: 1px solid black;
}

See :last-child at css-tricks.com for more information

Upvotes: 1

Related Questions