如何在左侧下拉菜单中打开子菜单

Question

当我们将鼠标悬停在项目上方时，在下面的下拉菜单中，子菜单向右打开。但是，我希望它向左打开。

下面的代码：

HTML：

<div id="mn-wrapper"> 

    <div class="mn-sidebar"> 
     <div class="mn-toggle"><i class="fa fa-bars"></i></div> 
     <div class="mn-navblock"> 
      <ul class="mn-vnavigation"> 
       <li class="dropdown-submenu active"> 
        <a tabindex="-1" href="#">LARGE HOLDINGS</a> 
      <ul class="dropdown-menu third-menu"> 
       <li class="dropdown-submenu active"><a href="#">LHO</a> 

<ul class="dropdown-menu parent third-menu"> 
        <li style=" border-bottom: 1px solid #ccc;"> 
      <a href="#">Contact Us 
      <span aria-hidden="true" class="glyphicon glyphicon-plus pull-right"></span> 
      <span aria-hidden="true" class="glyphicon glyphicon-minus pull-right" style="display:none;"></span> 
       </a> 

<ul class="child"> 
<li style="padding:10px 0; color:white;"><font color = C8CBCC size = 2><b>Hotline:</b></font> 8828 5600</li> 
<li style="padding:10px 0; color:white;"><font color = C8CBCC size = 2 ><b>Support Mailbox:</b></font> <font face = "Barclays Sans">Compliance Application 

Support L1</font></li> 
</ul> 
</li> 

<li style=" border-bottom: 1px solid #ccc;"> 
<a href="#">Application Overview 
<span aria-hidden="true" class="glyphicon glyphicon-plus pull-right"></span> 
<span aria-hidden="true" class="glyphicon glyphicon-minus pull-right" style="display:none;"></span> 
</a> 

<ul class="child"> 
<li style="padding:10px 0; color:white;"><font color = C8CBCC size = 2><b>LHO </b></font></br></br><font size=2> Web Application to track large equity 

holdings and, where appropriate, report to regulators. It is owned by the Compliance Department.</font></li> 
</ul> 
</li>  
</ul> 
</li> 



     </ul> 




</li> 



<li class="dropdown-submenu active"> 
        <a tabindex="-1" href="#">ORCHESTRIA</a> 
      <ul class="dropdown-menu third-menu"> 
       <li class="dropdown-submenu active"><a href="#">ORCHESTRIA</a> 

<ul class="dropdown-menu parent third-menu"> 
        <li style=" border-bottom: 1px solid #ccc;"> 
      <a href="#">Contact Us 
      <span aria-hidden="true" class="glyphicon glyphicon-plus pull-right"></span> 
      <span aria-hidden="true" class="glyphicon glyphicon-minus pull-right" style="display:none;"></span> 
       </a> 

<ul class="child"> 
<li style="padding:10px 0; color:white;"><font color = C8CBCC size = 2><b>Hotline:</b></font> 8828 5600</li> 
<li style="padding:10px 0; color:white;"><font color = C8CBCC size = 2 ><b>Support Mailbox:</b></font> <font face = "Barclays Sans">Compliance Application 

Support L1</font></li> 
</ul> 
</li> 

<li style=" border-bottom: 1px solid #ccc;"> 
<a href="#">Application Overview 
<span aria-hidden="true" class="glyphicon glyphicon-plus pull-right"></span> 
<span aria-hidden="true" class="glyphicon glyphicon-minus pull-right" style="display:none;"></span> 
</a> 

<ul class="child"> 
<li style="padding:10px 0; color:white;"><font color = C8CBCC size = 2><b>ORCHESTRIA</b></font> </br></br><font size=2> E-mail and instant messaging 

monitoring and intelligent review using CA DLP.</font></li> 
</ul> 
</li>  
</ul> 
</li> 




     </ul> 




</li> 
</div> 

</div> 

</div> 

CSS：

div.container { 

margin-left: 5%; 
margin-right: 10%; 


} 

div.box { 
    box-sizing: border-box; 
    width: 50%; 
    border: 1em white; 
    float: left; 

} 



nav { 

/*background-image: url("http://teams.barclays.intranet/sites/compliancertb/Shared%20Documents/rtb3.bmp ");*/ 

background-color: #CCFFFF; 
margin-left: 15px; 
margin-right: 40px; 

} 


.back div { 
width: 930px; 
height: 400px; 
background-color: #DBFFFF; 
} 

