Question

有没有人知道如何向dropdovn内容添加箭头以使其首先出现？我的问题是当你通过伪元素（下拉内容）或div与css添加箭头时，在按钮点击首先出现下拉内容然后箭头显示（但箭头放在内容的顶部）。 / p>

以下是示例：

＆＃13;

html{
  
  background: #000000;
}
.dropdown-content{
  margin: 20px 0px 0px 0px;
  overflow:inherit;
}

.dropdown-button::before {
  content: "▼";
  display: inline;
  padding-right: 5px;
}

.dropdown-content:after{
    content: "";
    position: absolute;
    width: 40px;
    height: 40px;
    background: #ffffff;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    top: 0;
    right: 10px;
}

＆＃13;

<div class="col s12">
<a class='dropdown-button btn' href='#' data-beloworigin='true' data-activates='dropdown1'>Drop Me!</a>

  <ul id='dropdown1' class='dropdown-content'>
    <li><a href="#!">one</a></li>
    <li><a href="#!">two</a></li>
    <li class="divider"></li>
    <li><a href="#!">three</a></li>
  </ul>
  </div>

＆＃13;

小提琴here。

Answer 1

尝试在下拉列表后面设置:: after元素，如下所示：

    .dropdown-content:after{
        z-index: -1;
    }

Answer 2

<强>原因

.dropdown-content元素中的所有内容都没有显示，阻止在显示元素之前应用伪类，伪类需要一秒钟才能应用。

<强>解决方案

而不是“display：none”保持.dropdown-content元素可见，但将其移出屏幕并在切换时将其移动到它所属的位置。这就是Foundation Framework成功添加插入符的方式。示例：http://foundation.zurb.com/sites/docs/v/5.5.3/components/dropdown.html
在开头添加一个额外的<li>，并为其提供类似于插入符号的CSS图像背景。

实现css。如何在下拉内容的顶部添加三角形

2 个答案: