如何在css中为nav菜单设置border-left？

Question

这是我工作过的jsfiddle：http://jsfiddle.net/nalinc/rym2zku1/9/

nav ul,
nav ol {
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-item ul {
  padding: inherit;
  border: 1px solid black;
  text-align: left;
  border-radius: 4px;
}
.nav-item ul li:hover {
  background-color: #d1d1d1;
}
.nav-bar {
  text-align: center;
}
@media screen and (min-width: 769px) {
  .nav-bar--left {
    display: table;
    table-layout: fixed;
    width: 100%;
    text-align: left;
  }
  .nav-bar--left .grid-item {
    float: none;
    display: table-cell;
    vertical-align: middle;
  }
}
#nav {
  position: relative;
  display: block;
  list-style-type: none;
  padding: 0;
  margin: 20px 0;
  font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", sans-serif;
  white-space: nowrap;
}
.nav-bar--left #nav {
  margin: 1em 0 0;
  text-align: right;
}
@media screen and (max-width: 768px) {
  #nav,
  .nav-bar--left #nav {
    width: 100%;
    white-space: normal;
    margin: 20px 0 10px;
    text-align: inherit;
  }
}
.nav-item {
  position: relative;
  display: inline-block;
  padding: 2px 30px;
}
@media screen and (max-width: 768px) {
  .nav-item {
    padding: 10px 20px;
  }
}
#nav>.nav-item {
  border-left: 1px solid #e8e8e8;
}
#nav>.nav-item.first {
  border-left: none;
  padding-left: 0;
}
@media screen and (max-width: 768px) {
  #nav>.nav-item {
    border: 0 none;
  }
}
.nav-item-link {
  display: inline-block;
  color: #211f1f;
  font-size: 14px;
  zoom: 1;
  *display: inline;
}
.nav-item-link:hover {
  color: #333;
}
.nav-item-link .nav-item.active .nav-item-link {
  color: #333333;
}
.sub-nav .sub-nav {
  display: none !important;
}
.supports-no-csstransforms .sub-nav {
  white-space: normal;
  width: 200px;
  margin-left: -100px;
}
.sub-nav:before {
  content: '';
  display: block;
  position: absolute;
  top: 5px;
  right: 47%;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid #211f1f;
  z-index: 40;
}
.sub-nav-item,
#moreMenu--list .nav-item {
  display: block;
  overflow: hidden;
  padding: 0;
  margin: 0;
  background-color: #211f1f;
}
.sub-nav-item.first,
#moreMenu--list .nav-item:first-child {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}
.sub-nav-item.last,
#moreMenu--list .nav-item:last-child {
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
}
.sub-nav-item-link,
#moreMenu--list .nav-item .nav-item-link {
  display: block;
  padding: 15px 20px;
  margin: 0;
  color: #ffffff;
  text-align: center;
  border-top: 1px solid #0b0a0a;
}
.sub-nav-item-link.first,
.sub-nav-item-link:first-child,
#moreMenu--list .nav-item .nav-item-link.first,
#moreMenu--list .nav-item .nav-item-link:first-child {
  border-top: none;
}
.sub-nav-item-link:hover,
.sub-nav-item-link:focus,
#moreMenu--list .nav-item .nav-item-link:hover,
#moreMenu--list .nav-item .nav-item-link:focus {
  color: #ffffff;
  border-top: 1px solid #0b0a0a;
  background-color: #0b0a0a;
}
.sub-nav-item-link:hover.first,
.sub-nav-item-link:hover:first-child,
.sub-nav-item-link:focus.first,
.sub-nav-item-link:focus:first-child,
#moreMenu--list .nav-item .nav-item-link:hover.first,
#moreMenu--list .nav-item .nav-item-link:hover:first-child,
#moreMenu--list .nav-item .nav-item-link:focus.first,
#moreMenu--list .nav-item .nav-item-link:focus:first-child {
  border-top: none;
}
#nav {
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  text-align: center
}
#nav a {
  text-decoration: none;
  color: #666;
  display: inline-block;
  padding: 10px;
  font-size: 13px;
}
#nav ul {
  position: absolute;
  top: 100%;
  left: 0;
  text-align: left;
  width: 170px;
  border: 1px solid #ccc;
  display: none;
}
#nav li:hover ul {
  display: block;
}

