html - 在导航栏中添加下拉菜单

Question

如何为两个图标类添加下拉菜单？例如，下拉菜单类似于注册、登录、跟踪订单、愿望 list 等。这是我的导航栏菜单，没有下拉菜单/子列表。我可以查看 CSS 和 HTML 的示例吗？

<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>
        </li>
        <li style="float:right">
            <a href="#"><i class="material-icons">favorite_border</i></a>
        </li>
    </ul>

Answer 1

你没有标记javascript，但是没有js很难做到这一点。但是，当您将鼠标悬停在某个元素上时，有一些作弊可以显示下拉菜单，但它不适用于点击:

html, body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
}
#content {
  padding: 40px 10px 10px 10px;
}

#nav-main {
  position: fixed;
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 0 7px;
  height: 36px;
  background-color: #4488dd;
  font-size: 16px;
}
#nav-main li {
  float: left;
  list-style-type: none;
  padding: 0 7px;
  margin: 0;
  line-height: 36px;
  transition: .1s;
}
#nav-main li:hover {
  background-color: #3366aa;
}
#nav-main li > a {
  color: white;
  text-decoration: none;
  line-height: 36px;
  display: inline-block;
}
#nav-main li input[type=search] {
  border: none;
  background-color: #ffffff;
  opacity: 0.9;
  padding: 0 3px;
  line-height: 22px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3);
  border-radius: 2px;
}
#nav-main li:hover input[type=search] {
  opacity: 1;
}

#nav-main li .dropdown {
  display: none;
  position: absolute;
  background-color: #4488dd;
  padding: 7px;
  margin: 0 0 0 -7px;
  line-height: 26px;
  min-width: 100px;
}
/* Here comes the clue: */
#nav-main li:hover .dropdown {
  display: block;
  color: white;
}
#nav-main .dropdown ul {
  margin: 0;
  padding: 0;
}
#nav-main .dropdown ul li {
  float: none;
  line-height: 30px;
  margin: 0 -7px;
}

<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">
          Dropdown 2
          <ul>
            <li>Hi!</li>
            <li>Hi!</li>
            <li>Hi!</li>
          </ul>
        </div>
    </li>
    <li style="float:right">
        <a href="#"><i class="material-icons">favorite_border</i></a>
        <div class="dropdown">
          Dropdown 1
          <ul>
            <li>Hi!</li>
            <li>Hi!</li>
            <li>Hi!</li>
          </ul>
        </div>
    </li>
</ul>

<div id="content">
<p>Lorem ipsum dolor sit amet, ad prompta invenire dissentiunt quo, dignissim assentior efficiendi quo ei. Mea audiam lobortis sententiae no, vix ornatus labores qualisque ne. Usu adolescens voluptaria id, quo at habemus invenire. Sententiae philosophia vis in, id incorrupte dissentias mel. Ut brute disputationi pro, no malis eirmod has. Pri debitis insolens in, cu eirmod maluisset scriptorem sit.</p>

<p>At fugit ludus qui, et sit dictas adolescens. Agam habemus usu ne. Eum duis mollis torquatos no, usu atomorum voluptaria incorrupte ex. Usu no latine vocibus nusquam, ea sea dictas diceret philosophia. Deleniti probatus cum et, corpora noluisse abhorreant no eum.</p>

<p>Placerat vituperatoribus an mei. Cu hinc atqui civibus mei. Per ne aliquid postulant. Qui no persius referrentur, doming facilis te nam.</p>
</div>