Уль-сектор перемещается влево

Question

Я хочу переместить Все ul секция слева.

это означает, что уль раздел (второй раздел меню

) в этой картине будет открыт в левом меню

вместо правой.

, пожалуйста, помогите мне.

my menu

my html code

.cd-dropdown-content,.cd-dropdown-content ul { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    overflow-x: hidden; 
 
    overflow-y: auto; 
 
    -webkit-transition: -webkit-transform 0.3s; 
 
    -moz-transition: -moz-transform 0.3s; 
 
    transition: transform 0.3s; 
 
    padding-top: 50px; 
 
}

Answer 1

jQuery(document).ready(function($){ 
 
\t //open/close mega-navigation 
 
\t $('.cd-dropdown-trigger').on('click', function(event){ 
 
\t \t event.preventDefault(); 
 
\t \t toggleNav(); 
 
\t }); 
 

 
\t //close meganavigation 
 
\t $('.cd-dropdown .cd-close').on('click', function(event){ 
 
\t \t event.preventDefault(); 
 
\t \t toggleNav(); 
 
\t }); 
 

 
\t //on mobile - open submenu 
 
\t $('.has-children').children('a').on('click', function(event){ 
 
\t \t //prevent default clicking on direct children of .has-children 
 
\t \t event.preventDefault(); 
 
\t \t var selected = $(this); 
 
\t \t selected.next('ul').removeClass('is-hidden').end().parent('.has-children').parent('ul').addClass('move-out'); 
 
\t }); 
 

 
\t //on desktop - differentiate between a user trying to hover over a dropdown item vs trying to navigate into a submenu's contents 
 
\t var submenuDirection = (!$('.cd-dropdown-wrapper').hasClass('open-to-left')) ? 'right' : 'left'; 
 
\t $('.cd-dropdown-content').menuAim({ 
 
     activate: function(row) { 
 
     \t $(row).children().addClass('is-active').removeClass('fade-out'); 
 
     \t if($('.cd-dropdown-content .fade-in').length == 0) $(row).children('ul').addClass('fade-in'); 
 
     }, 
 
     deactivate: function(row) { 
 
     \t $(row).children().removeClass('is-active'); 
 
     \t if($('li.has-children:hover').length == 0 || $('li.has-children:hover').is($(row))) { 
 
     \t \t $('.cd-dropdown-content').find('.fade-in').removeClass('fade-in'); 
 
     \t \t $(row).children('ul').addClass('fade-out') 
 
     \t } 
 
     }, 
 
     exitMenu: function() { 
 
     \t $('.cd-dropdown-content').find('.is-active').removeClass('is-active'); 
 
     \t return true; 
 
     }, 
 
     submenuDirection: submenuDirection, 
 
    }); 
 

 
\t //submenu items - go back link 
 
\t $('.go-back').on('click', function(){ 
 
\t \t var selected = $(this), 
 
\t \t \t visibleNav = $(this).parent('ul').parent('.has-children').parent('ul'); 
 
\t \t selected.parent('ul').addClass('is-hidden').parent('.has-children').parent('ul').removeClass('move-out'); 
 
\t }); 
 

 
\t function toggleNav(){ 
 
\t \t var navIsVisible = (!$('.cd-dropdown').hasClass('dropdown-is-active')) ? true : false; 
 
\t \t $('.cd-dropdown').toggleClass('dropdown-is-active', navIsVisible); 
 
\t \t $('.cd-dropdown-trigger').toggleClass('dropdown-is-active', navIsVisible); 
 
\t \t if(!navIsVisible) { 
 
\t \t \t $('.cd-dropdown').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',function(){ 
 
\t \t \t \t $('.has-children ul').addClass('is-hidden'); 
 
\t \t \t \t $('.move-out').removeClass('move-out'); 
 
\t \t \t \t $('.is-active').removeClass('is-active'); 
 
\t \t \t }); \t 
 
\t \t } 
 
\t } 
 

 
\t //IE9 placeholder fallback 
 
\t //credits http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html 
 
\t if(!Modernizr.input.placeholder){ 
 
\t \t $('[placeholder]').focus(function() { 
 
\t \t \t var input = $(this); 
 
\t \t \t if (input.val() == input.attr('placeholder')) { 
 
\t \t \t \t input.val(''); 
 
\t \t \t } 
 
\t \t }).blur(function() { 
 
\t \t \t var input = $(this); 
 
\t \t \t if (input.val() == '' || input.val() == input.attr('placeholder')) { 
 
\t \t \t \t input.val(input.attr('placeholder')); 
 
\t \t \t } 
 
\t \t }).blur(); 
 
\t \t $('[placeholder]').parents('form').submit(function() { 
 
\t \t \t $(this).find('[placeholder]').each(function() { 
 
\t \t \t \t var input = $(this); 
 
\t \t \t \t if (input.val() == input.attr('placeholder')) { 
 
\t \t \t \t \t input.val(''); 
 
\t \t \t \t } 
 
\t \t \t }) 
 
\t \t }); 
 
\t } 
 
});

Answer 2

This is the solution for your problem.. Hope its helpful 

    <!--- HTML --> 
    <ul class="dropdown-menu"> 
      <li><a href="#">Main menu</a></li> 
      <li><a href="#">Another action</a></li> 
      <li><a href="#">Something else here</a> 
      <ul class="dropdown-submenu"> 
      <li><a href="#">Sub menu</a></li> 
      <li><a href="#">Another action</a></li> 
      <li><a href="#">Something else here</a></li> 
      <li role="separator" class="divider"></li> 
      <li><a href="#">Separated link</a></li> 
      </ul> 
      </li> 
      <li role="separator" class="divider"></li> 
      <li><a href="#">Separated link</a></li> 
      </ul> 
    <!-- End HTML --> 

    /** CSS **/ 

     .dropdown-menu{ 
      margin: 0; 
      padding: 10px; 
      list-style: none; 
      background-color: #dddddd; 
      max-width:300px; 
      width: auto; 
      display: inline-block; 
      margin-left: 200px; 
      position:relative; 
     } 

     .dropdown-menu li , .dropdown-submenu li{ 
      padding: 5px;   
     } 
     .dropdown-menu li a{ 
      text-decoration: none; 
      color: #ff0000; 
     } 
     .dropdown-submenu li a{ 
      text-decoration: none; 
      color: #fff; 
     } 
     .dropdown-submenu { 
      position: absolute; 
      list-style:none; 
      background-color: red; 
      color:#fff; 
      margin:0; 
      padding: 10px; 
      z-index:2; 
      width: 100%; 
      top:0; 
      right:100%; 
     } 

    /** End CSS **/ 

вот ссылка JSFiddle