下拉菜單項顯示在右邊而不是下來

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>

當我將鼠標懸停在第二個菜單項會發生什麼事，子項顯示在右邊，而不是下降。我該如何解決它？

另外我想用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 Flexbox的元素，如：

.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>