html - CSS 虚线边框

Question

我想在“子”div 周围有一个虚线边框。如下所示:

<div class="navigation">

    <div class="dropdown orange" align="center">                
        <a href="" class="box">ABOUT US</a>
        <div class="sub"> 
            <a href="">STAFF</a>
            <a href="">POLICY</a>
            <a href="">NEWSLETTER</a>
        </div>
    </div>

</div>  

所以我有 CSS:

.navigation .dropdown .sub{
    border: 5px dotted #F28845;
}

但是出现的边框是实心的……？

这是一个 fiddle :https://jsfiddle.net/1y0vunc8/1/

感谢您的帮助。

Answer 1

因为它与您的 div .dropdown orange 颜色相同。因此 dropdown orange 的 background-color 与 .sub

的 border 混合在一起

这是一个不同颜色的片段:

.navigation {
  margin-top: 20px;
  width: 980px;
}
.navigation .dropdown {
  display: inline-block;
  margin-right: 12px;
  vertical-align: top;
}
/*.navigation .dropdown .sub{
	visibility:hidden;
}
.navigation .dropdown:hover .sub{
	visibility:visible;
}*/

.navigation .dropdown:last-child {
  margin: 0px;
}
.navigation .dropdown a {
  display: table;
  text-align: center;
  text-decoration: none;
}
.navigation .dropdown a:not(.box) {
  background: #FFF;
  width: 100%;
  color: #000;
}
.navigation .dropdown a.box {
  padding: 20px 35px;
  color: #FFF;
}
.navigation .dropdown .sub {
  border: 5px dotted red; /*HERE*/
}
.navigation .dropdown .sub a {
  padding: 5px 0px;
}
.navigation .dropdown.green {
  background: #67B146;
}
.navigation .dropdown.orange {
  background: #F28845;
}
.navigation .dropdown.purple {
  background: #9C52A0;
}
.navigation .dropdown.blue {
  background: #60C9DE;
}
.navigation .dropdown.yellow {
  background: #EFCB35;
}
.navigation .dropdown.red {
  background: #CB4B27;
}

<div class="navigation">
  <div class="dropdown orange" align="center">
    <a href="" class="box">ABOUT US</a>
    <div class="sub">
      <a href="">STAFF</a>
      <a href="">POLICY</a>
      <a href="">NEWSLETTER</a>
    </div>
  </div>
</div>