"navbar multilevel"
Bootstrap 3.3.0 Snippet by rolyart

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html lang="en"> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Website CSS style --> <link href="css/bootstrap.min.css" rel="stylesheet"> <!-- Website Font style --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css"> <link rel="stylesheet" href="style.css"> <!-- Google Fonts --> <link href='https://fonts.googleapis.com/css?family=Passion+One' rel='stylesheet' type='text/css'> <title>Multi level navbar</title> </head> <body> <header class="main-header"> <nav class="rolandthemes-navbar navbar navbar-fixed-top"><div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#mobile-menu" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <i class="fa fa-bars"></i> </button> <a class="navbar-brand" href="http://localhost/wordpress/">multilevel menu</a> </div> <div class="hidden-xs"><ul id="menu-test2" class="nav navbar-nav navbar-left"><li id="menu-item-1764" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-1764 dropdown"><a title="Level 1" href="http://localhost/wordpress/level-1/">Level 1 <i class="fa fa-angle-down"></i></a> <ul role="menu" class=" dropdown-menu"> <li id="menu-item-1765" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-1765 dropdown sub-menu"><a title="Level 2" href="http://localhost/wordpress/level-1/level-2/">Level 2 <i class="fa fa-angle-right"></i></a> <ul role="menu" class=" dropdown-menu"> <li id="menu-item-1766" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-1766 dropdown sub-menu"><a title="Level 3" href="http://localhost/wordpress/level-1/level-2/level-3/">Level 3 <i class="fa fa-angle-right"></i></a> <ul role="menu" class=" dropdown-menu"> <li id="menu-item-1767" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-1767 dropdown sub-menu"><a title="Level 4" href="http://localhost/wordpress/level-1/level-2/level-3a/">Level 4 <i class="fa fa-angle-right"></i></a> <ul role="menu" class=" dropdown-menu"> <li id="menu-item-1775" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1775"><a title="Level 1" href="http://localhost/wordpress/level-1/">Level 1</a></li> <li id="menu-item-1776" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1776"><a title="Level 2" href="http://localhost/wordpress/level-1/level-2/">Level 2</a></li> <li id="menu-item-1777" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1777"><a title="Level 3" href="http://localhost/wordpress/level-1/level-2/level-3/">Level 3</a></li> <li id="menu-item-1769" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-1769 dropdown sub-menu"><a title="Level 6" href="http://localhost/wordpress/level-1/level-2a/">Level 6 <i class="fa fa-angle-right"></i></a> <ul role="menu" class=" dropdown-menu"> <li id="menu-item-1770" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-1770 dropdown sub-menu"><a title="Level 7" href="http://localhost/wordpress/level-1/level-2b/">Level 7 <i class="fa fa-angle-right"></i></a> <ul role="menu" class=" dropdown-menu"> <li id="menu-item-1771" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-1771 dropdown sub-menu"><a title="Level 8" href="http://localhost/wordpress/level-1/">Level 8 <i class="fa fa-angle-right"></i></a> <ul role="menu" class=" dropdown-menu"> <li id="menu-item-1778" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1778"><a title="Level 3a" href="http://localhost/wordpress/level-1/level-2/level-3a/">Level 3a</a></li> <li id="menu-item-1779" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1779"><a title="Level 3b" href="http://localhost/wordpress/level-1/level-2/level-3b/">Level 3b</a></li> <li id="menu-item-1772" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-1772 dropdown sub-menu"><a title="Level 9" href="http://localhost/wordpress/level-1/level-2b/">Level 9 <i class="fa fa-angle-right"></i></a> <ul role="menu" class=" dropdown-menu"> <li id="menu-item-1773" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-1773 dropdown sub-menu"><a title="Level 10" href="http://localhost/wordpress/level-1/level-2a/">Level 10 <i class="fa fa-angle-right"></i></a> <ul role="menu" class=" dropdown-menu"> <li id="menu-item-1768" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1768"><a title="Level 10 submenu" href="http://localhost/wordpress/level-1/level-2/level-3b/">Level 10 submenu</a></li> <li id="menu-item-1774" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1774"><a title="Level 2" href="http://localhost/wordpress/level-1/level-2/">Level 2</a></li> </ul> </li> </ul> </li> </ul> </li> </ul> </li> </ul> </li> </ul> </li> </ul> </li> </ul> </li> </ul> </li> </ul></div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="visible-xs"> <div class="collapse navbar-collapse" id="mobile-menu"><ul id="menu-short" class="nav navbar-nav navbar-left"><li id="menu-item-1629" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-1629 dropdown"><a title="Home" href="http://wpthemetestdata.wordpress.com/">Home <i class="fa fa-angle-down"></i></a> <ul role="menu" class=" dropdown-menu"> <li id="menu-item-1632" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1632"><a title="Clearing Floats" href="http://localhost/wordpress/about/clearing-floats/">Clearing Floats</a></li> <li id="menu-item-1633" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1633"><a title="Page with comments" href="http://localhost/wordpress/about/page-with-comments/">Page with comments</a></li> <li id="menu-item-1634" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1634"><a title="Page with comments disabled" href="http://localhost/wordpress/about/page-with-comments-disabled/">Page with comments disabled</a></li> <li id="menu-item-1630" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1630"><a title="Blog" href="http://localhost/wordpress/blog/">Blog</a></li> </ul> </li> <li id="menu-item-1631" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1631"><a title="About The Tests" href="http://localhost/wordpress/about/">About The Tests</a></li> <li id="menu-item-1635" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1635"><a title="Lorem Ipsum" href="http://localhost/wordpress/lorem-ipsum/">Lorem Ipsum</a></li> <li id="menu-item-1698" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1698"><a title="Page B" href="http://localhost/wordpress/page-b/">Page B</a></li> <li id="menu-item-1699" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1699"><a title="Page A" href="http://localhost/wordpress/page-a/">Page A</a></li> <li id="menu-item-1700" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1700"><a title="Blog" href="http://localhost/wordpress/blog/">Blog</a></li> <li id="menu-item-1701" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1701"><a title="Sample Page" href="http://localhost/wordpress/sample-page/">Sample Page</a></li> <li id="menu-item-1702" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1702"><a title="Page B" href="http://localhost/wordpress/page-b/">Page B</a></li> <li id="menu-item-1703" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1703"><a title="Page A" href="http://localhost/wordpress/page-a/">Page A</a></li> <li id="menu-item-1704" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1704"><a title="Blog" href="http://localhost/wordpress/blog/">Blog</a></li> <li id="menu-item-1705" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1705"><a title="Front Page" href="http://localhost/wordpress/front-page/">Front Page</a></li> <li id="menu-item-1706" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1706"><a title="About The Tests" href="http://localhost/wordpress/about/">About The Tests</a></li> </ul></div><!-- /.navbar-collapse --> </div> </div><!-- /.container--></nav></header> </body> </html>
/* Navbar - .rolandthemes-navbar ============================================================================== */ .rolandthemes-navbar { border-bottom: none; background-color: #CE020C; color: #fff; margin-bottom: 0; min-height: auto; transition: height 0.2s; font-family: 'PT Sans', sans-serif; border-radius: 0; } .rolandthemes-navbar .navbar-brand { font-size: 24px; color: #fff; text-transform: uppercase; height: auto; padding: 25px 15px; transition: all ease-in-out 0.4s; } .rolandthemes-navbar .brand-img { padding: 0 !important; } .rolandthemes-navbar .brand-img img { max-height: 30px; margin-top: 20px; transition: all ease-in-out 0.4s; } .rolandthemes-navbar .navbar-toggle { font-size: 29px; padding: 15px 15px 12px 15px; color: #fff; margin: 0; } .rolandthemes-navbar .navbar-toggle:hover { color: #999999; } .rolandthemes-navbar .navbar-nav li > a { padding: 25px 15px; color: #fff; transition: all ease-in-out 0.4s; } .rolandthemes-navbar .navbar-nav li:focus > a, .rolandthemes-navbar .navbar-nav li:active > a, .rolandthemes-navbar .navbar-nav li:hover > a, .rolandthemes-navbar .navbar-nav li.active > a, .rolandthemes-navbar .navbar-nav li.active:hover > a, .rolandthemes-navbar .navbar-nav li.open > a, .rolandthemes-navbar .navbar-nav li.open:hover > a { color: #fff; background-color: #e7020d; } .rolandthemes-navbar .navbar-nav .dropdown-menu { left: 0; background-color: #f5f5f5; box-shadow: none; border: 0; padding: 0; border: 1px solid #ddd; border-top: 2px solid #b5020b; margin-top: 0; right: auto; border-radius: 0; } .rolandthemes-navbar .navbar-nav .dropdown-menu > li > a { padding: 9px 15px; color: #333; border-radius: 0; border-bottom: 1px solid #ddd; } .rolandthemes-navbar .navbar-nav .dropdown-menu > li:last-child > a { border-bottom: none; border-radius: 0; } .rolandthemes-navbar .navbar-nav .dropdown-menu > li:hover > a, .rolandthemes-navbar .navbar-nav .dropdown-menu > li:focus > a, .rolandthemes-navbar .navbar-nav .dropdown-menu > li.active > a { background-color: #dd020d; color: #fff; } .rolandthemes-navbar .navbar-nav li.dropdown:hover > ul.dropdown-menu { display: block; -webkit-animation: fadeInUp 300ms; -moz-animation: fadeInUp 300ms; -ms-animation: fadeInUp 300ms; -o-animation: fadeInUp 300ms; animation: fadeInUp 300ms; } .rolandthemes-navbar .navbar-nav .sub-menu .dropdown-menu { left: 100%; top: -2px; margin-top: 0; } .rolandthemes-navbar .navbar-form { padding-top: 10.86956522px; } .rolandthemes-navbar .navbar-form .form-control, .rolandthemes-navbar .navbar-form .btn { border-radius: 0; } .rolandthemes-navbar #mobile-menu .navbar-nav li > a { padding: 15px 10px; } .rolandthemes-navbar #mobile-menu .fa-angle-down { float: right; } .rolandthemes-shrink-navbar { height: auto; } .rolandthemes-shrink-navbar .navbar-brand { font-size: 21px; } .rolandthemes-shrink-navbar .brand-img { padding: 0; } .rolandthemes-shrink-navbar .brand-img img { margin-top: 7px; transition: all ease-in-out 0.4s; } .rolandthemes-shrink-navbar .navbar-brand, .rolandthemes-shrink-navbar .navbar-nav li > a { padding-top: 12.5px; padding-bottom: 12.5px; } .rolandthemes-shrink-navbar .navbar-toggle { padding-top: 9.5px; padding-bottom: 1.5px; font-size: 22.5px; }

Related: See More

Vue Argon Design System
Bootstrap NavBar Menu Dropdowns http://fontenele.github.io/bootstrap-navbar-dropdowns/
Bootstrap 4 Navbar with Icon Top
Transparent Sticky NavBar

Questions / Comments: