尝试制作菜单分隔符破折号而不是实线

Question

尝试将菜单分隔符设为虚线而不是实线。我知道虚线代码，但不希望它从顶部栏的顶部一直延伸到底部，所以就在中间，因为示例就像这里的菜单：http://preview.themeforest.net/item/industrial-and-engineering/full_screen_preview/19013654?_ga=2.241886977.2083560788.1554387032-1316791551.1554387032 My website is: http://www.stephensengineering.com/stephens33/ 谢谢！ :)

左边框：1px 虚线#696969；

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>Horizontal Navigation Bar w/Rollover Effect</title> 
<style type="text/css"> 
<!-- 

#navbar ul { 
  height: inherit;
  /* margin: 0; REMOVE THIS*/
  margin-bottom: 0; /* Suggested */
  list-style-type: none;
  text-align: right; 
  background-color: #000; 
} 

/* Suggested for aesthetic reasons */
#navbar {
  background-color: #000;
}

#navbar ul li {  
    display: inline-block; 
    padding: 10px 4px;
  height: inherit;
  border-left: 1px solid #696969;
    } 

#navbar ul li a { 
    font-family: 'Montserrat';
    text-decoration: bold; 
    padding: .2em 1em; 
    color: #fff; 
/*     background-color: #000;  */
    } 

#navbar ul li:hover { 
    background-color: #000; 
    } 
#navbar ul li:hover a { 
    color: #fff !important; 
    } 
#navbar { background-color: #000; }
    #navbar{
    position: fixed;
    z-index: 100000; /*To bring the navbar to the top of the stacking context*/
    width: 100%;
    }
    nav.stricky-fixed.fadeInDown.animated{

   top:40px; /*Since this element is already set as relative in the original code,
              the top property places the slideIn menu 40px (height of black nav menu)
              from the top of the page.*/

  }

.social-icon-wrapper:nth-child(3) {
  border-right: 1px solid #696969;
}
    .social-icon-wrapper:hover {
  background-color: transparent !important;
}
.social-icon {
  width: 15px;
  vertical-align: top;
}

 .submit-btn {
  background-color: green !important;
  border-left: 1px solid #696969 !important;
  border-right: 1px solid #696969 !important;
  }
--> 
</style> 
</head> 
<body> 
<!--  -->
<div id="navbar"> 
  <ul class="container"> 
      <ul>
        <li  class="social-icon-wrapper" style="float:left"><a href="#about"><img class="social-icon" src="https://i.imgur.com/tonPA8V.png"></a></li><!--  --><li  class="social-icon-wrapper" style="float:left"><a href="#about"><img class="social-icon" src="https://i.imgur.com/fEvitJl.png"></a></li><!--  --><li  class="social-icon-wrapper" style="float:left"><a href="#about"><img class="social-icon" src="https://i.imgur.com/UiwMSrt.png"></a></li><!--  --><li><a href="mailto:project@stephensengineering.com">project@stephensengineering.com</a></li><!--  --><li><a href="tel:+18883000642">888-300-0642</a></li><!--  --><li><a href="http://www.stephensengineering.com/stephens33/stephens-university/">Stephens University</a></li><!--  --><li class="submit-btn" ><a href="http://www.stephensengineering.com/stephens33/submit-assignment/">Submit Assignment</a></li> 
      </ul>

Answer 1

只需更改 css 文件中的代码即可。

#navbar ul li {
  border-left: 1px dashed #696969;
}
.social-icon-wrapper:nth-child(3) {
  border-left: 1px dashed #696969;
}

Answer 2

试试这个。删除 #navbar ul li class 中的 border-left:1px dashed #696969 并在 #navbar ul li a class 中添加此 css，如下所示：

#navbar ul li a { 
    font-family: 'Montserrat';
    text-decoration: bold; 
    padding: .2em 1em; 
    color: #fff; 
    border-left:1px dashed #696969
} 
.social-icon-wrapper:nth-child(3) a {
    border-right: 1px dashed #696969;
}

尝试制作菜单分隔符破折号而不是实线

Trying to make menu separator dashes instead of solid

html

css

menu