css - 下拉菜单项显示在右侧而不是向下

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>			
 </div>

当我将鼠标悬停在第二个菜单项上时，子项显示在右侧而不是下方。我该如何解决？

我还想使用 CSS 将菜单点亮到右侧。有人可以帮忙吗？

Answer 1

使主菜单内联 block 元素。然后删除“a”标签上的 float 。 请参见下面的示例。 或者只是从 a 标签中删除 float 属性并将其放在菜单 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>			
 </div>