在悬停显示div菜单栏中

Question

我在鼠标悬停时有一个菜单栏，它应该显示一个子菜单。 我正在显示子菜单，但是它将整个主菜单移到一边。 我想要主菜单旁边的子菜单。

我的HTML代码

<div class="MenuBar">
<ul>

    <li><a href="#"><img src="#"><br>text1</a></li>
        <div id="submenu">
            this is  a test div
        </div>

    <li><a href="#"><img src="#"><br>text2</a></li>

    <li><a href="#"><img src="#"><br>text3</a></li>
</ul>

CSS

#submenu {
  display: none;
}

.MenuBar ul li a:hover  #submenu {
  display: block;
  position: relative;
  top: 20px;
 }

Answer 1

像这样更改HTML：

 <li>
     <a href="#"><img src="#"><br>text1</a>
     <div id="submenu"><-----------------submenu must be child li
        this is  a test div
     </div>
</li>

和CSS像这样：

.MenuBar ul li a:hover +  #submenu {<--------------use + selector
  display: block;
  position: relative;<-----Remove This
  top: 20px;<------Remove This
  margin-top: 20px;<----------Add This
  margin-bottom: 10px;<-------Add This
 }

完整代码：

 #submenu { display: none; } img { width: 20px; } ul { list-style: none; } .MenuBar ul li a:hover + #submenu { display: block; margin-top: 20px; margin-bottom: 10px; } 

 <div class="MenuBar"> <ul> <li> <a href="#"> <img src="https://www.seeklogo.net/wp-content/uploads/2012/12/apple-logo-eps-logo-vector-400x400.png"><br>text1 </a> <div id="submenu"> this is a test div </div> </li> <li> <a href="#"> <img src="https://www.seeklogo.net/wp-content/uploads/2012/12/apple-logo-eps-logo-vector-400x400.png"><br>text2 </a> </li> <li> <a href="#"> <img src="https://www.seeklogo.net/wp-content/uploads/2012/12/apple-logo-eps-logo-vector-400x400.png"><br>text3 </a> </li> </ul> </div> 

Answer 2

我想这就是你所追求的。 我已经将类添加到列表中，将您的id子菜单更改为class，并将子菜单项添加到了所有列表中。

 .MenuBar ul li .submenu { display: none; } .MenuBar ul li.men1:hover .submenu { display: inline-block; position: relative; top: 20px; } .MenuBar ul li.men2:hover .submenu { display: inline-block; position: relative; top: 20px; } .MenuBar ul li.men3:hover .submenu { display: inline-block; position: relative; top: 20px; } 

 <div class="MenuBar"> <ul> <li class="men1"><a href="#">text1</a> <div class="submenu"> hovered 1st </div></li> <li class="men2"><a href="#">text2</a> <div class="submenu"> hovered 2nd </div></li> <li class="men3"><a href="#">text3</a><div class="submenu"> hovered 3rd </div></li> </ul> 

让我知道这是否是您所追求的。

Answer 3

您可以为此使用以下CSS：

如果要在父菜单的底部显示子菜单

.MenuBar ul li {
  position: relative;
}
.MenuBar ul li:hover #submenu {
  display: block;
  position: absolute;
  top: 100%;
  left: 0px;
}

或者如果您想在父菜单的右侧显示子菜单

.MenuBar ul li {
  position: relative;
}
.MenuBar ul li:hover #submenu {
  display: block;
  position: absolute;
  top: 0;
  left: 100%;
}

Answer 4

将子菜单div放在列表之外。 如果将其扔到一堆列表项中并使用display属性，它将影响列表结构。 将div放在列表项之外，将子菜单div与css放置在一起，以便它始终与相应的菜单项对齐，它们会增加您的悬停效果。