Trouble with Dropdown Menu on Product Landing Page

1

Hi there, I’m currently working on my product landing page project and I’m trying to create a hoverable dropdown menu with a list of the characteristics of the product. (The product is a little far out but I figured I would have fun with the project and base my page off of the game Destiny 2.) Initially, it was working as intended but seems to have broken somehow, as I was working on styling the header and navbar. Any advice would be greatly appreciated.

Below is a piece of the html code and the css for the dropdown:

HTML:

<div id="row">  
 <div id="img-desc-container">  
  <div class="product-img-div">
    <img src="https://i.imgur.com/xlJI5eC.jpg" id="product-img"></div>
  
  <div id="product-name" class="dropdown">
    <button class="drop-btn"><h1 class="dropdown-title">BYGONES</h1></button>
    <div class="dropdown-content">
      <ul>
        <li>Kinetic Pulse Rifle</li>
        <li>Adaptive Frame</li>
        <li>Corkscrew Rifling</li>
        <li>Flared Magwell</li>
        <li>Kill Clip</li>
        <li>Full-Auto Trigger</li>
    </div>
  </div>

CSS:

.drop-btn {
  background-color: #6f7072;
  border: none;
  min-width: 385px;
  min-height: 216px;
}

.product-name {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #85827B;
  min-width: 385px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.4);
 
}

.dropdown-content ul:hover {
  background-color: #85827B;
}
2

The closing tag for the unordered list seems to be missing. Perhaps that broke it?

1 Like
3

If you set .dropdown-content to display none you can’t hover on the ul inside it. I’m a little confused about what you are trying to do.

Is this what you want?

.dropdown:hover .dropdown-content  {
  display: block;
  background-color: #85827B;
}
1 Like
4

This seemed to have work at first but now the dropdown content is always visible.

5

I would need to see the code you have now. Can you make a Codepen with it?

6

I have a codepen built out already, but I decided to scrap the idea and go in a different direction with the design. Unfortunately, this wasn’t the only thing on the page that just wouldn’t work for me. I think I need to simplify. Thanks so much for trying to help out though.