HTML/CSS 下拉导航菜单

Question

如何修复下拉菜单显示不正确以及 Material 图标不正确的问题？导航栏的高度必须为 60px，所以我尝试通过显示内联 block 来尝试，但它不起作用...帮助!

body {} #nav-main {
  width: 1280px;
  min-width: 100%;
  position: fixed;
  top: 0;
  left: 0;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: rgba(0, 0, 0, 0.39);
  height: 60px;
}
li {
  float: left;
  height: 60px;
}
li a,
li div {
  display: block;
  color: #ffffff;
  text-align: center;
  padding: 19px 25px;
  text-decoration: none;
}
.search-form {
  width: 550px;
  box-sizing: border-box;
  padding: 15px 65px;
}
input[type="search"] {
  width: 100%;
  background: url(../images/search-icon.png) no-repeat #fcfcfc;
  border: 1px solid #d1d1d1;
  background-size: contain;
  padding: 3px 15px 3px 30px;
  line-height: 22px;
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
  -webkit-transition: all 0.7s ease 0s;
  -moz-transition: all 0.7s ease 0s;
  -o-transition: all 0.7s ease 0s;
  transition: all 0.7s ease 0s;
}
input[type="search"]:focus {
  width: 300px;
}
i.material-icons {
  font-size: 26px;
}
li a:hover {
  background-color: rgba(0, 0, 0, 0.50);
}
.dropdown {
  position: relative;
  color: #fff;
}
.dropdown ul {
  z-index: 9;
  top: 101%;
  position: absolute;
  display: none;
}
.dropdown:hover ul {
  display: block;
}
.dropdown ul li {
  margin: 0;
  display: block;
}

<ul id="nav-main">
  <li>
    <a href="#">Home</a>
  </li>
  <li>
    <a href="/about">About</a>
  </li>
  <li>
    <a href="/faq">FAQ</a>
  </li>
  <li>
    <a href="/Contact">Contact</a>
  </li>
  <li>
    <form action="action_page.php" class="search-form">
      <input type="search" name="savanasearch" placeholder="Search..." class="nav-item5">
    </form>
  </li>
  <li>
    <div class="dropdown">
      <a href="#"><i class="material-icons">account_circle</i></a>
      <ul>
        <li>
          <a href="#">Login</a>
        </li>
        <li>
          <a href="#">Register</a>
        </li>
      </ul>
    </div>
  </li>
  <li>
    <div class="dropdown">
      <a href="#" class="nav-item"><i class="material-icons">favorite_border</i></a>
      <ul>
        <li>
          <a href="#">Favorites</a>
        </li>
        <li>
          <a href="#">Wishlist</a>
        </li>
        <li>
          <a href="#">Track Order</a>
        </li>
      </ul>
    </div>
  </li>
</ul>

Answer 1

今天才看到这个问题，想知道你有没有解决过它。

这是我的二十便士

body {} 
#nav-main {
  width: 100%;
  min-width: 100%;
  top: 0;
  left: 0;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: rgba(0, 0, 0, 0.39);
  height: 60px;
}
li {
  float: left;
  height: 60px;
}
li a{display: block;
  color: #ffffff;
  text-align: center;
  padding: 19px 25px;
  text-decoration: none;}
li div {
  display:block!important;
  color: #ffffff;
  text-align: center;
  padding: 10px 10px;
  text-decoration: none;
}
.search-form {
  width: 550px;
  box-sizing: border-box;
  padding: 15px 50px;
}
input[type="search"] {
  width: 80%;
  background: url(../images/search-icon.png) no-repeat #fcfcfc;
  border: 1px solid #d1d1d1;
  background-size: contain;
  padding: 3px 15px 3px 30px;
  line-height: 22px;
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
  -webkit-transition: all 0.7s ease 0s;
  -moz-transition: all 0.7s ease 0s;
  -o-transition: all 0.7s ease 0s;
  transition: all 0.7s ease 0s;
}
input[type="search"]:focus {
  width: 300px;
}
i.material-icons {
  font-size: 26px;
}
li a:hover {
  background-color: rgba(0, 0, 0, 0.50);
}
.dropdown {
  position: relative;
  margin-top: -10px;
  margin-left:-50px;
  padding-left:15px;
  color: #fff;
}
.dropdown ul {
  position: relative;
  display: none;
}
.dropdown:hover ul {
  display: block!important;
}
.dropdown ul li {
  display: block!important;
  background-color: rgba(0, 0, 0, 0.39);
  float:none!important;
}

<body>
<ul id="nav-main">
  <li>
    <a href="#">Home</a>
  </li>
  <li>
    <a href="/about">About</a>
  </li>
  <li>
    <a href="/faq">FAQ</a>
  </li>
  <li>
    <a href="/Contact">Contact</a>
  </li>
  <li>
    <form action="action_page.php" class="search-form">
      <input type="search" name="savanasearch" placeholder="Search..." class="nav-item5">
    </form>
  </li>
  <li>
    <div class="dropdown">
      <a href="#"><i class="material-icons">account_circle</i></a>
      <ul>
        <li>
          <a href="#">Login</a>
        </li>
        <li>
          <a href="#">Register</a>
        </li>
      </ul>
    </div>
  </li>
  <li>
    <div class="dropdown">
      <a href="#" class="nav-item"><i class="material-icons">favorite_border</i></a>
      <ul>
        <li>
          <a href="#">Favorites</a>
        </li>
        <li>
          <a href="#">Wishlist</a>
        </li>
        <li>
          <a href="#">Track Order</a>
        </li>
      </ul>
    </div>
  </li>
</ul>
</body>

psst..全屏看!