<nav id="navWrap" role="navigation">
  <ul id="nav">
    <li class="nav-item first active">
      <a class="nav-item-link" href="/">Home</a>                
    </li>
    <li class="nav-item">
      <a class="nav-item-link" href="catalog.html">Catalog</a>  
      <ul>
        <li><a href="#">Data Listing</a></li>
        <li><a href="#">Web Scheduling</a></li>
        <li><a href="#">Google Maps Application</a></li>
      </ul>         
    </li>
    <li class="nav-item">
      <a class="nav-item-link" href="/blogs/news">Blog</a>                
    </li>
    <li class="nav-item">
      <a class="nav-item-link" href="/pages/about-us">About Us</a>                
    </li>
  </ul>
</nav>

现在我需要为每个列表border-left。

我需要这样的形象：

当我添加border-left时，会在border-bottom中触及。

#nav ul {
    position: absolute;
    top: 100%;
    left: 0;
    text-align: left;
    width: 170px;
    border: 1px solid #ccc;
    display: none;
}

任何人都可以帮我解决这个问题吗？提前谢谢。

Answer 1

box-shadow hack！

DEMO：http://jsfiddle.net/rym2zku1/29/

其他CSS

.nav-item:not(:last-child) {
    -webkit-box-shadow: 10px 0px 0px -9px red;
       -moz-box-shadow: 10px 0px 0px -9px red;
            box-shadow: 10px 0px 0px -9px red;
}

垂直条红色以更好地突出显示解决方案

<强>结果

<强>解释

我们[ab]使用CSS box-shadow属性在.nav-item元素周围绘制部分边框。

＆＃34; pieces＆＃34; CSS的描述可以描述如下：

1. 水平偏移我们希望阴影坐在多远的位置？
2. 垂直偏移量我们希望阴影位于底部多远？
3. 模糊半径阴影想要的锐度是多少？
4. 展开半径阴影从其边缘扩散多远？
5. 的颜色

这里的黑客是阴影向右移动10px，但是差价（-9px）对此有效并且有效地将它拉回来＃34;再次。这种扩散的减少发生在所有方面，因此我们得到了9px＆＃34;拉回＆＃34;从元素的全高度来看。

Answer 2

将#nav a更改为

#nav a {
    border-right: 1px solid #ccc;
    color: #666;
    display: inline-block;
    font-size: 13px;
    padding: 10px;
    text-decoration: none;
}

Answer 3

您只需进行必要的更改

li {
         border-left:1px solid #ccc;
    }

http://jsfiddle.net/rym2zku1/17/

Answer 4

This应该有用。

您的CSS（已更新）：

nav ul,nav ol {
  list-style: none;
  margin: 0;
  padding: 0;
}
  .nav-item  ul{
      padding:inherit;
      border: 1px solid black;
      text-align:left;
      border-radius:4px;
    }
  .nav-item  ul li:hover{
      background-color:#d1d1d1;
    }
.nav-bar {
  text-align: center;
}
@media screen and (min-width: 769px) {
  .nav-bar--left {
    display: table;
    table-layout: fixed;
    width: 100%;
    text-align: left;
  }

  .nav-bar--left .grid-item {
    float: none;
    display: table-cell;
    vertical-align: middle;
  }
}
#nav {
  position: relative;
  display: block;
  list-style-type: none;
  padding: 0;
  margin: 20px 0;
  font-family: "Raleway","HelveticaNeue","Helvetica Neue",sans-serif;
  white-space: nowrap;
}

.nav-bar--left #nav {
  margin: 1em 0 0;
  text-align: right;
}

@media screen and (max-width: 768px) {
  #nav,.nav-bar--left #nav {
    width: 100%;
    white-space: normal;
    margin: 20px 0 10px;
    text-align: inherit;
  }
}

.nav-item {
  position: relative;
  display: inline-block;
  padding: 2px 30px;
}

@media screen and (max-width: 768px) {
  .nav-item {
    padding: 10px 0;
  }
}

#nav>.nav-item {
  border-left: 1px solid #e8e8e8;
}

