ドロップダウンメニュー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>