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

برای اضافه کردن 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;
}