#nav>.nav-item.first {
  border-left: none;
  padding-left: 0;
}

@media screen and (max-width: 768px) {
  #nav>.nav-item {
    border: 0 none;
  }
}

.nav-item-link {
  display: inline-block;
  color: #211f1f;
  font-size: 14px;
  zoom: 1;
  *display: inline;
}

.nav-item-link:hover {
  color: #333;
}

.nav-item-link .nav-item.active .nav-item-link {
  color: #333333;
}

.sub-nav .sub-nav {
  display: none !important;
}
.supports-no-csstransforms .sub-nav {
  white-space: normal;
  width: 200px;
  margin-left: -100px;
}

.sub-nav:before {
  content: '';
  display: block;
  position: absolute;
  top: 5px;
  right: 47%;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid #211f1f;
  z-index: 40;
}


.sub-nav-item,#moreMenu--list .nav-item {
  display: block;
  overflow: hidden;
  padding: 0;
  margin: 0;
  background-color: #211f1f;
}

.sub-nav-item.first,#moreMenu--list .nav-item:first-child {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

.sub-nav-item.last,#moreMenu--list .nav-item:last-child {
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
}

.sub-nav-item-link,#moreMenu--list .nav-item .nav-item-link {
  display: block;
  padding: 15px 20px;
  margin: 0;
  color: #ffffff;
  text-align: center;
  border-top: 1px solid #0b0a0a;
}

.sub-nav-item-link.first,.sub-nav-item-link:first-child,#moreMenu--list .nav-item .nav-item-link.first,#moreMenu--list .nav-item .nav-item-link:first-child {
  border-top: none;
}

.sub-nav-item-link:hover,.sub-nav-item-link:focus,#moreMenu--list .nav-item .nav-item-link:hover,#moreMenu--list .nav-item .nav-item-link:focus {
  color: #ffffff;
  border-top: 1px solid #0b0a0a;
  background-color: #0b0a0a;
}

.sub-nav-item-link:hover.first,.sub-nav-item-link:hover:first-child,.sub-nav-item-link:focus.first,.sub-nav-item-link:focus:first-child,#moreMenu--list .nav-item .nav-item-link:hover.first,#moreMenu--list .nav-item .nav-item-link:hover:first-child,#moreMenu--list .nav-item .nav-item-link:focus.first,#moreMenu--list .nav-item .nav-item-link:focus:first-child {
  border-top: none;
}
#nav {
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    text-align: center
}
#nav a {
    text-decoration: none;
    color: #666;
    display: inline-block;
    padding: 10px;
    font-size: 13px;
    border-left : 1px solid #ccc
}
#nav ul {
    position: absolute;
    top: 100%;
    left: 0;
    text-align: left;
    width: 170px;
    border: 1px solid #ccc;
    display: none;
}

#nav li:hover ul {
    display: block;
}
#nav ul li a {
    border-left: 0 none;
}

Answer 5

您想要的边框位于您自己添加的填充（padding: 2px 30px;）内，如下所示： 这样可以避免实现它。

.nav-item {
  position: relative;
  display: inline-block;
  padding: 2px 30px;
}

如果您在#nav li内提供边框，则可以达到此目的。 这是我尝试的修复程序（在CSS中添加以下代码）：

#nav li.nav-item{
    border-left:3px solid #000;
}

查看我的 DEMO ;

Answer 6

您可以为此使用伪元素。一个简单的解决方案是将:before伪元素与first-child选择器结合使用。除了第一个孩子之外，这样您就可以添加内容了

＆＃13;

＆＃13;

ul{
list-style:none;
  background:lightgray;
  padding:5px;
  border-bottom:1px solid gray;
}
ul li{
display:inline-block;
  position:relative;
  padding-left:10px;
  padding-right:10px;
  transition:all 0.4s;
}

ul li:before{
  content:"|";
  position:absolute;
  left:-10%;
  top:0;
  }

ul li:first-child:before{
  content:"";
  }

ul li:hover{
  background:darkgray;
  color:white;
  }

＆＃13;

<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
</ul>

＆＃13;

＆＃13;

＆＃13;

---

替代

---

您可能希望以不同的方式使用伪，而不是使用实际的|：

