CODEWITHSUNDEEP
htmlcss
rufus
rufus

Reputation: 857

How to add space after border in css

I have created a simple navigation that seem to work ok. There is one thing that is really bugging me though. On the last dropdown item i would like some space after the border but cant quite work out how to get it. I have tried putting some bottom padding on the dropdown li but it doesnt seem to work.

Really appreciate any advice to where i am going wrong.

https://jsfiddle.net/rufusbear/hv8gwwg9/

<!doctype html>

<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Fennes Clay</title>
  <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400" rel="stylesheet">
  <link rel="stylesheet" href="css/jquery.bxslider.css">
  <script src="https://use.fontawesome.com/9c815a24d9.js"></script>

  <style>
    .nav-wrap {
      max-width: 700px;
      margin: 0 auto;
      background-color: #718373;
      height: 80px;
      text-transform: uppercase;
    }

    .dropdown {
      display: none;
      padding: 0;
      margin: 0;
      position: absolute;
      top: 100%;
      left: 0;
    }

    .dropdown li a {
      width: 110px;
      height: 40px;
      line-height: 40px;
      margin: 0 auto;
      padding: 5px 10px;
    }

    .nav-list {
      margin: 0;
      padding: 0;
    }

    .nav-list li {
      position: relative;
      list-style: none;
      float: left;
      width: 150px;
      line-height: 80px;
      text-align: center;
      background-color: #718373;
    }

    .nav-list li a {
      text-decoration: none;
      color: white;
      display: block;
    }

    .nav-list li:hover>.dropdown {
      display: block;
    }

    .dropdown li a:hover {
      border: 2px solid white;
    }
  </style>
</head>
<body>
  <nav>
    <div class="nav-wrap">
      <ul class="nav-list">
        <li><a href="#">about</a>
          <ul class="dropdown">
            <li><a href="#">hello</a></li>
            <li><a href="#">hello</a></li>
            <li><a href="#">hello</a></li>
            <li><a href="#">hello</a></li>
          </ul>
        </li>
        <li><a href="#">about</a></li>
        <li><a href="#">about</a></li>
        <li><a href="#">about</a></li>
      </ul>
    </div>
  </nav>
</body>
</html>

Upvotes: 0

Views: 448

Answers (4)

Johannes
Johannes

Reputation: 67748

Add this rule:

.nav-list li ul li:last-child {
  padding-bottom: 15px;
}

It adds padding-bottom only to the last li of each nested ul inside the .nav-list (Adjust the px amount as you need it)

Here it is in a fiddle: https://jsfiddle.net/8w67f9y7/2/

Upvotes: 0

3rdthemagical
3rdthemagical

Reputation: 5350

You can add

background-color: #718373;
padding-bottom: 20px;

to .dropdown element.

To prevent links from shaiking on hover replace

.dropdown li a:hover {
  border: 2px solid white;
}

with

.dropdown li a:hover {
  outline: 2px solid white;
  outline-offset: -2px;
}


    .nav-wrap {
      max-width: 700px;
      margin: 0 auto;
      background-color: #718373;
      height: 80px;
      text-transform: uppercase;
    }
    
    .dropdown {
      display: none;
      padding: 0;
      margin: 0;
      position: absolute;
      top: 100%;
      left: 0;
      
      background-color: #718373;
      padding-bottom: 20px;
    }
    
    .dropdown li a {
      width: 110px;
      height: 40px;
      line-height: 40px;
      margin: 0 auto;
      padding: 5px 10px;
    }
    
    .nav-list {
      margin: 0;
      padding: 0;
    }
    
    .nav-list li {
      position: relative;
      list-style: none;
      float: left;
      width: 150px;
      line-height: 80px;
      text-align: center;
      background-color: #718373;
    }
    
    .nav-list li a {
      text-decoration: none;
      color: white;
      display: block;
    }
    
    .nav-list li:hover>.dropdown {
      display: block;
    }
    
    .dropdown li a:hover {
      outline: 2px solid white;
      outline-offset: -2px;
    }
 <nav>
    <div class="nav-wrap">
      <ul class="nav-list">
        <li><a href="#">about</a>
          <ul class="dropdown">
            <li><a href="#">hello</a></li>
            <li><a href="#">hello</a></li>
            <li><a href="#">hello</a></li>
            <li><a href="#">hello</a></li>
          </ul>
        </li>
        <li><a href="#">about</a></li>
        <li><a href="#">about</a></li>
      </ul>
    </div>
  </nav>

Upvotes: 1

Ahmad Afzaal
Ahmad Afzaal

Reputation: 23

check with this one

https://jsfiddle.net/rufusbear/hv8gwwg9/

  margin-top: 30px;

Upvotes: -1

Matt Wilson
Matt Wilson

Reputation: 8309

Is this what you're after?

.dropdown li:last-child a {
  margin-bottom: 10px;
}

Upvotes: 2

Related Questions