html - 下拉菜单 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>