Question

我的CSS需要帮助。我有以下菜单：

＆＃13;

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

＆＃13;

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

＆＃13;

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

此外，我想使用CSS来向右下方菜单。有人可以帮忙吗？

Answer 1

使用 CSS位置。将 position：relative 添加到 .h-menu ＆amp; position：absolute to .dropdown-content 。并使用 CSS Flexbox 设置元素的样式，例如：

＆＃xA;＆＃xA;

  .h-menu {＆＃xA; display：flex;＆＃xA; position：relative;＆＃xA;}＆＃xA;＆＃xA; .h-menu .menu-item .dropdown-content {＆＃xA; position：absolute;＆＃xA;顶部：100％;＆＃xA; display：flex;＆＃xA; flex-direction：column;＆＃xA;}＆＃xA;

＆＃xA;＆＃xA;

看一下下面的代码：

＆＃xA; ＆＃xA;

＆＃xD;＆＃xA ;

＆＃xD;＆＃xA;

  .h-menu .menu-item .dropdown -content a {display：none;}＆＃xD;＆＃xA;＆＃xD;＆＃xA; .h-menu .menu-item：hover .dropdown-content a {＆＃xD;＆＃xA; display：block;＆＃xD;＆＃xA;}＆＃xD;＆＃xA;＆＃xD;＆＃xA; .h-menu {＆＃xD;＆＃xA; display：flex;＆＃xD;＆＃xA;位置：相对;＆＃xD;＆＃xA;}＆＃xD;＆＃xA;＆＃xD;＆＃xA; .h-menu .menu-item .dropdown-content {＆＃xD;＆＃xA; position：absolute;＆＃xD;＆＃xA;顶部：100％;＆＃xD;＆＃xA; display：flex;＆＃xD;＆＃xA; flex-direction：column;＆＃xD;＆＃xA;}＆＃xD;＆＃xA;＆＃xD;＆＃xA; .h-menu .menu-item a {＆＃xD;＆＃xA;显示：块;＆＃的xD;＆＃XA; float：left;＆＃xD;＆＃xA; text-decoration：none;＆＃xD;＆＃xA; margin：1em;＆＃xD;＆＃xA;}

＆＃xD;＆＃xA;

  ＆lt; div class =“h-menu”＆gt;＆＃xD;＆＃xA; ＆lt; div class =“menu-item”＆gt;＆＃xD;＆＃xA; ＆lt; a href =“”＆gt;菜单项1＆lt; / a＆gt;＆＃xD;＆＃xA; ＆LT; / DIV＆GT;＆＃的xD;＆＃XA;＆＃的xD;＆＃XA; ＆lt; div class =“menu-item”＆gt;＆＃xD;＆＃xA; ＆lt; a href =“”＆gt;菜单项2＆lt; / a＆gt;＆＃xD;＆＃xA; ＆lt; div class =“dropdown-content”＆gt;＆＃xD;＆＃xA; ＆lt; a href =“”＆gt;子项目1＆lt; / a＆gt;＆＃xD;＆＃xA; ＆lt; a href =“”＆gt;子项目2＆lt; / a＆gt;＆＃xD;＆＃xA; ＆lt; a href =“”＆gt;子项目3＆lt; / a＆gt;＆＃xD;＆＃xA; ＆LT; / DIV＆GT;＆＃的xD;＆＃XA; ＆LT; / DIV＆GT;＆＃的xD;＆＃XA;＆＃的xD;＆＃XA; ＆lt; div class =“menu-item”＆gt;＆＃xD;＆＃xA; ＆lt; a href =“”＆gt;菜单项3＆lt; / a＆gt;＆＃xD;＆＃xA; ＆LT; / DIV＆GT; ＆＃的xD;＆＃XA; ＆LT; / DIV＆GT;

＆＃的xD;＆＃XA;

＆＃的xD;＆＃XA; 
＆ #xA;＆＃xA; 希望这有帮助！＆＃xA;

Answer 2

使主菜单内联块元素。然后移除＆＃34; a＆＃34;标签。见下面的例子。或者只是从a标签中删除float属性并将其放在菜单div上

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

这是另一种选择，使用元素位置。

＆＃13;

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

＆＃13;

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

＆＃13;

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>

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

4 个答案: