Tuesday 13 December 2016

Sub Drop-Down bolck Bootstrap


    <!-- Styles -->
    <style>

        .dropdown-submenu {
            position: relative;
        }

        .dropdown-submenu>.dropdown-menu {
            top: 0;
            left: 100%;
            margin-top: -6px;
            margin-left: -1px;
            -webkit-border-radius: 0 6px 6px 6px;
            -moz-border-radius: 0 6px 6px;
            border-radius: 0 6px 6px 6px;
        }

        .dropdown-submenu:hover>.dropdown-menu {
            display: block;
        }

        .dropdown-submenu>a:after {
            display: block;
            content: " ";
            float: right;
            width: 0;
            height: 0;
            border-color: transparent;
            border-style: solid;
            border-width: 5px 0 5px 5px;
            border-left-color: #ccc;
            margin-top: 5px;
            margin-right: -10px;
        }

        .dropdown-submenu:hover>a:after {
            border-left-color: #fff;
        }

        .dropdown-submenu.pull-left {
            float: none;
        }

        .dropdown-submenu.pull-left>.dropdown-menu {
            left: -100%;
            margin-left: 10px;
            -webkit-border-radius: 6px 0 6px 6px;
            -moz-border-radius: 6px 0 6px 6px;
            border-radius: 6px 0 6px 6px;
        }
    </style>


<ul class="nav navbar-nav navbar-right">
  <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
                                    Main
                                </a>
                                 <ul class="dropdown-menu" role="menu">

                                    <li>
                                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
                                            Login
                                        </a>
                                    </li>

                                    <li class="dropdown-submenu">
                                        <a href="#">Even More..</a>

                                        <ul class="dropdown-menu">
                                            <li><a href="#">3rd level</a></li>

                                           <li class="dropdown-submenu">
                                              <a href="#">Even More..</a>
                                              <ul class="dropdown-menu">
                                                  <li><a href="#">4rd level</a></li>
                                                   <li class="dropdown-submenu">
                                                      <a href="#">Even More..</a>
                                                      <ul class="dropdown-menu">
                                                          <li><a href="#">5rd level</a></li>
                                                          <li><a href="#">5rd level</a></li>
                                                      </ul>
                                                   </li>
                                              </ul>
                                           </li>


                                        </ul>

                                    </li>

                                </ul>
                            </li>

</ul>

No comments:

Post a Comment