html - 在导航栏中为 li 添加动画边框

Question

我正在尝试为我的 navbar 中的每个 li 项添加底部边框。然而，边框在 li 元素的实际内容下方创建了一个单独的线，即使我在 li 标签内给出了 div.nav-line 类也是如此。

   $(function() {
        $(".dropdown").hover(
            function() { $(this).addClass('open') },
            function() { $(this).removeClass('open') }
        );
    });

.navbar {
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3);
}

.navbar-default .navbar-nav {
  font-size: 15px;
}

.navbar-fixed-top {
  min-height: 80px;
}

.navbar-nav>li>a {
  padding-top: 0px;
  padding-bottom: 0px;
  line-height: 80px;
}

.dropdown-menu>.active>a,
.dropdown-menu>.active>a:hover,
.dropdown-menu>.active>a:focus {
  color: #ffffff;
  text-decoration: none;
  outline: 0;
  background-color: #b4a28f;
}

.navbar-nav>li>.nav-line {
  background-color: #3178b9;
  height: 2px;
  width: 0%;
  /*        -webkit-transition: all 100ms ease-out;
        -moz-transition: all 100ms ease-out;
        -o-transition: all 100ms ease-out;
        transition: all 100ms ease-out;*/
}

.navbar-nav>li:hover>.nav-line {
  background-color: #3178b9;
  height: 2px;
  width: 100%;
  -webkit-transition: all 150ms ease-in;
  -moz-transition: all 150ms ease-in;
  -o-transition: all 150ms ease-in;
  transition: all 150ms ease-in;
}

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css">

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapse" aria-expanded="false">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
      <a class="navbar-brand" href="">
        <!-- <img class="img img-responsive" src="www/images/srs-logo.jpg" alt="SRS Constructions"> -->
        SRS Constructions
      </a>
    </div>
    <div class="collapse navbar-collapse navbar-right" id="collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a class="main" href="#main">Home <span class="sr-only">(current)</span></a>
          <div class="nav-line"></div>
        </li>
        <li class="dropdown" id="nav-about">
          <a href="#about" class="dropdown-toggle main" role="button" aria-haspopup="true" aria-expanded="false">About
                            </a>
          <ul class="dropdown-menu" style="left:0;right: auto">
            <li><a href="about.html">The Founder</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="health-policy.html">HSE Policy</a></li>
            <li><a href="quality-policy.html">Quality Policy</a></li>
          </ul>
          <div class="nav-line"></div>
        </li>
        <li><a class="main" href="#services">Services</a>
          <div class="nav-line"></div>
        </li>
        <li><a class="main" href="#projects">Our Projects</a>
          <div class="nav-line"></div>
        </li>
        <li><a class="main" href="#whyus">Why Us</a>
          <div class="nav-line"></div>
        </li>
        <li><a class="main" href="#contact">Contact</a>
          <div class="nav-line"></div>
        </li>
      </ul>
    </div>
  </div>
</nav>

1. 我希望边框出现在 li 容器内，这样就没有跨越整个导航栏的额外线条(悬停时的背景颜色不会覆盖 li 元素的整个高度，因为存在 2px 的线条。 )。
2. 我不想要 active li 项的行。

请帮助我实现这一目标。

Answer 1

好的，下面的代码应该适合您使用:

我添加了以下内容 - li 的相对定位，navline 的绝对定位，以及事件 navline 的透明背景

$(function() {
        $(".dropdown").hover(
            function() { $(this).addClass('open') },
            function() { $(this).removeClass('open') }
        );
    });

.navbar {
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3);
}

.navbar-default .navbar-nav {
  font-size: 15px;
}

.navbar-fixed-top {
  min-height: 80px;
}

.navbar-nav>li {
    position:relative;
}
.navbar-nav>li>a {
  padding-top: 0px;
  padding-bottom: 0px;
  line-height: 80px;
}

.dropdown-menu>.active>a,
.dropdown-menu>.active>a:hover,
.dropdown-menu>.active>a:focus {
  color: #ffffff;
  text-decoration: none;
  outline: 0;
  background-color: #b4a28f;
}

.navbar-nav>li>.nav-line {
  position:absolute; 
  bottom:-1px;
  left:0;
  background-color: #3178b9;
  height: 2px;
  width: 0%;
  /*        -webkit-transition: all 100ms ease-out;
        -moz-transition: all 100ms ease-out;
        -o-transition: all 100ms ease-out;
        transition: all 100ms ease-out;*/
}
.navbar-nav>li:hover>.nav-line {
  background-color: #3178b9;
  height: 2px;
  width: 100%;
  -webkit-transition: all 150ms ease-in;
  -moz-transition: all 150ms ease-in;
  -o-transition: all 150ms ease-in;
  transition: all 150ms ease-in;
}


.navbar-nav>li.active>.nav-line {
    background-color:transparent;
}

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css">

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapse" aria-expanded="false">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
      <a class="navbar-brand" href="">
        <!-- <img class="img img-responsive" src="www/images/srs-logo.jpg" alt="SRS Constructions"> -->
        SRS Constructions
      </a>
    </div>
    <div class="collapse navbar-collapse navbar-right" id="collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a class="main" href="#main">Home <span class="sr-only">(current)</span></a>
          <div class="nav-line"></div>
        </li>
        <li class="dropdown" id="nav-about">
          <a href="#about" class="dropdown-toggle main" role="button" aria-haspopup="true" aria-expanded="false">About
                            </a>
          <div class="nav-line"></div>
          <ul class="dropdown-menu" style="left:0;right: auto">
            <li><a href="about.html">The Founder</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="health-policy.html">HSE Policy</a></li>
            <li><a href="quality-policy.html">Quality Policy</a></li>
          </ul>
        </li>
        <li><a class="main" href="#services">Services</a>
          <div class="nav-line"></div>
        </li>
        <li><a class="main" href="#projects">Our Projects</a>
          <div class="nav-line"></div>
        </li>
        <li><a class="main" href="#whyus">Why Us</a>
          <div class="nav-line"></div>
        </li>
        <li><a class="main" href="#contact">Contact</a>
          <div class="nav-line"></div>
        </li>
      </ul>
    </div>
  </div>
</nav>