Question

如何为我的两个素材图标列表添加下拉菜单？我设法完成了html部分。我通过添加下拉代码在css上多次尝试但它不起作用，下拉菜单卡在导航栏之间。发生了什么事，我该怎么做才能解决这个问题？

＆＃13;

body {} #nav-main {
  width: 1280px;
  min-width: 100%;
  position: fixed;
  top: 0;
  left: 0;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.39);
  height: 60px;
}
li {
  float: left;
}
li a {
  display: block;
  color: #ffffff;
  text-align: center;
  padding: 19px 25px;
  /*topbottom leftright*/
  text-decoration: none;
}
.nav-item5 {
  width: 550px;
  margin: 15px 60px;
  /*topbottom leftright*/
  padding: 5px;
}
input[type="search"] {
  background: url(../images/search-icon.png) no-repeat #fcfcfc;
  border: 1px solid #d1d1d1;
  background-size: contain;
  padding: 6px 15px 6px 30px;
  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: 27px;
}
li a:hover {
  background-color: rgba(0, 0, 0, 0.50);
}

＆＃13;

<ul id="nav-main">
  <li><a href="#" class="nav-item1">Home</a>
  </li>
  <li><a href="/about" class="nav-item2">About</a>
  </li>
  <li><a href="/faq" class="nav-item3">FAQ</a>
  </li>
  <li><a href="/Contact" class="nav-item4">Contact</a>
  </li>
  <li>
    <form action="action_page.php">
      <input type="search" name="savanasearch" placeholder="Search..." class="nav-item5">
    </form>
  </li>
  <li style="float:right">
    <a href="#"><i class="material-icons">account_circle</i></a>
    <div class="dropdown">
      Welcome
      <ul>
        <li><a href="#" class="nav-item6">Login</a>
        </li>
        <li><a href="#" class="nav-item7">Register</a>
        </li>
      </ul>
    </div>
  </li>
  <li style="float:right">
    <a href="#"><i class="material-icons">favorite_border</i></a>
    <div class="dropdown">
      <ul>
        <li><a href="#" class="nav-item7">Favorites</a>
        </li>
        <li><a href="#" class="nav-item8">Wishlist</a>
        </li>
        <li><a href="#" class="nav-item9">Track Order</a>
        </li>
      </ul>
    </div>
  </li>
</ul>

＆＃13;

Answer 1

See this example

我已经改变了一点导航条，因为你为每个人上课，如果你不需要它，那就不对了。也是搜索栏的大小。检查示例。我留给你一些例子让你知道＆＃34;为什么？＆＃34;

.dropdown ul{
  z-index: 9;
  top: 101%;
  position: absolute;
  display: none;
}

添加导航栏的下拉菜单

1 个答案: