ナビゲーションバーにドロップダウンメニューを追加する

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>

それに役立つことを願っています。