下拉菜单项显示在右边而不是下来

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>