既存のメニューにドロップダウン（サブメニュー）を追加します。

Question

既存のメニューバーにドロップダウンオプション（サブメニュー）を追加します。

ここに私のCSSとHTMLコードがあります。

多くのドロップダウンメニューがあります。 しかし、メニュー全体をあまり変更することなく、既存のメニューに新しい機能を追加したいだけです。

/* Add a black background color to the top navigation */ 
 
.topnav { 
 
    background-color: #333; 
 
    overflow: hidden; 
 
} 
 

 
/* Style the links inside the navigation bar */ 
 
.topnav a { 
 
\t float: left; 
 
\t display: block; 
 
\t color: #f2f2f2; 
 
\t text-align: right; 
 
\t padding: 14px 16px; 
 
\t text-decoration: none; 
 
\t font-size: 17px; 
 
} 
 

 
/* Change the color of links on hover */ 
 
.topnav a:hover { 
 
    background-color: #ddd; 
 
    color: black; 
 
} 
 

 
/* Add a color to the active/current link */ 
 
.topnav a.active { 
 
    background-color: #4CAF50; 
 
    color: white; 
 
}

<div class="topnav" id="myTopnav"> 
 
    
 
    <a href="#news">Speed Dial</a> 
 
    <a href="#news">Speed Dial</a> 
 

Answer 1

私は自分自身のコードを変更することによって、あなたの要件を満たすことを試みました。

スタイル/ CSS修正が残っています。

試してみてください。

スクリーンショット

コード

  .topnav { 
 
       background-color: #333; 
 
       height: 50px; 
 
      } 
 

 
      .topnav li { 
 
       float: left; 
 
       display: block; 
 
       text-align: right; 
 
       padding: 14px 16px; 
 
       font-size: 17px; 
 
       background: transparent; 
 
       width: 150px; 
 
      } 
 

 
      .topnav li a{ 
 
       padding: 14px 16px; 
 
       color: #f2f2f2; 
 
       text-decoration: none; 
 
      } 
 

 
      .topnav li a:hover{ 
 
       background-color: #ddd; 
 
       color: black; 
 
      } 
 

 
      .topnav li.active { 
 
       background-color: #4CAF50; 
 
       color: white; 
 
      } 
 

 
      .subnav { 
 
       background-color: blue; 
 
       overflow: hidden; 
 
       display : none; 
 
       width: 200px; 
 
       margin-top: 15px; 
 
       padding: 0px; 
 
      } 
 

 
      .subnav li { 
 
       float: left; 
 
       display: block; 
 
       text-align: right; 
 
       padding: 14px 16px; 
 
       font-size: 17px; 
 
      } 
 

 
      .subnav li a { 
 
       color: #f2f2f2; 
 
       text-decoration: none; 
 
      } 
 

 
      .subnav li:hover { 
 
       background-color: #ddd; 
 
       color: black; 
 
      } 
 

 
      .subnav li.active { 
 
       background-color: #4CAF50; 
 
       color: white; 
 
      } 
 

 
      .topnav li:hover .subnav{ 
 
       display : block; 
 
      }

 <ul class="topnav" id="myTopnav"> 
 
      <li> 
 
       <a href="#news">Main 1</a> 
 
      </li> 
 
      <li> 
 
       <a href="#news">Main 2</a> 
 
      </li> 
 
      <li> 
 
       <a href="#news">Main 3 with sub</a> 
 
       <ul class="subnav"> 
 
        <li> 
 
         <a href="#news">sub 1</a> 
 
        </li> 
 
        <li> 
 
         <a href="#news">sub 2</a> 
 
        </li> 
 
       </ul> 
 
      </li> 
 
     </ul>