二級垂直菜單消失時懸停

我有多級垂直菜單，當我嘗試去第二級，二級菜單消失。二級垂直菜單消失時懸停

和二級菜單的高度（它工作正常的瀏覽器的一些舊版本）也是不等於第一級。我想這樣的事情

enter image description here

我已經貼我現有的代碼

http://codepen.io/anon/pen/Mwwdqd 雖然代碼不能在codepen上工作，但可以將html，css複製到單獨的文件中。

<!DOCTYPE html> 
<head> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> 
<link rel="stylesheet" type="text/css" href="style.css"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
</head> 
<html lang="en"> 
<body> 
<div id="wrapper"> 
<div class="main-content"> 

<div class="topnav"> 
<div class="account"> 
<ul><li>Nathan Smith</li> 
</ul> 
</div> 

<div class="accountname"> 
<ul><li>My Account</li></ul> 
</div> 


<div class="logout"> 
<ul><li>Log Out</li></ul> 
</div> 

<div class="addtofav"><ul><li>Add to Favourties</li></ul></span></div> 

<div class="name"><ul><li>Voyager</li></ul></span></div> 


<div>zxczxc czx</div> 


</div> 
</div> 






<div class="sidebar"> 
<div class="left"> 
<div class="row col-xs-6 col-sm-3 col-md-2 logo"> 
<div class="imageinbottomtextontop"> 
<div class="titletextimage_image"> 
<a href="/content/count/en/default.html" target="_top"> 
<img title="COUNT" style="width:px; height:px;" src="images/logo.png" alt="COUNT"> 
</a> 
</div> 
</div> 
</div> 
</div> 


<div class="box"> 
    <div class="container-1"> 
     <span class="icon"><i class="fa fa-search"></i></span> 
     <input type="search" id="search" placeholder="Search..." /> 
    </div> 
</div> 

<div id="left-menu"> 

    <div> 
      <ul class="nav nav-pills nav-stacked mn-vnavigation"> 

       <li class="dropdown-submenu active"> 
        <a tabindex="-1" href="#">Client Advice</a> 


        <ul class="dropdown-menu"> 

         <li class="dropdown-submenu"><a tabindex="-1" href="#">Pre-advice</a></li> 
         <li class="dropdown-submenu"><a href="#">Strategy & Technical</a></li> 
         <li class="dropdown-submenu"><a href="#">Research</a></li> 
         <li class="dropdown-submenu active"> 
          <a href="#">APL & Products</a> 
          <ul class="dropdown-menu parent last-level"> 
           <li style=" border-bottom: 1px solid #ccc;"> 
            <a href="#"> 
             Approved Product List 
             <span aria-hidden="true" class="glyphicon glyphicon-plus menu-align"></span> 
             <span aria-hidden="true" class="glyphicon glyphicon-minus menu-align" style="display:none;"></span> 
            </a> 

            <ul class="child"> 
             <li style="padding:10px 15px;">Platforms</li> 
             <li style="padding: 10px 15px;">Managed Funds</li> 
             <li style="padding: 10px 15px;">Wealth Protection</li> 
             <li style="padding: 10px 15px;">Listed Securities</li> 
             <li style="padding: 10px 15px;">Wealth Protection</li> 
             <li style="padding: 10px 15px;">Listed Securities</li> 
             <li style="padding: 10px 15px;">Listed Securities</li> 
            </ul> 

           </li> 
           <li style=" border-bottom: 1px solid #ccc;"><a href="#">Model Portfolios</a></li> 
           <li style=" border-bottom: 1px solid #ccc;"><a href="#">Non-approved Products</a></li> 
          </ul> 
         </li> 
         <li class="dropdown-submenu"><a href="#">Implementation</a></li> 
         <li class="dropdown-submenu"><a href="#">Review</a></li> 
         <li class="dropdown-submenu"><a href="#">Execution Only</a></li> 
        </ul> 

       </li> 
       <li class="dropdown-submenu menu-align"><a href="#" >Personal Development</a></li> 
       <li class="dropdown-submenu menu-align "><a href="#" >Practice</a></li> 
       <li class="dropdown-submenu menu-align "><a href="#" >News</a></li> 
      </ul> 
     </div> 

</div> 







</div> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
    <!-- Include all compiled plugins (below), or include individual files as needed --> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> 
    <script> 
     $('.child').hide(); //Hide children by default 

     $('.parent').children().click(function() { 
      if (event.preventDefault) event.preventDefault() 
      else event.returnValue = false; 
      $(this).children('.child').slideToggle('slow'); 
      $(this).find('span').toggle(); 
     }); 
    </script> 
</body> 
</html>

來源

2015-05-04 F11

刪除margin-left: 25px;從.dropdown-submenu > .dropdown-menu

它消失，因爲當您試圖使你離開維持懸停狀態初始元素徘徊到你進入的利潤率第二個菜單。改爲使用padding。

使用開發人員工具檢查元素（右鍵單擊>檢查）以更好地直觀地看到元素周圍的區域。

來源

2015-05-04 04:36:47 Max

感謝，它的固定和高度問題做什麼？第二層次的高度與第一層菜單不一樣。 – F11

二級垂直菜單消失時懸停

回答

相關問題