在懸停巨型菜單不會出現

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>

希望這會幫助你。 :)