ドロップダウンメニューの項目は右に表示されますが、下には表示されません。

Question

私のCSSには助けが必要です。

.h-menu .menu-item .dropdown-content a { display: none;} 
 
.h-menu .menu-item:hover .dropdown-content a { 
 
    display: block; 
 
} 
 

 
.h-menu .menu-item a { 
 
    display:block; 
 
    float: left; 
 
    text-decoration: none; 
 
    margin: 1em; 
 
}

<div class="h-menu"> 
 
    <div class="menu-item"> 
 
     <a href="">Menu Item 1</a> 
 
    </div> 
 

 
    <div class="menu-item"> 
 
     <a href="">Menu Item 2</a> 
 
     <div class="dropdown-content"> 
 
     <a href="">Sub-item 1</a> 
 
     <a href="">Sub-item 2</a> 
 
     <a href="">Sub-item 3</a> 
 
     </div> 
 
    </div> 
 

 
     <div class="menu-item"> 
 
     <a href="">Menu item 3</a> 
 
    </div> \t \t \t 
 
</div>

私は2番目のメニュー項目にカーソルを合わせると、サブ項目が右側に表示されていないダウンされている何が起こる：私は、次のメニューがあります。どうすれば修正できますか？

また、私は右のメニューを照らすためにCSSを使用したいと思います。誰かが助けてくれますか？

Answer 1

メインメニューインラインブロック要素を作成します。その後、 "a"タグのフロートを取り除きます。 以下の例を参照してください。 または単にタグからフロート属性を削除し、メニューのdivに

.h-menu { 
 
text-align: right; 
 
} 
 

 
.menu-item { 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    border: 1px red solid;/**Remove for debbugging purposes**/ 
 
} 
 

 
.h-menu .menu-item .dropdown-content a { display: none;} 
 
.h-menu .menu-item:hover .dropdown-content a { 
 
    display: block; 
 
} 
 

 
.h-menu .menu-item a { 
 
    display:block; 
 
    /**float: left**/ 
 
    text-decoration: none; 
 
    margin: 1em; 
 
}

<div class="h-menu"> 
 
    <div class="menu-item"> 
 
     <a href="">Menu Item 1</a> 
 
    </div> 
 

 
    <div class="menu-item"> 
 
     <a href="">Menu Item 2</a> 
 
     <div class="dropdown-content"> 
 
     <a href="">Sub-item 1</a> 
 
     <a href="">Sub-item 2</a> 
 
     <a href="">Sub-item 3</a> 
 
     </div> 
 
    </div> 
 

 
     <div class="menu-item"> 
 
     <a href="">Menu item 3</a> 
 
    </div> \t \t \t 
 
</div>

Answer 2

CSSの位置。 position: relative〜.h-menu & position: absolute〜.dropdown-contentを追加します。そしてスタイルのようなCSSフレキシボックス使用して、要素、：このことができます

.h-menu .menu-item .dropdown-content a { display: none;} 
 

 
.h-menu .menu-item:hover .dropdown-content a { 
 
    display: block; 
 
} 
 

 
.h-menu { 
 
    display: flex; 
 
    position: relative; 
 
} 
 

 
.h-menu .menu-item .dropdown-content { 
 
    position: absolute; 
 
    top: 100%; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 

 
.h-menu .menu-item a { 
 
    display:block; 
 
    float: left; 
 
    text-decoration: none; 
 
    margin: 1em; 
 
}

<div class="h-menu"> 
 
     <div class="menu-item"> 
 
      <a href="">Menu Item 1</a> 
 
     </div> 
 

 
     <div class="menu-item"> 
 
      <a href="">Menu Item 2</a> 
 
      <div class="dropdown-content"> 
 
       <a href="">Sub-item 1</a> 
 
       <a href="">Sub-item 2</a> 
 
       <a href="">Sub-item 3</a> 
 
      </div> 
 
     </div> 
 

 
     <div class="menu-item"> 
 
      <a href="">Menu item 3</a> 
 
     </div>   
 
</div>

希望：

.h-menu { 
    display: flex; 
    position: relative; 
} 

.h-menu .menu-item .dropdown-content { 
    position: absolute; 
    top: 100%; 
    display: flex; 
    flex-direction: column; 
} 

は以下のスニペットを見て！

Answer 3

要素の位置を使用する別のオプションがあります。

.h-menu { 
 
    text-align: right; 
 
} 
 
.h-menu .menu-item { 
 
    display: inline-block; 
 
    position: relative; 
 
} 
 
.h-menu .menu-item .dropdown-content { 
 
    display: none; 
 
    position: absolute; 
 
    top:40px; left: 0; 
 
} 
 
.h-menu .menu-item .dropdown-content a { 
 
    display: block; 
 
} 
 
.h-menu .menu-item:hover .dropdown-content { 
 
    display: block; 
 
} 
 

 
.h-menu .menu-item a { 
 
    display:block; 
 
    float: left; 
 
    text-decoration: none; 
 
    margin: 1em; 
 
}

<div class="h-menu"> 
 
     <div class="menu-item"> 
 
      <a href="">Menu Item 1</a> 
 
     </div> 
 

 
     <div class="menu-item"> 
 
      <a href="">Menu Item 2</a> 
 
      <div class="dropdown-content"> 
 
       <a href="">Sub-item 1</a> 
 
       <a href="">Sub-item 2</a> 
 
       <a href="">Sub-item 3</a> 
 
      </div> 
 
     </div> 
 

 
     <div class="menu-item"> 
 
      <a href="">Menu item 3</a> 
 
     </div>   
 
</div>

Answer 4

.h-menu .menu-item{ 
 
    position: relative; 
 
    float: left; 
 
} 
 
.h-menu .menu-item .dropdown-content{ 
 
    position: relative; 
 
} 
 
.h-menu .menu-item .dropdown-content a { 
 
    display: none; 
 
} 
 

 
.h-menu .menu-item:hover .dropdown-content a { 
 
    display: block; 
 
} 
 
.h-menu .menu-item a { 
 
    text-decoration: none; 
 
    margin: 1em; 
 
}

<div class="h-menu"> 
 
     <div class="menu-item"> 
 
      <a href="">Menu Item 1</a> 
 
     </div> 
 

 
     <div class="menu-item"> 
 
      <a href="">Menu Item 2</a> 
 
      <div class="dropdown-content"> 
 
       <a href="">Sub-item 1</a> 
 
       <a href="">Sub-item 2</a> 
 
       <a href="">Sub-item 3</a> 
 
      </div> 
 
     </div> 
 

 
     <div class="menu-item"> 
 
      <a href="">Menu item 3</a> 
 
     </div>   
 
</div>