CSS Dotted Border

Question

我希望在“sub”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;
}

但是出现的边界很稳固......？

这是一个小提琴：https://jsfiddle.net/1y0vunc8/1/

感谢您的帮助。

Answer 1

因为它与div .dropdown orange的颜色相同。因此，background-color的{​​{1}}与dropdown orange的{​​{1}}混合在一起

这是一个不同颜色的代码段：

border

.sub

Answer 2

只需将课程orange移至您的.box元素：

<a href="" class="box orange">ABOUT US</a>

https://jsfiddle.net/1y0vunc8/2/

而不仅仅是改变CSS中的这种分类：

.navigation .dropdown .orange{

这样做只有“关于我们”标题的橙色背景，而不是你所做的整个元素。