help with navbars dropup menus

[anymany]

trying to get a navban menu working

    <nav class="blur" id="footer">
        <ul id="footer-items">
            <li><button class="footer-perma" id="settings">Settings</button>
                <div id="settings-sub">
                    <ul>
                        <li>
                            <button>fullscreen</button>
                        </li>
                        <li>
                            <button>change wallpaper</button>
                        </li>
                    </ul>
                </div>
            </li>
            <li><button class="footer-perma">About Me</button></li>
            <li><button class="footer-perma">Links</button></li>
        </ul>
    </nav>

this is the HTML, i trying to hover over id of settings and making the div settings-sub to appear

#footer{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: 0;
  height: 40px;
  
}


.blur{
  backdrop-filter: blur(15px);
  background-color: rgba(0, 0, 0, .80);
}



/*design of the buttons*/
#footer-items{
  display: flex;
  justify-content: left; 
}


#footer-items li{
  height: 40px;
  width: 70px;
  list-style-type: none;
  text-align: center;
}


.footer-perma{
  text-decoration: none;
  border: none;
  color: #fff;
  background-color: transparent;
  cursor: pointer;
  height: inherit;
  width: inherit;
  transition-duration: .4s;
}


.footer-perma:hover{
  background-color: rgba(65, 65, 65, 0.75);
}


#settings-sub{
  position: absolute;
  bottom: 40px;
  width: 75px;
  background: rgba(0, 0, 0, 0.75);
  display: none;
}


#settings:hover #settings-sub{
  display: block;
  position: absolute;
  display: flex;
  justify-content: center;
}


#settings-sub ul li button{
  color: #fff;
  border: none;
  background-color: transparent;
  height: inherit;
  width: inherit;
  cursor: pointer;
  transition-duration: .4s;


}


#settings-sub ul li button:hover{
  background-color: rgba(65, 65, 65, 0.75);
} 

here's the CSS #settings-sub has a display of none and therefore hidden, when i delete that line, i can see it in the way i like

then i use #settings:hover #settings-sub{display:block;} when the user hovers over the settings buttons, the setting-sub 's display property should change to block and should therefore appear but it doesn't do that and i can't figure out why

any help would be appreciated