Выпадающее меню HTML/CSS

Question

Я новичок в кодировании html/css, и я пытаюсь сделать раскрывающееся меню. Я пробовал все, и я просто испортил код.

Если вы можете мне помочь и рассказать мне, в чем была проблема, я расскажу Санта, чтобы дать вам дополнительный подарок.

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

Экспериментируя с вашим кодом, я нашел много стилей CSS были перекрывая друг друга.

Я начал свой CSS с нуля, поэтому вы можете увидеть базовый пример того, как это должно работать (помните, что есть другие способы достижения одного и того же результата) ... Он должен дать вам основание для использования в любом случае ,

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>