استفاده از submenu در bootstrap

3/14/2016 MVC
1382

زمانی از قالب پیشفرض Bootstrap استفاده میکنید منو های بالا بدون زیر منو هستند و در صورتی که از سایت Bootstrap زیر منو را جایگذاری کنید برای نمایش submenu  باید بر روی منو اصلی کلیک کنید تا زیر منو نمایش داده شودو با عبور موس زیر منو نمایش داده نمیشود.

برای اضافه کردن sub menu میتوان کد زیر را در منو جای گذاری کرد.

<ul class="nav navbar-nav">
                    <li>@Html.ActionLink("Home", "Index", "Home")</li>

                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">sub menu<i class="icon-angle-down"></i></a>
                        <ul class="dropdown-menu" >
                            <li>@Html.ActionLink("sub menu 1", "PublicText", "Home", new { area = "fa", @id = 1 }, null)</li>
                            <li>@Html.ActionLink("sub menu 2", "PublicText", "Home", new { area = "fa", @id = 2 }, null)</li>
                            <li>@Html.ActionLink("sub menu 3", "PublicText", "Home", new { area = "fa", @id = 3 }, null)</li>
                        </ul>
                    </li>
                    <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                    <li>@Html.ActionLink("About", "About", "Home")</li>
                </ul>

برای اینکه بدون کلیک زیر منو نمایش داده شود و فقط با حرکت موس بر روی منو ی اصلی زیر منو نمایش داده شود میتوان از کد زیر استفاده کرد .

@media (min-width: 979px) {
   ul.nav li.dropdown:hover > ul.dropdown-menu{
    display: block;
    margin: 0;
}