我正在嘗試在我的 Wordpress 網站上為畫廊過濾器創建一個下拉選單。問題是，我正在使用我的主題獲得的投資組合小部件，它不提供下拉過濾器選單。而且由于我有很多過濾器選項，它看起來不太好。這是它在 HTML 中的樣子：
<div class='gs-filters'>
<ul id='filters'>
<li><a href='#'>Item 1</a></li>
<li><a href='#'>Item 2</a></li>
<li><a href='#'>Item 3</a></li>
<li><a href='#'>Item 4</a></li>
...
</ul>
</div>
我已經看到了一些通過將下拉選單隱藏在按鈕后面來創建下拉選單的方法，但是由于此過濾器是整個小部件的一部分，因此我不能（據我所知）在其中插入按鈕。有沒有辦法只使用我提供的代碼在 CSS 中創建下拉串列？
uj5u.com熱心網友回復：
你可以用它:before來創建一個按鈕。我做了一個codepen
<style>
#filters{
display: none;
background: yellow;
list-style: none;
position: absolute;
top: 50px;
left: 0;
margin:0;
}
a{
display: block;
padding: 5px 15px;
}
.gs-filters{position: relative;}
.gs-filters:before{
content:' filter button';
display: inline-block;
padding: 0 15px;
height: 50px;
line-height: 50px;
cursor: pointer;
font-weight: bold;
background: beige;
}
.gs-filters:hover #filters{
display: inline-block;
}
</style>
<div class='gs-filters'>
<ul id='filters'>
<li><a href='#'>Item 1</a></li>
<li><a href='#'>Item 2</a></li>
<li><a href='#'>Item 3</a></li>
<li><a href='#'>Item 4</a></li>
</ul>
</div>
您還可以使用 JavaScript 將所需的 HTML 元素注入頁面。
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/492196.html