Question

如何为两个图标类添加下拉菜单？例如，下拉菜单就像注册，登录，跟踪订单，心愿单等。这是我的导航栏菜单，没有下拉列表/子列表。我能看到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>

Answer 2

以下是您的下拉菜单代码： -

.mainmenu{
    list-style: none;
    width: available;
    height: 150px;
    padding: 0px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0px;
    margin-bottom: 0px; 
    overflow: visible;
}

  ul {
    list-style: none;
    padding: 0px;
    margin: 0px;
}
  
  ul li {
    width: 175px;  
    display: block; 
    position: relative;
    float: left;
    border:1px solid #000;
}
  
  li ul {
    display: none;margin-left: 0px;
}
  ul li a {
    display: block;
    background: #000;
    padding: 5px 10px 5px 10px;
    text-decoration: none;
    white-space: nowrap;
    color: #fff;
}
  ul li a:hover {
    background: #f00;
  }
  li:hover ul {
    display: block;
    position: absolute;
  }
  li:hover li {
    float: none;
  }
  li:hover a {
      background: #f00;
  }
  li:hover li a:hover {
      background: #000;
  }
  #drop-nav li ul li {
      border-top: 0px;
  }

<ul id="drop-nav" class="mainmenu">
                    <li><a href="#">My Menu</a>
                        <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>
                    </li>
                    
 </ul>

希望它会有所帮助。

在导航栏中添加下拉菜单

2 个答案: