悬停在菜单栏外显示 div答案

【问题标题】：on hover display div out of the menu bar悬停在菜单栏外显示 div
【发布时间】：2017-11-12 18:43:14
【问题描述】：

我有一个悬停菜单栏，它应该显示一个子菜单。我正在显示子菜单，但它将整个主菜单移到一边。我希望子菜单脱离主菜单，在主菜单旁边。

我的 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;
 }

【问题讨论】：

标签： html css drop-down-menu hover

【解决方案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>

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

【讨论】：

为什么不只是.MenuBar ul li:hover .submenu { display: inline-block; position: relative; top: 20px; }。您不必为每个 submenu 类重复此操作。

【解决方案2】：

您可以为此使用以下 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%;
}

【讨论】：

【解决方案3】：

将子菜单 div 放在列表之外。如果你把它扔到一堆列表项中并使用显示属性，它将影响列表结构。将该 div 放在列表项之外，使用 css 定位子菜单 div，使其始终与相应的菜单项对齐，并添加悬停效果。

【讨论】：

【解决方案4】：

像这样更改 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>

【讨论】：