Creating a dropdown menu from <ul><li> elements in Wordpress

Question

I'm trying to create a dropdown menu for a gallery filter on my Wordpress website. The issue is, I'm using a portfolio widget that I got with my theme and it doesn't offer a dropdown filter menu. And since I have quite a few filter options it doesn't look very nice. This is how it is in 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>

I've seen some ways to create a dropdown menu by hiding it behind a button, but since this filter is a part of the whole widget I can't (to my knowledge) insert a button in it. Is there any way to create a dropdown in CSS using just the code I provided?

Answer 1

You can use :before to create a button. I made a 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>

You can also inject the HTML elements you need into the page using JavaScript.