CSS :focus doesn't do anything

new here so sorry if I do something wrong.

I'm trying to use the CSS :focus, but it doesn't want to work.

I am trying to use it to show a drop down list when clicked

here is my code:

button:focus + .ulprojects {
    opacity: 1;
    pointer-events: all;
}

<body>
    <nav>
        <div class="dropdown"> 

            <button><a href="#" class="home">home</a></button>
            <div class="projects">
                <button>projects</button>

                <ul class="ulprojects">
                    <li><a href="#">project</a></li>
                    <li><a href="#">project</a></li>
                    <li><a href="#">project</a></li>
                    <li><a href="#">project</a></li>
                    <li><a href="#">project</a></li>
                </ul>
            </div>

            <div class="products">
                <button>products</button>
                <ul>
                    <li><a href="#">product</a></li>
                    <li><a href="#">product</a></li>
                    <li><a href="#">product</a></li>
                    <li><a href="#">product</a></li>
                    <li><a href="#">product</a></li>
                </ul>
            </div>

            
        </div>
    </nav>
</body>

thanks in advance, please tell me what i'm doing wrong.

Solution

As you have mentioned in your css you need to do this when you click on ulprojects button so you have to hide ulprojects by default and set it do display:block when you focus on a button.

    button:focus + .ulprojects {
    opacity: 1;
    pointer-events: all;
    display:block!important;
}
.ulprojects{display:none}

See working demo:

button:focus+.ulprojects {
  opacity: 1;
  pointer-events: all;
  display: block !important;
}

.ulprojects {
  display: none;
}

<body>
  <nav>
    <div class="dropdown">

      <button><a href="#" class="home">home</a></button>
      <div class="projects">
        <button>projects</button>

        <ul class="ulprojects">
          <li><a href="#">project</a></li>
          <li><a href="#">project</a></li>
          <li><a href="#">project</a></li>
          <li><a href="#">project</a></li>
          <li><a href="#">project</a></li>
        </ul>
      </div>

      <div class="products">
        <button>products</button>
        <ul>
          <li><a href="#">product</a></li>
          <li><a href="#">product</a></li>
          <li><a href="#">product</a></li>
          <li><a href="#">product</a></li>
          <li><a href="#">product</a></li>
        </ul>
      </div>


    </div>
  </nav>
</body>