html - 仅使用 css 使用此 div 创建单个下拉列表

Question

如何将其变成一个下拉菜单？现在我已经为每个 li 设置了一个按钮。

我只是想让它变成一个包含所有这些的下拉菜单。

对于较小的屏幕，如果可以的话，最好使用 css 示例。

<div class="col-md-3">
    <ul class="pc-scroller">
        <span>GO TO</span>
        <li class="pc-welcom">Welcome</li>
        <li class="pc-bebidasbeverages-114">Beverages</li>
        <li class="pc-traditional-style-breakfast-114">Traditional Breakfast</li>
        <li class="pc-mexican-style-breakfast-114">Mexican Breakfast</li>
        <li class="pc-mexican-plates-114">Mexican Plates</li>
        <li class="pc-botanasappetizers-114">Appetizers</li>
        <li class="pc-mariscosseafood-114">Seafood</li>
        <li class="pc-parrilladabarbecue-114">Barbecue</li>
        <li class="pc-kids-plates-114">Kid's Plates</li>
        <li class="pc-postresdesserts-114">Desserts</li>                    
    </ul>   
</div>

Answer 1

检查这个

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

<div class="col-md-3">
    <select class="pc-scroller">
        <option >GO TO</option>
        <option value="welcome" class="pc-welcom">Welcome</option>
        <option value="beverages" class="pc-bebidasbeverages-114">Beverages</option>
        <option value="traditional" class="pc-traditional-style-breakfast-114">Traditional Breakfast</option>
        <option value="mexican" class="pc-mexican-style-breakfast-114">Mexican Breakfast</option>
        <option value="plates" class="pc-mexican-plates-114">Mexican Plates</option>
        <option value="appetizers" class="pc-botanasappetizers-114">Appetizers</option>
        <option value="seafood" class="pc-mariscosseafood-114">Seafood</option>
        <option value="barbecue" class="pc-parrilladabarbecue-114">Barbecue</option>
        <option value="kid" class="pc-kids-plates-114">Kid's Plates</option>
        <option value="desserts" class="pc-postresdesserts-114">Desserts</option>                    
    </select>   
</div>