＆＃13;

＆＃13;

ul {
  list-style: none;
  background: lightgray;
  padding: 5px;
  border-bottom: 1px solid gray;
}
ul li {
  display: inline-block;
  position: relative;
  padding-left: 10px;
  padding-right: 10px;
  transition: all 0.4s;
}
ul li:before {
  content: "";
  height: 100%;
  width: 2px;
  background: gray;
  position: absolute;
  left: -10%;
  top: 0;
  transition: all 0.4s;
}
ul li:first-child:before {
  display: none;
}
ul li:hover {
  background: darkgray;
  color: white;
}
ul li:hover:before {
  transform: rotate(90deg);
  background:black;
}

＆＃13;

<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
</ul>

＆＃13;

＆＃13;

＆＃13;

Answer 7

您应该将左边框添加到a的直接子项（.nav-item）。然后删除第一个a内.nav-item的边框。您必须弄乱li和a元素的填充和文本对齐，以使左边框的间距和高度看起来正确。

.nav-item:first-child > a {
    border: 0;
}
.nav-item > a {
    border-left: 1px solid #ccc;
}

Answer 8

添加

#nav > li {position: relative}
#nav > li:before {width: 1px; height: 25px; position: absolute; top: 15px; left: 0px; background: #ccc; content: ""}
#nav > li.first:before {display: none} 

Example here

Answer 9

我会做类似的事情，然后将媒体查询中的min-width更改为适合您网站的最佳内容。

＆＃13;

＆＃13;

nav ul,nav ol {
  list-style: none;
  margin: 0;
  padding: 0;
}
  .nav-item  ul{
      padding:inherit;
      border: 1px solid black;
      text-align:left;
      border-radius:4px;
    }
  .nav-item  ul li:hover{
      background-color:#d1d1d1;
    }
.nav-bar {
  text-align: center;
}
@media screen and (min-width: 769px) {
  .nav-bar--left {
    display: table;
    table-layout: fixed;
    width: 100%;
    text-align: left;
  }

  .nav-bar--left .grid-item {
    float: none;
    display: table-cell;
    vertical-align: middle;
  }
}
#nav {
  position: relative;
  display: block;
  list-style-type: none;
  padding: 0;
  margin: 20px 0;
  font-family: "Raleway","HelveticaNeue","Helvetica Neue",sans-serif;
  white-space: nowrap;
}

.nav-bar--left #nav {
  margin: 1em 0 0;
  text-align: right;
}

@media screen and (max-width: 768px) {
  #nav,.nav-bar--left #nav {
    width: 100%;
    white-space: normal;
    margin: 20px 0 10px;
    text-align: inherit;
  }
}

.nav-item {
  position: relative;
  display: inline-block;
  padding: 2px 30px;
}

@media screen and (max-width: 768px) {
  .nav-item {
    padding: 10px 20px;
  }
}

#nav>.nav-item.first {
  border-left: none;
  padding-left: 0;
}

@media screen and (max-width: 768px) {
  #nav>.nav-item {
    border: 0 none;
  }
}

.nav-item-link {
  display: inline-block;
  color: #211f1f;
  font-size: 14px;
  zoom: 1;
  *display: inline;
}

.nav-item-link:hover {
  color: #333;
}

.nav-item-link .nav-item.active .nav-item-link {
  color: #333333;
}

.sub-nav .sub-nav {
  display: none !important;
}
.supports-no-csstransforms .sub-nav {
  white-space: normal;
  width: 200px;
  margin-left: -100px;
}

.sub-nav:before {
  content: '';
  display: block;
  position: absolute;
  top: 5px;
  right: 47%;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid #211f1f;
  z-index: 40;
}


.sub-nav-item,#moreMenu--list .nav-item {
  display: block;
  overflow: hidden;
  padding: 0;
  margin: 0;
  background-color: #211f1f;
}

.sub-nav-item.first,#moreMenu--list .nav-item:first-child {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

.sub-nav-item.last,#moreMenu--list .nav-item:last-child {
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
}

.sub-nav-item-link,#moreMenu--list .nav-item .nav-item-link {
  display: block;
  padding: 15px 20px;
  margin: 0;
  color: #ffffff;
  text-align: center;
  border-top: 1px solid #0b0a0a;
}

