Solution 1 :

Although you don’t really need to put the dropdown trigger into a list and then the dropdown menu into a nested list – I find it neater to have a self-contained dropdown component made from a nested hidden list withinin the li of a parent visible list.

You create a nested list which has display: none on it and then on hover of the parent li – apply display:block styling to the child ul. The child ul could simply be shown directly under the li content (ie without styling) but to make this a little more sexy – I have styled the dropdown as being positioned absolutely on following the hover of the li content.

The following allows the nested ul to be visible on hovering over the parent li / button *note the button and its styling is derived from the listed w3 page – https://www.w3schools.com/css/tryit.asp?filename=trycss_dropdown_button)

I also removed a couple of layers of nested divs which are not required for this solution.

.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.dropdown-menu {
 list-style: none
}

.dropdown-menu-item {
 position: relative
}

.dropdown-menu-list {
 display: none;
 border: solid 1px #e1e1e1;
 background: #fff;
 position: absolute;
 left: 0;
 top: 50px;
 padding:0;
 list-style: none
}

.dropdown-menu-list-item {
 background: #fff;
 padding:  8px 16px;
}
.dropdown-menu-list-item:hover {
 background: #fafafa;
}


.dropdown-menu-list-item  a,
.dropdown-menu-list-item:hover a{
 text-decoration: none;
 display: block;
 cursor: pointer
}

.dropdown-menu:hover .dropdown-menu-list ,
.dropdown-menu-item:hover .dropdown-menu-list:hover{
 display: block;
}
<div class="menu-container">
  <ul class="dropdown-menu"> 
    <li class="dropdown-menu-item">
      <button class="dropbtn">Dropdown</button>
      <ul class="dropdown-menu-list">
        <li class="dropdown-menu-list-item"><a id="index" href="index.html">Home</a></li>
        <li class="dropdown-menu-list-item"><a id="gamePage" href="gamePage.html">Game</a></li>
        <li class="dropdown-menu-list-item"><a id="gameDesignPage" href="gameDesignPage.html">Game Design</a></li>
        <li class="dropdown-menu-list-item"><a id="devRolesPage" href="devRolesPage.html">Developer Roles</a></li>
         <li class="dropdown-menu-list-item" class="float-right"><a id="about" href="about.html">About</a></li>
       </ul>
     </li>
   </ul>    
</div>

Solution 2 :

Hope this is what you are looking for.

<html>
<head>
<style>
.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown:hover .dropbtn {
  background-color: #3e8e41;
}
</style>
</head>
<body>

<div class="dropdown">
  <button class="dropbtn">Dropdown</button>
  <div class="dropdown-content">
  <a href="index.html">Home</a>
  <a href="gamePage.html">Game</a>
  <a href="gameDesignPage.html">Game Design</a>
  <a href="devRolesPage.html">Developer Roles</a>
  <a href="about.html">About</a>
  </div>
</div>

</body>
</html>

Please check link below: https://www.w3schools.com/css/tryit.asp?filename=trycss_dropdown_button

Problem :

I have the following HTML:

<div class="MenuContainer">
    <div class="Menu">
        <div class="MenuContents">
            <ul>
                <li><a id="index" href="index.html">Home</a></li>
                <li><a id="gamePage" href="gamePage.html">Game</a></li>
                <li><a id="gameDesignPage" href="gameDesignPage.html">Game Design</a></li>
                <li><a id="devRolesPage" href="devRolesPage.html">Developer Roles</a></li>
                <li class="float-right"><a id="about" href="about.html">About</a></li>
            </ul>
        </div>
    </div>
</div>

How would I make the list item with the id “gameDesignPage” have a drop down menu?The drop down would work as the one in this link: https://www.w3schools.com/css/tryit.asp?filename=trycss_dropdown_button

I have tried solutions from other similar stack overflow questions (and the link from above logic) but they did not work correctly on my structure.

Comments

Comment posted by gavgrif

That content is literally the entire sample code from the referenced w3Schools page. If you are going to reference the content of another page – you should cite them as a reference – for my solution I created it all from the code that the OP provided and added my own sttlnig to achieve the outcome. The only element / stylingi used from the w3 page was the button. It’s not cool to simply rip off content from another page – especially since the OP mentioned it – and is obviously aware of it.

Comment posted by gavgrif

As a rule – I generally do not down vote – I believe that everyones solution is as valid as mine – but on the few occasions I do down vote – I try to put a comment on as to why it was deservant of a down vote. I have been down voted plenty and it is more annoying to receive a downvote with no explanation than to get a comment as to why it was bad and some sort of assistance on how to do better (in this case – it was to cite a reference to the existing page) and that it was on the referenced w3 page and did not add anything over that page nor offfer an explation to help the OP.

Comment posted by Abdu ElRhoul

Thank you for clarifying. I’ve been here for 1 day everyone and his dog are making it a religion to down vote each and everything I write. From asking a question to helping someone else. I think I already know why but I’m not going to go that far. I didn’t see no need to list the source since the OP already did. Once again thank you.

By