サブメニューがドロップダウンされずに親メニューの隣に表示される

Question

ブロガーテンプレートを準備しています。ナビゲーションメニューで問題が発生します。親メニューの隣に表示されるサブメニュー。しかし、落ちることはありません。 testblogorfy.blogspot.comをご覧ください。 「pagesource」を経由して ビューのCSS - > #menuや「ヘッダ・ナビゲーション」

Answer 1

あなたはあなたのサポートのために、より明確化https://www.w3schools.com/css/css_dropdowns.asp.

ために、このリンクを読むことができる私は、上記のリンクから同じコードを貼り付けています。 基本的には、サブメニューの場合、li要素内にネストされた別のulを作成する必要があります。

HTML

<ul> 
     <li><a href="#home">Home</a></li> 
     <li><a href="#news">News</a></li> 
     <li class="dropdown"> 
     <a href="javascript:void(0)" class="dropbtn">Dropdown</a> 
     <div class="dropdown-content"> 
      <a href="#">Link 1</a> 
      <a href="#">Link 2</a> 
      <a href="#">Link 3</a> 
     </div> 
     </li> 
    </ul> 

CSS

ul { 
     list-style-type: none; 
     margin: 0; 
     padding: 0; 
     overflow: hidden; 
     background-color: #333; 
    } 

    li { 
     float: left; 
    } 

    li a, .dropbtn { 
     display: inline-block; 
     color: white; 
     text-align: center; 
     padding: 14px 16px; 
     text-decoration: none; 
    } 

    li a:hover, .dropdown:hover .dropbtn { 
     background-color: red; 
    } 

    li.dropdown { 
     display: inline-block; 
    } 

    .dropdown-content { 
     display: none; 
     position: absolute; 
     background-color: #f9f9f9; 
     min-width: 160px; 
     box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
     z-index: 1; 
    } 

    .dropdown-content a { 
     color: black; 
     padding: 12px 16px; 
     text-decoration: none; 
     display: block; 
     text-align: left; 
    } 

    .dropdown-content a:hover {background-color: #f1f1f1} 

    .dropdown:hover .dropdown-content { 
     display: block; 
    }