如何更改子菜单的位置？

我尝试更改此菜单中子菜单的位置。我将ul标签的位置改为相对但它不能正常工作。当菜单，显示子菜单，但是在主菜单上点击由副menu.Please建议如何更改子菜单的位置？

<div id="cssmenu" style="direction:rtl;"> 
      <ul><li class="mobile"><a href="#"><span>Menu <i>☰</i></span></a></li> 
    <li class=""> 
      <a href="http://localhost/dnn_test/"><span>صفحه نخست</span> </a> 
     </li> 
    <li class="has-sub active"> 
     <a href="http://localhost/dnn_test/skin2"><span>skin2</span> </a> 
      <ul style="display: block;"> 
      <li class=""> 
      <a href="http://localhost/dnn_test/sub_skin2"><span>sub_skin2</span> </a> 
     </li> 
    <li class=""> 
      <a href="http://localhost/dnn_test/sub1_skin2"><span>sub1_skin2</span> </a> 
     </li> 
     </ul> 

    </li> 
    <li class="has-sub"> 
      <a href="http://localhost/dnn_test/skin3"><span>skin3</span> </a> 
      <ul style="display: none;"> 
      <li class=""> 
      <a href="http://localhost/dnn_test/sub1_skin3"><span>sub1_skin3</span> </a> 
     </li> 
     </ul> 

    </li> 

    <li class=""> 
      <a href="http://localhost/dnn_test/skin4"><span>skin4</span> </a> 
     </li> 
    <li class=""> 
      <a href="http://localhost/dnn_test/skin5"><span>skin5</span> </a> 
     </li> 
    <li class=""> 
      <a href="http://localhost/dnn_test/skin6"><span>skin6</span> </a> 
     </li> 
</ul> 


<script> 
(function($) { 
$(document).ready(function() { 
$('#cssmenu > ul').prepend('<li class=\"mobile\"><a href=\"#\"><span>Menu <i>&#9776;</i></span></a></li>'); 
$('#cssmenu > ul > li > a').click(function(e) { 
    $('#cssmenu li').removeClass('active'); 
    $(this).closest('li').addClass('active'); 
    var checkElement = $(this).next(); 
    if((checkElement.is('ul')) && (checkElement.is(':visible'))) { 
    $(this).closest('li').removeClass('active'); 
    checkElement.slideUp('normal'); 
    } 
    if((checkElement.is('ul')) && (!checkElement.is(':visible'))) { 
    $('#cssmenu ul ul:visible').slideUp('normal'); 
    checkElement.slideDown('normal'); 
    } 
    if($(this).parent().hasClass('mobile')) { 
    e.preventDefault(); 
    $('#cssmenu').toggleClass('expand'); 
    } 
    if($(this).closest('li').find('ul').children().length == 0) { 
    return true; 
    } else { 
    return false; 
    }  
}); 
}); 
})(jQuery); 
</script> 
     </div>

