Drop down menu HTML/CSS

Question

I'm new to html/css coding and I'm trying to do a drop down menu. I've tried anything and I just ruined the code.

If you can help me and tell me what was the problem I will tell santa to give you an extra present.

css:

 @font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: local('Material Icons'), local('MaterialIcons-Regular'), url(https://fonts.gstatic.com/s/materialicons/v13/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2) format('woff2');
}

.list__icon2 {
  width: 74px;
  height: 38px;
  display: inline-block;
  vertical-align: top;
  padding-top: 12px;
  transition: background-color 0.2s;
  border-right: 3px solid #23282e;
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

nav {
  background: #182128;
  /* Old browsers */
  background: -moz-linear-gradient(left, #21364A 0%, #3A556E 20%, #3A556E 80%, #21364A 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(left, #21364A 0%, #3A556E 20%, #3A556E 80%, #21364A 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right, #21364A 0%, #3A556E 20%, #3A556E 80%, #21364A 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#182128', endColorstr='#182128', GradientType=1);
  /* IE6-9 */
  width: 100%;
  color: #ffffff;
    position:relative;
  height: 50px; 
  -webkit-box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.4);
  box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.4);
  font-size: 0;
  border-bottom: 3px solid #577591;
}

nav ul ul li:after {
    display: none;
    }

nav ul ul li{
    position: absolute;
    background: #070a0b;
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#182128', endColorstr='#182128', GradientType=1);
  /* IE6-9 */
  width: 100px;
  color: #ffffff;
  height: 50px; 
  list-style: none;
  position: relative;
  display: none;
  -webkit-box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.4);
  box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.4);
  font-size: 0;
  border-bottom: 3px solid #577591;
}


    nav ul ul li:hover {
        display:block;
    }
        nav ul ul li:hover a {
            color: #fff;
        }

    nav ul ul li a {
        display: block; padding: 25px 40px;
        color: #757575; text-decoration: none;
    }

nav__list {
  width:100%;
  text-align:center;
  border-collapse: collapse;
}

.list__icon {
  width: 74px;
  height: 38px;
  display: inline-block;
  vertical-align: top;
  padding-top: 12px;
  transition: background-color 0.2s;
}


.list__item { 
  width: 235px;
  display: inline-block;
  border-right: 3px solid #23282e;
  border-collapse: collapse;
  font-weight: bold;
  height: 30px;
  text-align: center;
  font-size: 20px;
  padding: 10px 0px;
  transition: background-color 0.2s;
  /*   border-top: 3px solid #525961; */
}

.list__item:first-of-type {
  border-left: 3px solid #23282e;
}

.list__item:hover {
  background-color: #2C455C;
}


.list__icon:hover {
  background-color: #2C455C;
}
.list__icon2:hover {
  background-color: #2C455C;
}

nav ul ul li:hover > ul li{
        display: block;
    }

HTML:

<nav>
         <ul class="nav__list">
              <li class="list__icon2 material-icons"><a href="index.html">home</a></li>
              <li class="list__item"><a href="about.html">About us</a></li>
              <li class="list__item"><a href="registration.html">Registrations</a></li>
              <li class="list__icon material-icons">list
                       <ul>
                           <li>Dank Memes</li>
                       </ul>
               </li>

        </ul>
   </nav>

Answer 1

While experimenting with your code, I found a lot of the CSS styles were overriding each other.

I started your CSS from scratch so you can see a basic example of how this should work (bear in mind there's other ways of achieving the same result)... It should give you a base to build on in any case.

 ul.nav__list > li { display: inline-block; background: #000; padding: 10px; border: 1px solid #fff; position: relative; } ul.nav__list > li a, nav > ul > li { color: #fff; } ul.nav__list > li > ul { display: none; position: absolute; width: auto; background: #000; left: 0; bottom: -50px; } ul.nav__list > li > ul > li { padding: 10px; } ul.nav__list > li:hover > ul { display: block; } 

 <nav> <ul class="nav__list"> <li class="list__icon2 material-icons"><a href="index.html">home</a></li> <li class="list__item"><a href="about.html">About us</a></li> <li class="list__item"><a href="registration.html">Registrations</a></li> <li class="list__icon material-icons">list <ul> <li>Dank Memes</li> </ul> </li> </ul> </nav>