在悬停巨型菜单不会出现

Question

下面是我的代码，它的工作完美，但问题是当我滚动左侧面板巨型菜单显示在左侧面板。但我想要的是出现在面板以外是否可滚动或不可滚动。 “尝试在类”.maindiv“中删除（max-height：150px; overflow：auto;）并将鼠标悬停在上面的任何一个列表（ul> li）上，并且您将明白发生了什么事情（我已经连接了一个快照这正是我想要的）

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

<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 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通过获得li标签的outerWidthli的top到position().top来得到megamenu的左边。

然后，我每次把这个悬停都添加到li。然后将该背景添加到具有该类的子女a。这里也是更新的jsFiddle。

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

*{ 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; 
 
}

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

希望这会帮助你。 :)