在導航欄中添加下拉菜單

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>

希望這將有助於。