.sub-nav-item-link.first,.sub-nav-item-link:first-child,#moreMenu--list .nav-item .nav-item-link.first,#moreMenu--list .nav-item .nav-item-link:first-child {
  border-top: none;
}

.sub-nav-item-link:hover,.sub-nav-item-link:focus,#moreMenu--list .nav-item .nav-item-link:hover,#moreMenu--list .nav-item .nav-item-link:focus {
  color: #ffffff;
  border-top: 1px solid #0b0a0a;
  background-color: #0b0a0a;
}

.sub-nav-item-link:hover.first,.sub-nav-item-link:hover:first-child,.sub-nav-item-link:focus.first,.sub-nav-item-link:focus:first-child,#moreMenu--list .nav-item .nav-item-link:hover.first,#moreMenu--list .nav-item .nav-item-link:hover:first-child,#moreMenu--list .nav-item .nav-item-link:focus.first,#moreMenu--list .nav-item .nav-item-link:focus:first-child {
  border-top: none;
}
#nav {
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    text-align: center
}
#nav a {
    text-decoration: none;
    color: #666;
    display: inline-block;
    padding: 10px;
    font-size: 13px;
}
#nav ul {
    position: absolute;
    top: 100%;
    left: 0;
    text-align: left;
    width: 170px;
    border: 1px solid #ccc;
    display: none;
}

#nav li:hover ul {
    display: block;
}






/**
 * NEW CODE HERE
**/

@media (min-width: 800px) {
  #nav > li {
    position: relative;
  }
  #nav > li:before {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    content: "";
    width: 1px;
    height: 15px;
    background: #ccc;
    display: block;
  }

  #nav .first:before {
    content: normal;
  }
}

＆＃13;

 <nav id="navWrap" role="navigation">
   <ul id="nav">
     <li class="nav-item first active">
       <a class="nav-item-link" href="/">Home</a>                
     </li>
     <li class="nav-item">
       <a class="nav-item-link" href="catalog.html">Catalog</a>  
       <ul>
         <li><a href="#">Data Listing</a></li>
         <li><a href="#">Web Scheduling</a></li>
         <li><a href="#">Google Maps Application</a></li>
       </ul>         
     </li>

     <li class="nav-item">
       <a class="nav-item-link" href="/blogs/news">Blog</a>                
     </li>
     <li class="nav-item">
       <a class="nav-item-link" href="/pages/about-us">About Us</a>                
     </li>
   </ul>
</nav>

＆＃13;

＆＃13;

＆＃13;

Answer 10

您需要添加一些边距才能将其与容器的顶部/底部边框分开：

#nav>.nav-item {
   margin:20px 0;
}

Answer 11

Border-left: 1px solid #ccc; 

它应该工作，它应该完全按照您在图像中的要求出现。

希望您使用一个好的IDE来编写您的HTML和CSS。我使用Microsoft visual studio或sublime text。当您无法记住大多数HTML或CSS标签时，它们可以轻松地帮助您。

Answer 12

 #nav {
     display:inline-block;
    border-bottom: 1px solid #ccc;
    padding: 10px 0;
 }

#nav li {
    display:inline-block;

    padding-left:20px;
    padding-right:20px;
    border-left : 1px solid #ccc;
    list-style:none;
}

#nav .first {
    border:none;
}

.nav-item ul { display:none;}

 <nav id="navWrap" role="navigation">
                  <ul id="nav">
                     <li class="nav-item first active">
                        <a class="nav-item-link" href="/">Home</a>                
                     </li>
			 <li class="nav-item">
                        <a class="nav-item-link" href="catalog.html">Catalog</a>  
				<ul>
				   <li><a href="#">Data Listing</a></li>
				   <li><a href="#">Web Scheduling</a></li>
				   <li><a href="#">Google Maps Application</a></li>
				</ul>         
			  </li>

                     <li class="nav-item">
                        <a class="nav-item-link" href="/blogs/news">Blog</a>                
                     </li>
                     <li class="nav-item">
                        <a class="nav-item-link" href="/pages/about-us">About Us</a>                
                     </li>
                  </ul>
               </nav>

这样做