CSS ____________________________________________________缩放：

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600,300); 
@charset "UTF-8"; 
/* Base Styles */ 
#cssmenu, 
#cssmenu ul, 
#cssmenu li, 
#cssmenu a { 
    margin: 0; 
    padding: 0; 
    border: 0; 
    list-style: none; 
    font-weight: normal; 
    text-decoration: none; 
    line-height: 1; 
    font-family: 'Open Sans', sans-serif; 
    font-size: 14px; 
    position: relative; 
} 
#cssmenu a { 
    line-height: 1.5; 
} 
#cssmenu { 
    width: 100%; 
    background: #fff; 
} 
#cssmenu > ul { 
    border: 1px solid #000000; 
    -moz-box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.2); 
    -webkit-box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.2); 
    box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.2); 
    background: #565656; 
    background: -moz-linear-gradient(#565656 0%, #323232 100%); 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #565656), color-stop(100%, #323232)); 
    background: -webkit-linear-gradient(#565656 0%, #323232 100%); 
    background: linear-gradient(#565656 0%, #323232 100%); 
    -webkit-border-radius: 4px; 
    -moz-border-radius: 4px; 
    border-radius: 4px; 
} 
#cssmenu > ul:after { 
    clear: both; 
    content: ''; 
    display: table; 
} 
@media all and (max-width: 480px) { 
    #cssmenu > ul { 
    max-height: 32px; 
    overflow: hidden; 
    -webkit-transition: max-height 0.5s; 
    transition: max-height 0.5s; 
    } 
    #cssmenu.expand ul { 
    max-height: 900px; 
    } 
} 
#cssmenu > ul > li { 
    border-right: 1px solid #000000; 
    -moz-box-shadow: 1px 0 0 rgba(255, 255, 255, 0.2); 
    -webkit-box-shadow: 1px 0 0 rgba(255, 255, 255, 0.2); 
    box-shadow: 1px 0 0 rgba(255, 255, 255, 0.2); 
    float: left; 
} 
#cssmenu > ul > li.mobile { 
    display: none; 
} 
#cssmenu > ul > li.active { 
    background: #444444; 
    background: -moz-linear-gradient(#444444 0%, #323232 100%); 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #444444), color-stop(100%, #323232)); 
    background: -webkit-linear-gradient(#444444 0%, #323232 100%); 
    background: linear-gradient(#444444 0%, #323232 100%); 
} 
@media all and (max-width: 480px) { 
    #cssmenu > ul > li { 
    border-right: 0 none; 
    -moz-box-shadow: 0 0 0 transparent; 
    -webkit-box-shadow: 0 0 0 transparent; 
    box-shadow: 0 0 0 transparent; 
    display: block; 
    float: none; 
    } 
    #cssmenu > ul > li.mobile { 
    display: block; 
    } 
    #cssmenu > ul > li.mobile i { 
    float: right; 
    font-style: normal; 
    } 
} 
#cssmenu > ul > li:last-child { 
    border-right: 0 none; 
    -moz-box-shadow: 0 0 0 transparent; 
    -webkit-box-shadow: 0 0 0 transparent; 
    box-shadow: 0 0 0 transparent; 
    -webkit-border-radius: 0 4px 4px 0; 
    -moz-border-radius: 0 4px 4px 0; 
    border-radius: 0 4px 4px 0; 
} 
#cssmenu > ul > li:last-child ul { 
    left: auto; 
    right: 0; 
} 
#cssmenu > ul > li.mobile { 
    border-right: 0 none; 
    -moz-box-shadow: 0 0 0 transparent; 
    -webkit-box-shadow: 0 0 0 transparent; 
    box-shadow: 0 0 0 transparent; 
} 
#cssmenu > ul > li > a { 
    margin: 0 0 2px 0; 
    font-size: 12px; 
    display: block; 
    color: #ffffff; 
    text-shadow: 0 1px 1px #000; 
} 
#cssmenu > ul > li > a > span { 
    display: block; 
    padding: 6px 10px; 
    font-weight: bold; 
} 
#cssmenu > ul > li > a:hover { 
    text-decoration: none; 
} 
#cssmenu > ul > li.active { 
    border-bottom: none; 
} 
#cssmenu > ul > li.active > a { 
    color: #fff; 
    text-shadow: 0 1px 1px #000; 
} 
/* Sub menu */ 
#cssmenu ul ul { 
    background: #f9f9f9; 
    border: 1px solid #cccccc; 
    -webkit-border-radius: 4px; 
    -moz-border-radius: 4px; 
    border-radius: 4px; 
    -moz-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.25); 
    -webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.25); 
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.25); 
    padding: 5px 12px; 
    display: none; 
    position: relative; 
    top: 33px; 
    left: 0; 
    width: 200px; 
    z-index: 1; 
} 
@media all and (max-width: 480px) { 
    #cssmenu ul ul { 
    position: relative; 
    top: 0; 
    width: 100%; 
    } 
} 
#cssmenu ul ul li { 
    padding: 3px 0; 
} 
#cssmenu ul ul a { 
    color: #999999; 
    display: block; 
    font-size: 12px; 
    font-weight: bold; 
} 
#cssmenu ul ul a:hover { 
    color: #444444; 
}

来源

2015-11-17 programmer138200

你能提供的jsfiddle？并且为了更改您的问题：您不希望主菜单通过其下面的子菜单进行缩放，对吧？ – puelo

是的我不想让子菜单缩放主菜单 – programmer138200

你可以看到这个地址的演示：http://jsfiddle.net/hmahdavi921/ojdm4xre/ – programmer138200

这里是我的解决方案/建议：

将子菜单的位置更改为absolute，以便将其从文档流中取出。确保父li设置为relative：

#cssmenu ul ul { 
    .... 
    position: absolute; 
    text-align: left; 
    .... 
}

http://jsfiddle.net/ojdm4xre/2/

来源

2015-11-17 17:28:35 puelo

我做了这项工作，但这不是对！！！ – programmer138200

对不起。错误的jsFiddle链接。现在应该是对的！ – puelo

puelo：在这种情况下，我的菜单对齐方式是RTL，当运行子菜单应该隐藏，并且当点击父级时，它应该被显示。你能提供这个用于RTL – programmer138200

如何更改子菜单的位置？

回答

相关问题