既存のナビゲーションバーにドロップダウンメニューが必要

Question

html、js、cssを使用してナビゲーションバーを作成しました。 コード全体を変換することなく 'SITE MAP'の1つに 'サブメニュー付きドロップダウンメニュー'を表示することは可能ですか、それともより良いコードがありますか？私は同じメニューを使用して複数のファイルを作成しているので、小さなコードを置換するだけの方が良いでしょう。

body {margin:0;} 
 
.topnav img { 
 
    float: left; 
 
} 
 

 
.topnav { 
 
    overflow: hidden; 
 
    background-color: white; 
 
} 
 

 
.topnav a { 
 
    float: left ; 
 
    display: block; 
 
    color: black; 
 
    text-align: center; 
 
    padding: 20px 20px; 
 
    text-decoration: none; 
 
    font-size: 20px; 
 
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; 
 
    letter-spacing: 1.8px; 
 
} 
 

 
.topnav .icon { 
 
    display: none; 
 
} 
 

 
#logo { 
 
    line-height: 0; 
 
    width: 30%; 
 
} 
 
#logo img { 
 
    width: 60%; 
 
    height: auto; 
 
} 
 

 
.menu a:hover, a:active 
 
{ 
 
text-decoration: none; 
 

 
} 
 
.active, a.active 
 
{ 
 
color: orange; 
 
}

<div class="topnav" id="myTopnav"> 
 
\t <div id="logo"><a href="l"> <img src="images/image"></a></div> 
 
\t \t <a href="index.html">Home</a> 
 
\t \t <a href="awards.html">Awards</a> 
 
\t \t <a href="site_map.html">Site Map</a> 
 
\t \t <a href="contact_us.html">Contact</a> 
 
\t \t </div>

これはスニペットの正確なO/Pを示すイマイチ。また、私はそれを反応させたい。

Answer 1

私はこの1つは完全にドロップダウンメニューを作成した:)しかし、それはサブメニューを作成することが可能である

body {margin:0;} 
 
.topnav img { 
 
    float: left; 
 
} 
 

 
.topnav { 
 
    overflow: hidden; 
 
    background-color: white; 
 
} 
 

 
.topnav a { 
 
    float: left ; 
 
    display: block; 
 
    color: black; 
 
    text-align: center; 
 
    padding: 20px 20px; 
 
    text-decoration: none; 
 
    font-size: 20px; 
 
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; 
 
    letter-spacing: 1.8px; 
 
} 
 
.dropdown-content { 
 
    display: none; 
 
    position: absolute; 
 
    background-color: #f9f9f9; 
 
    min-width: 160px; 
 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
 
    padding: 12px 16px; 
 
    z-index: 1; 
 
} 
 

 
.topnav a:hover .dropdown-content { 
 
    display: block; 
 
} 
 
.topnav .icon { 
 
    display: none; 
 
} 
 

 
#logo { 
 
    line-height: 0; 
 
    width: 30%; 
 
} 
 
#logo img { 
 
    width: 60%; 
 
    height: auto; 
 
} 
 

 
.menu a:hover, a:active 
 
{ 
 
text-decoration: none; 
 

 
} 
 
.active, a.active 
 
{ 
 
color: orange; 
 
}

<div class="topnav" id="myTopnav"> 
 
\t <div id="logo"> 
 
    <a href="l"> <img src="images/image"></a></div> 
 
\t \t <a href="index.html"> <span> Home </span> 
 
    <div class="dropdown-content"> 
 
    <p>1</p> 
 
    <p>2</p> 
 
     <p>3</p> 
 
    </div> 
 
    </a> 
 
\t \t <a href="awards.html"> <span> Awards </span> 
 
    
 
    <div class="dropdown-content"> 
 
    <p>4</p> 
 
    <p>5</p> 
 
     <p>6</p> 
 
    </div> 
 
    </a> 
 
\t \t <a href="site_map.html">Site Map</a> 
 
\t \t <a href="contact_us.html">Contact</a> 
 
\t \t </div>