Answer 13

我更新的代码在css中有一些变化，并且它按照您的要求工作

nav#navWrap {

margin: 0 auto;
}
		nav ul,nav ol {
  list-style: none;
  margin: 0;
  padding: 0;
}
  .nav-item  ul{
      padding:5px;
      border: 1px solid black;
      text-align:left;
      border-radius:4px;
    }
  .nav-item  ul li:hover{
      background-color:#d1d1d1;
    }
.nav-bar {
  text-align: center;
}
@media screen and (min-width: 769px) {
  .nav-bar--left {
    display: table;
    table-layout: fixed;
    width: 100%;
    text-align: left;
  }

  .nav-bar--left .grid-item {
    float: none;
    display: table-cell;
    vertical-align: middle;
  }
}
#nav {
  position: relative;
  display: block;
  list-style-type: none;
  padding: 0;
  margin:10px 20px 0;
  font-family: "Raleway","HelveticaNeue","Helvetica Neue",sans-serif;
  white-space: nowrap;
}

.nav-bar--left #nav {
  margin: 1em 0 0;
  text-align: right;
}

@media screen and (max-width: 768px) {
  #nav,.nav-bar--left #nav {
    width: 100%;
    white-space: normal;
    margin: 20px 0 10px;
    text-align: inherit;
  }
}

.nav-item {
  position: relative;
  display: inline-block;
  padding: 10px 30px 20px 30px;
}

@media screen and (max-width: 768px) {
  .nav-item {
    padding: 20px;
  }
}

#nav>.nav-item>a {
  border-right: 1px solid #e8e8e8;
}
#nav .nav-item:last-child a{
	border-right: none;
}

#nav>.nav-item.first {
  border-left: none;
  padding-left: 0;
}

@media screen and (max-width: 768px) {
  #nav>.nav-item {
    border: 0 none;
  }
}

.nav-item-link {
  display: inline-block;
  color: #211f1f;
  font-size: 14px;
  zoom: 1;
  *display: inline;
}

.nav-item-link:hover {
  color: #333;
}

.nav-item-link .nav-item.active .nav-item-link {
  color: #333333;
}

.sub-nav .sub-nav {
  display: none !important;
}
.supports-no-csstransforms .sub-nav {
  white-space: normal;
  width: 200px;
  margin-left: -100px;
}

.sub-nav:before {
  content: '';
  display: block;
  position: absolute;
  top: 5px;
  right: 47%;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid #211f1f;
  z-index: 40;
}


.sub-nav-item,#moreMenu--list .nav-item {
  display: block;
  overflow: hidden;
  padding: 0;
  margin: 0;
  background-color: #211f1f;
}

.sub-nav-item.first,#moreMenu--list .nav-item:first-child {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

.sub-nav-item.last,#moreMenu--list .nav-item:last-child {
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
}

.sub-nav-item-link,#moreMenu--list .nav-item .nav-item-link {
  display: block;
  padding: 15px 20px;
  margin: 0;
  color: #ffffff;
  text-align: center;
  border-top: 1px solid #0b0a0a;
}

.sub-nav-item-link.first,.sub-nav-item-link:first-child,#moreMenu--list .nav-item .nav-item-link.first,#moreMenu--list .nav-item .nav-item-link:first-child {
  border-top: none;
}

.sub-nav-item-link:hover,.sub-nav-item-link:focus,#moreMenu--list .nav-item .nav-item-link:hover,#moreMenu--list .nav-item .nav-item-link:focus {
  color: #ffffff;
  border-top: 1px solid #0b0a0a;
  background-color: #0b0a0a;
}

.sub-nav-item-link:hover.first,.sub-nav-item-link:hover:first-child,.sub-nav-item-link:focus.first,.sub-nav-item-link:focus:first-child,#moreMenu--list .nav-item .nav-item-link:hover.first,#moreMenu--list .nav-item .nav-item-link:hover:first-child,#moreMenu--list .nav-item .nav-item-link:focus.first,#moreMenu--list .nav-item .nav-item-link:focus:first-child {
  border-top: none;
}
#nav {
     border-bottom: 1px solid #e8e8e8;
    text-align: center
}
#nav a {
    text-decoration: none;
    color: #666;
    display: inline-block;
    padding: 5px 25px 5px 10px;
    font-size: 13px;
}
#nav ul {
    position: absolute;
    top: 100%;
    left: 0;
    text-align: left;
    width: 170px;
    border: 1px solid #ccc;
    display: none;
}

