Bootstrap tutorial: button (navigation menu nested secondary grouping)

In many cases, we often arrange pull-down menus and ordinary button groups together to achieve the effect similar to the navigation menu. As follows:

How can we achieve this effect? In fact, when using it, we only need to replace the "dropdown" container that originally made the pull-down menu with "btn group", and place it on the same level as ordinary buttons. As follows:

 <div class="btn-group"> <button class="btnbtn default" type="button">Home Page</button> <button class="btnbtn default" type="button">Product display</button> <button class="btnbtn default" type="button">Case Study</button> <button class="btnbtn default" type="button">Contact us</button> <div class="btn-group"> <button class="btnbtn default dropdown toggle" data toggle="dropdown" type="button">About Us<span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="# #">Company Profile</a></li> <li><a href="# #">Corporate Culture</a></li> <li><a href="# #">Organization Structure</a></li> <li><a href="# #">Customer Service</a></li> </ul> </div> </div>

A little more careful friends will see the difference between them,

Implemented style code:

/*View the bootstrap.css file from lines 3192 to 3223*/

 .btn-group > .btn-group { float: left; } .btn-group > .btn-group:not(:first-child):not(:last-child) > .btn { border-radius: 0; } .btn-group > .btn-group:first-child> .btn:last-child, .btn-group > .btn-group:first-child> .dropdown-toggle { border-top-right-radius: 0; border-bottom-right-radius: 0; } .btn-group > .btn-group:last-child> .btn:first-child { border-top-left-radius: 0; border-bottom-left-radius: 0; } .btn-group .dropdown-toggle:active, .btn-group.open .dropdown-toggle { outline: 0; } .btn-group > .btn + .dropdown-toggle { padding-right: 8px; padding-left: 8px; } .btn-group > .btn-lg + .dropdown-toggle { padding-right: 12px; padding-left: 12px; } .btn-group.open .dropdown-toggle { -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125); box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125); } .btn-group.open .dropdown-toggle.btn-link { -webkit-box-shadow: none; box-shadow: none; }