table { 
    border-collapse: collapse; 
} 
td { 
    padding: 0 13px 0 13px; 
font-family: Barclays Sans; 
font-size: 13px; 
} 


tr.spaceUnder > td 
{ 
padding-bottom: 1em; 



} 


.third-menu{ 
    position: absolute; 
    right:0; 
    top:0; 
} 


.dropdown-submenu { 
    border-bottom: 1px solid #ccc; 
    position:relative; 
} 


#mn-wrapper { 
    display: block; 
    width: 100%; 
    position: absolute; 
    height: 30px; 


} 
.mn-sidebar { 
    margin-left: 40px; 
    display: block; 
    position: relative; 
    vertical-align: middle; 
    padding-bottom: 1px; 
    background: #333333; 
    width: 250px; 
    z-index: 2; 
} 


#mn-cont { 
    display: block; 
    vertical-align: top;  
    position: relative; 
    padding: 10; 
} 
.container { 
    margin-right: auto; 
} 
.cnt-mcont { 
    background-color: #F6F6F6; 
    color: inherit; 
    font-size: 13px; 
    font-weight: 200; 
    line-height: 21px; 
    padding: 15px 30px 30px 30px; 
    margin-top: 0; 
    height: 101vh; 
} 
.mn-sidebar .mn-toggle { 
    display: none; 
    padding: 10px 0; 
    text-align: center; 
    cursor: pointer; 
} 
.mn-vnavigation { 
    margin: 0 0 0 0; 
    padding: 0; 
    border-top: 2px solid #CCFFFF; 
    border-bottom: 1px solid #CCFFFF; 
border-left: 5px solid #CCFFFF; 
border-right: 5px solid #CCFFFF; 

} 
.mn-vnavigation li a { 
    border-top: 2px solid #CCFFFF; 
    border-bottom: 1px solid #CCFFFF; 
    display: block; 
    padding: 14px 18px 13px 15px; 
    color: #fff; 
    text-decoration: none; 
    font-size: 12px; 
    font-weight: 300; 
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3); 
    white-space: nowrap; 
} 
.dropdown-submenu > 
.dropdown-menu { 
    top: 0; 
    left: 100%; 
    margin-top: -6px; 
    margin-left: -1px; 
    /*height: 590px; */ 
    width: 310px; 
    background: #333333; 
} 
.dropdown-submenu:hover > 
.dropdown-menu { 

    display: list-item; 
} 


.dropdown-submenu > a:after { 

    display: list-item; 
    content: " "; 
    float: right; 
    width: 0; 
    height: 0; 
    border-color: transparent; 
    border-style: solid; 
    border-width: 5px 0 5px 5px; 
    border-left-color: #ccc; 
    margin-top: 5px; 
    margin-right: -10px; 
} 
.dropdown-submenu:hover > a:after { 
    border-left-color: #fff; 
} 
.dropdown-submenu.pull-left { 
    float: none; 
} 
.dropdown-submenu.pull-left > .dropdown-menu { 
    left: -100%; 
    margin-left: 10px; 
    -webkit-border-radius: 6px 0 6px 6px; 
    -moz-border-radius: 6px 0 6px 6px; 
    border-radius: 6px 0 6px 6px; 
} 
ul { 
    list-style: none; 
} 
ul.dropdown-menu.parent { 
    margin-top: -1px; 
} 
.bottom-mn { 
    bottom:0px;   
    position:absolute; 
    width:100%; 
} 

JS：

$('.child').hide(); //Hide children by default 
$('.parent').children().click(function() { 
    event.preventDefault(); 
    $(this).children('.child').slideToggle('slow'); 
    $(this).find('span').toggle(); 
}); 

然后codepen链接：

http://codepen.io/anon/pen/LpxVdv

请告诉我该怎么做？

Answer 1

您可以修改.dropdown-submenu:hover > .dropdown-menu css规则：

.dropdown-submenu:hover > .dropdown-menu { 
    display: list-item; 
    left: -310px; 
} 

很明显，你需要在左手侧的空间来容纳这样的：

：下面OP评论基于

.mn-sidebar { 
    margin-left: 600px; 
    ... 
} 

编辑

.dropdown-submenu:hover > .dropdown-menu { 
    display: list-item; 
} 
.dropdown-submenu:nth-child(2):hover > .dropdown-menu, 
.dropdown-submenu:nth-child(2) > .dropdown-menu > .dropdown-submenu:hover > .dropdown-menu { 
    display: list-item; 
    left: -310px; 
}