物化css。如何在下拉内容顶部添加三角形

有谁知道如何将箭头添加到dropdovn内容以便它首先出现？我的问题是，当你添加一个箭头通过伪元素（下拉内容）或div与CSS，在按钮上单击第一次出现下拉内容，然后箭头显示（但箭头放在内容的顶部）。物化css。如何在下拉内容顶部添加三角形

下面举例说明：

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; 
 
}

<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>

小提琴也here。

来源

2016-12-30 TRAILERS HD

你是否用特定的解决方案？我很想知道还有其他选择。 – rawnewdlz

我得到的解决方案是将下拉内容CSS添加到overfllow inherit！important状态。这里是示例https://jsfiddle.net/sj2tm8cd/38/ –

不错，看起来像它可以处理除“隐藏”以外的任何溢出属性。太糟糕了，它必须使用“！重要”。 – rawnewdlz

尝试将::元素之后下拉的背后，是这样的：

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

来源

2016-12-30 19:32:01

原因

的.dropdown-content元素中的一切都没有显示，防止被应用，直到伪类元素显示和伪类需要第二个应用。

解决方案

而不是“显示：无”养.dropdown-content元素可见，但将它关闭屏幕和它所属的时拴牢在移动它。这是基金会框架如何成功添加插入符号。示例：http://foundation.zurb.com/sites/docs/v/5.5.3/components/dropdown.html
在开始处添加一个额外的<li>，并为其指定类似插入符号的CSS图像背景。

来源

2016-12-30 21:13:35 rawnewdlz

物化css。如何在下拉内容顶部添加三角形

回答

相关问题