سلام دوستان من یه مگا منو طراحی کردم که کدهاش رو میذارم.با بوت استرپ.زمانیکه تعداد زیرمنوها زیاد باشه مرتب و تمیز نشون داده نمیشه چطور میتونم مرتبش کنم؟ممون میشم راهنمایی بفرمایید.
کد css:
.nav-tabs { display: inline-block; border-bottom: none; padding-top: 15px; font-weight: bold; } .nav-tabs > li > a, .nav-tabs > li > a:hover, .nav-tabs > li > a:focus, .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus { border: none; border-radius: 0; } .mega-dropdown { position: static !important; } .mega-dropdown-menu { padding: 10px 15px 15px; text-align: center; width: 100%; }
کد html:
<div class="navbar navbar-default"> <div class="directionrtl"> <div class="container"> <ul class="nav navbar-nav"> <li class="dropdown active"> @Html.ActionLink("خانه", "Index", "Home") </li> <li class="dropdown mega-dropdown "> <a href="#" class="dropdown-toggle " data-toggle="dropdown" data-hover="dropdown" data-delay="0" data-close-others="false"> غذای اصلی<i class="fa fa-angle-down"></i> </a> <div class="dropdown-menu mega-dropdown-menu"> <ul class="list-inline"> <li>@Html.ActionLink("خورشت ها", "Product", "Home", new { GroupId = Convert.ToInt32(1003) }, null)</li> <li>@Html.ActionLink("کیف دوشی زنانه", "Product", "Home", new { GroupId = Convert.ToInt32(1003) }, null)</li> <li>@Html.ActionLink("کیف کج زنانه", "Product", "Home", new { GroupId = Convert.ToInt32(1004) }, null)</li> <li>@Html.ActionLink("کیف شب زنانه", "Product", "Home", new { GroupId = Convert.ToInt32(4) }, null)</li> <li>@Html.ActionLink("کیف پول زنانه", "Product", "Home", new { GroupId = Convert.ToInt32(1002) }, null)</li> <li>@Html.ActionLink("خورشت ها", "Product", "Home", new { GroupId = Convert.ToInt32(1003) }, null)</li> <li>@Html.ActionLink("کیف دوشی زنانه", "Product", "Home", new { GroupId = Convert.ToInt32(1003) }, null)</li> <li>@Html.ActionLink("کیف کج زنانه", "Product", "Home", new { GroupId = Convert.ToInt32(1004) }, null)</li> <li>@Html.ActionLink("کیف شب زنانه", "Product", "Home", new { GroupId = Convert.ToInt32(4) }, null)</li> <li>@Html.ActionLink("کیف پول زنانه", "Product", "Home", new { GroupId = Convert.ToInt32(1002) }, null)</li> <li>@Html.ActionLink("خورشت ها", "Product", "Home", new { GroupId = Convert.ToInt32(1003) }, null)</li> <li>@Html.ActionLink("کیف دوشی زنانه", "Product", "Home", new { GroupId = Convert.ToInt32(1003) }, null)</li> <li>@Html.ActionLink("کیف کج زنانه", "Product", "Home", new { GroupId = Convert.ToInt32(1004) }, null)</li> <li>@Html.ActionLink("کیف شب زنانه", "Product", "Home", new { GroupId = Convert.ToInt32(4) }, null)</li> <li>@Html.ActionLink("کیف پول زنانه", "Product", "Home", new { GroupId = Convert.ToInt32(1002) }, null)</li> <li>@Html.ActionLink("خورشت ها", "Product", "Home", new { GroupId = Convert.ToInt32(1003) }, null)</li> <li>@Html.ActionLink("کیف دوشی زنانه", "Product", "Home", new { GroupId = Convert.ToInt32(1003) }, null)</li> <li>@Html.ActionLink("کیف کج زنانه", "Product", "Home", new { GroupId = Convert.ToInt32(1004) }, null)</li> <li>@Html.ActionLink("کیف شب زنانه", "Product", "Home", new { GroupId = Convert.ToInt32(4) }, null)</li> <li>@Html.ActionLink("کیف پول زنانه", "Product", "Home", new { GroupId = Convert.ToInt32(1002) }, null)</li> <li>@Html.ActionLink("کیف شب زنانه", "Product", "Home", new { GroupId = Convert.ToInt32(4) }, null)</li> </ul> </div> </li> </ul> </div> </div> </div>
اینم از اسکرین شات زیر منو که بهم ریخته هستن:
هیچ کاربری تا کنون از این پست تشکر نکرده است
با ما تماس بگیرید تا در این مسیر همراهتان باشیم :)