在悬停mega菜单上没有出现

Question

下面是我的代码，它的工作完美，但问题是当我滚动到我的左面板大型菜单出现在左侧面板内。但我想要的是出现在面板之外是否可滚动或不可滚动。 ＆＃34;尝试在班级＆＃34; .maindiv＆＃34;中删除（max-height：150px; overflow：auto;）并将鼠标悬停在上面的任何列表（ul＆gt; li）上，您将了解到底发生了什么。 （我已经发现了一个我想要的快照）

＆＃13;

＆＃13;

.mainediv {
  background: #444;
  width: 200px;
  padding: 0;
  max-height: 150px;
  overflow: auto;
}

.mainediv ul li {
  width: 100%;
  position: relative;
}

.mainediv ul li a {
  padding: 10px;
  display: inline-block;
  color: #fff;
  width: 100%;
}

.megamenu {
  background: #ccc;
  height: 200px;
  width: 100%;
  position: absolute;
  left: 200px;
  top: 0;
  display: none;
}

.mainediv ul li a:hover {
  background: #ccc;
}

.mainediv ul li:hover .megamenu {
  display: block;
}

＆＃13;

<div class="row">
  <div class="col-md-2 mainediv">
    <ul>
      <li>
        <a href="#">hover 1</a>
        <div class="megamenu">
          mega 1
        </div>
      </li>
      <li>
        <a href="#">hover 2</a>
        <div class="megamenu">
          mega 2
        </div>
      </li>
      <li>
        <a href="#">hover 3</a>
        <div class="megamenu">
          mega 3
        </div>
      </li>
      <li><a href="#">hover 4</a></li>
      <li><a href="#">hover 5</a></li>
      <li><a href="#">hover 6</a></li>
      <li><a href="#">hover 7</a></li>
      <li><a href="#">hover 8</a></li>
    </ul>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

使用left: 100%;解决您的问题。

.mainediv {
  background: #444;
  width: 200px;
  padding: 0;
  /*max-height: 150px;
  overflow: auto;*/
}

.mainediv ul li {
  width: 100%;
  position: relative;
  list-style: none;
}

.mainediv ul li a {
  padding: 10px;
  display: inline-block;
  color: #fff;
  width: 100%;
}

.megamenu {
  background: #ccc;
  height: 200px;
  width: 100%;
  position: absolute;
  left: 100%;
  top: 0;
  display: none;
}

.mainediv ul li a:hover {
  background: #ccc;
}

.mainediv ul li:hover .megamenu {
  display: block;
}

<div class="row">
  <div class="col-md-2 mainediv">
    <ul>
      <li>
        <a href="#">hover 1</a>
        <div class="megamenu">
          mega 1
        </div>
      </li>
      <li>
        <a href="#">hover 2</a>
        <div class="megamenu">
          mega 2
        </div>
      </li>
      <li>
        <a href="#">hover 3</a>
        <div class="megamenu">
          mega 3
        </div>
      </li>
      <li><a href="#">hover 4</a></li>
      <li><a href="#">hover 5</a></li>
      <li><a href="#">hover 6</a></li>
      <li><a href="#">hover 7</a></li>
      <li><a href="#">hover 8</a></li>
    </ul>
  </div>
</div>

希望它会对你有所帮助。

Answer 2

我创建了以下代码。我想，这是你能做的更好的方法。 我使用jquery获取了megamenu的左侧，获取了outerWidth标记的li及其top到position().top li 1}}。

然后，每次悬停时我都会将课程添加到li。然后为具有该类的孩子a添加背景。这里还有更新的jsFiddle。

＆＃13;

＆＃13;

$('.mainediv ul li').hover(function(){
	$(this).find('.megamenu').css('top', $(this).position().top);
  $(this).find('.megamenu').css('left', $(this).outerWidth());
  $(this).toggleClass('bg');
});

＆＃13;

*{ box-sizing: border-box; padding: 0; margin: 0; }

.mainediv {
  background: #444;
  width: 200px;
  height: 250px;
  overflow-y: scroll;
  overflow-x: hidden;
}

.mainediv ul li {
  display: block;
}

.mainediv ul li a {
  color: #fff;
  padding: 10px;
  display: block;
}

.megamenu {
  background: #ccc;
  height: 200px;
  width: 50%;
  display: none;
  position: absolute
}
.mainediv ul li:hover > .megamenu{
  display: block;
}
.mainediv ul li a:hover, .mainediv ul li.bg a{
  background: #ccc;
}

＆＃13;

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<div class="row">
  <div class="col-md-2 mainediv">
    <ul>
      <li>
        <a href="#">hover 1</a>
        <div class="megamenu">
          mega 1
        </div>
      </li>
      <li>
        <a href="#">hover 2</a>
        <div class="megamenu">
          mega 2
        </div>
      </li>
      <li>
        <a href="#">hover 3</a>
        <div class="megamenu">
          mega 3
        </div>
      </li>
      <li><a href="#">hover 4</a></li>
      <li><a href="#">hover 5</a></li>
      <li><a href="#">hover 6</a></li>
      <li><a href="#">hover 7</a></li>
      <li><a href="#">hover 8</a></li>
    </ul>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

希望这会对你有所帮助。 ：）