html - 在菜单栏外悬停显示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

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

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

如果这就是您想要的，请告诉我。