#nav li:hover ul {
    display: block;
}

<nav id="navWrap" role="navigation">
			<ul id="nav">
				<li class="nav-item first active">
					<a class="nav-item-link" href="/">Home</a>
				</li>
				<li class="nav-item">
					<a class="nav-item-link" href="catalog.html">Catalog</a>
					<ul>
						<li>
							<a href="#">Data Listing</a>
						</li>
						<li>
							<a href="#">Web Scheduling</a>
						</li>
						<li>
							<a href="#">Google Maps Application</a>
						</li>
					</ul>
				</li>

				<li class="nav-item">
					<a class="nav-item-link" href="/blogs/news">Blog</a>
				</li>
				<li class="nav-item">
					<a class="nav-item-link" href="/pages/about-us">About Us</a>
				</li>
			</ul>
		</nav>

Answer 14

这可能有效：

#nav > li{
 padding:10px 0;
}

#nav > li > a{ 
    padding:5px 20px; /* optional your choice here */
     border-left:1px solid #ccc;   
}
#nav > li:first-child > a{
     border-left:0;   
}

Answer 15

我相信这是导致左边框不出现的原因

#nav>.nav-item.first {
border-left: none;
padding-left: 0;
}

删除左边框和左边框确实显示了Home

的左边框

Answer 16

你可以试试这种边界左边的伎俩。转到你的jsfiddle并删除CSS中的＃68,69,70行并将我的代码粘贴到那个地方。我希望你正在寻找类似的东西。

#nav>.nav-item {
    position: relative;
}

#nav>.nav-item:last-child:after {
    content: none;
}
#nav>.nav-item:after {
  content: "";
    position: absolute;
    right:0;
    top: 3px;
    height: 80%;
    width: 1px;
    background: #a8a8a8;
}

并且不要忘记将以下代码粘贴到您不想要该边框的视口中。

#nav>.nav-item {
   content: none;
}

Answer 17

要向左添加边框，请使用此方法

li {
     border-left:1px solid gray;
}

上面的代码会在菜单左侧创建1px纯灰色。

通过子元素

为每个li添加不同的颜色，你可以更加时尚 像这样

li:nth-child(n)
{
         border-left:1px solid gray;
}

n 代表li的数量

使用子元素

检查此示例

＆＃13;

＆＃13;

 #nav {
     display:inline-block;
 }

#nav li {
    display:inline-block;

    padding-left:20px;
    padding-right:20px;
    border-left : 1px solid #ccc;
    list-style:none;
}

#nav li:nth-child(1) {
    border-left: 4px solid green}
#nav li:nth-child(2) {
    border-left: 4px solid darkgoldenrod}
#nav li:nth-child(3) {
    border-left: 4px solid dodgerblue}
#nav li:nth-child(4) {
    border-left: 4px solid firebrick}
.nav-item ul { display:none;}

＆＃13;

 <nav id="navWrap" role="navigation">
                  <ul id="nav">
                     <li class="nav-item first active">
                        <a class="nav-item-link" href="/">Home</a>                
                     </li>
			 <li class="nav-item">
                        <a class="nav-item-link" href="catalog.html">Catalog</a>  
				<ul>
				   <li><a href="#">Data Listing</a></li>
				   <li><a href="#">Web Scheduling</a></li>
				   <li><a href="#">Google Maps Application</a></li>
				</ul>         
			  </li>

                     <li class="nav-item">
                        <a class="nav-item-link" href="/blogs/news">Blog</a>                
                     </li>
                     <li class="nav-item">
                        <a class="nav-item-link" href="/pages/about-us">About Us</a>                
                     </li>
                  </ul>
               </nav>

＆＃13;

＆＃13;

＆＃13;

Answer 18

删除

@media screen and (max-width: 768px)
#nav>.nav-item {
border: 0 none;
}

和 .nav-item 更改

padding: 0 20px;
margin: 15px auto;