Bootstrap tutorial: How to add a drop-down separator line to the drop-down menu

The drop-down menu items of the drop-down menu components in the Bootstrap framework are hidden by default, because the default style of "dropdown menu" is set to "display: none". Therefore, it can only be displayed when the user clicks the button. When the user clicks the button again, the button will continue to be hidden. The complete code of the default drop-down menu is as follows:

 <! DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>drop-down menu</title> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> </head> <body> <div class="dropdown open"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"> drop-down menu  <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> <li role="presentation"><a role="menuitem" tabindex="- 1" href="#">Drop down menu item</a></li> <li role="presentation"><a role="menuitem" tabindex="- 1" href="#">Drop down menu item</a></li> <li role="presentation"><a role="menuitem" tabindex="- 1" href="#">Drop down menu item</a></li> <li role="presentation"><a role="menuitem" tabindex="- 1" href="#">Drop down menu item</a></li> </ul> </div>  <script src=" https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js "></script> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>  </body> </html>

To add a splitter line to the submenu, we just need to add it to the li tab of the submenu

 <li role="presentation" class="divider"></li>

The effect is as follows:

The drop-down menu in the Bootstrap framework also provides a drop-down separator. Assuming that the drop-down menu has two groups, the function of adding a drop-down separator can be realized by adding an empty<li>between groups and adding a class name "divider" to the<li>. Corresponding style code:

 .dropdown-menu .divider { height: 1px; margin: 9px 0; overflow: hidden; background-color: #e5e5e5; }

Code example:

 <! DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Drop down separator line</title> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> <link rel="stylesheet" href="style.css"> </head> <body> <div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"> drop-down menu  <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> <li role="presentation"><a role="menuitem" tabindex="- 1" href="#">Drop down menu item</a></li> <li role="presentation"><a role="menuitem" tabindex="- 1" href="#">Drop down menu item</a></li> <li role="presentation"><a role="menuitem" tabindex="- 1" href="#">Drop down menu item</a></li> <li role="presentation" class="divider"></li> <li role="presentation"><a role="menuitem" tabindex="- 1" href="#">Drop down menu item</a></li> </ul> </div>  <script src=" https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js "></script> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>  </body> </html>