私のメニューをドロップダウンしたい

Question

ナビゲーションメニューをドロップダウンにしたいと思っています。私はさまざまな方法を試みたが、何も起こらなかった。

これは私のHTMLコードです：

<ul> 

    <li><a href="index.html">Home</a></li> 

    <li><a href="Countries.html">Geography</a></li> 

    <li><a href="English.html">English</a></li> 

    <li class="icon"> 
    <a href="javascript:void(0);" onclick="myFunction()">&#9776;</a> 
    </li> 

</ul> 

そして、これは私のCSSコードです：

ul { 
    padding: 15px; 
    margin: -10px; 
    overflow: hidden; 
    list-style-type: none; 
    background-color: #171B29; 
} 

li { 
    float: left; 
} 

li a { 
    display: inline-block; 
    color: #f2f2f2; 
    text-align: center; 
    padding: 14px 16px; 
    text-decoration: none; 
    transition: 0.3s; 
    font-size: 17px; 
} 

li a:hover { 
    background-color: #555; 
} 

li icon { 
    display: none; 
} 

@media screen and (max-width:680px) { 
    ul.topnav li:not(: first-child) { 
    display: none; 
    } 
    ul.topnav li.icon { 
    float: right; 
    display: inline-block; 
    } 
} 

@media screen and (max-width:680px) { 
    ul.topnav.responsive { 
    position: absolute; 
    } 
    ul.topnav.responsive li.icon { 
    position: absolute; 
    right: 0; 
    top: 0; 
    } 
    ul.topnav.responsive li { 
    float: none; 
    display: inline; 
    } 
    ul.topnav.responsive li a { 
    display: block; 
    text-align: left; 
    } 
} 

私はドロップダウンメニューを作成しようとすると、メニュー全体が非常に悪くなります。私は自分のコードが読み込みに非常に悪いことを知っていますが、誰かが解決策を持っていればそれを感謝します。アドバ

Answer 1

にありがとうあなたはかなりまともなコンテンツとその簡単に理解を持ってhttp://www.w3schools.com/css/css_dropdowns.asp
ウェブページ上で答えを見つけるようにしてください。

Answer 2

JavaScriptも含まれていますか？クリックするとトグル（myFunction）が指定されますので、JavaScriptも必要です。上記の記事に記載されているよう

はもちろん、あなただけの、ドロップダウンのためのHTMLとCSSを使用することができます。

Answer 3

あなたの問題は、あなたが<li>要素が垂直に積層させたいということであれば、あなたはフレキシボックスを使用して、非常に単純にこの問題を解決することができます。さらに、HTML & CSSだけで「ドロップダウン」エフェクトを実行する予定の場合は、ナビゲーションメニューの派生元である最上位要素に:hover疑似クラスを追加する必要があります。私が下にリンクしている例では、私は<ul>要素でそうしました。また、JavaScriptでmouseoverイベントを使用することもできます。

また、あなたが使用li icon CSSセレクタが実際に有効なセレクタではないことに注意してください。多くの人がアイコンのコンテナとして<i>タグを使用していますが、実際のアイコンタグはHTMLにありません。

https://jsfiddle.net/IsenrichO/8t4jhvcs/20/