Bootstrap 3 Second Level Menu Nav

⚠️ Looking for Bootstrap v4?

The current version of Bootstrap v3 does not include a Second Level Menu Nav. This is one of the features designers and clients tend to request.


Here's how to add this feature to your project:


A regular out of the box navbar taken from the Bootstrap Docs, just add an other list element with the proper dropdown-submenu and dropdown-menu classes.

<nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      <a class="navbar-brand" href="#">Brand</a>
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Link</a></li>
            <li class="dropdown-submenu">
              <a tabindex="-1" href="#">Second Level Menu ! <i class="fa fa-chevron-right"></i></a>
              <ul class="dropdown-menu">
                <li><a tabindex="-1" href="#">Link 1</a></li>
                <li><a href="#">Lik 2</a></li>
                <li><a href="#">Link 3</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
        <!-- .dropdown -->
      <!-- .nav .navbar-nav -->
    <!-- /.navbar-collapse -->
  <!-- /.container-fluid -->
</nav>Code language: HTML, XML (xml)


The CSS is very straight forward, no fancy styling. This multilevel dropdown should work in all major browsers.

.dropdown-submenu {
  position: relative;

.dropdown-submenu>.dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -6px;
  margin-left: -1px;

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

.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;
}Code language: CSS (css)

Optional jQuery

I found that once you hover the second level with the mouse the first level loses the hover effect. In some designs you might want to keep it highlighted. Here's how you can achieve that effect using jQuery:

$(document).ready(function () {
  // For the Second level Dropdown menu, highlight the parent
    .mouseenter(function () {
    .mouseleave(function () {
});Code language: JavaScript (javascript)

Mobile / Responsive

The navigation will continue to work on mobile as expected. The only thing you'll have to do is decide how do you want to show the second level on mobile. That's up to you, happy coding!


View demo

⚠️ Looking for Bootstrap v4?


  1. José Zambrano says:

    Nice code, thanks!..

    1. You’re welcome José!

  2. Stephen says:

    Brilliant, thank you!

    1. Rick says:

      Glad it worked for you!

  3. Lexo says:

    Fantastic! Worked like a charm. Thanks.

  4. Stefano says:

    Thank you very much Rick, it worked for me!

    1. Rick says:

      You’re welcome!

  5. Magme says:

    Very helpful and simple. Thanks!

  6. James Spears says:

    Thank you very much, this was just what I needed.

    1. Rick says:

      You’re welcome James!

  7. Kyle says:


    First of all… THANK YOU THANK YOU THANK YOU for this. it was very helpful on a project i’m working on. I had one hangup that I can’t figure out. When I copy and paste your code into the native environment I’m working in, the “hamburger” menu button for mobile screens doesn’t do anything upon clicking. I know it’s hard to determine, but do you know of anything that could be causing that?

    1. Rick says:

      We can rule out it has anything to do with the code above.

      Make sure you have included the JavaScript from Bootstrap.


  8. Christopher Frelin says:

    guess something got stripped out – reiterated comment below. thx

    Firstly- thanks for this elegant and simple solution. Secondly – a question: Is there a way to allow the LIST ITEM that contains the submenu to itself link to a page – perhaps upon a second click, or to work as a clickable link and have the submenu show on hover?

    1. Rick says:

      You could try to play with the hover and click events.

      With jQuery “on” event handler you should be able to disable the default behaviour and do what you like when hover and click

      Also use this:

      Regards and sorry for the late response.

  9. Christopher Frelin says:

    Firstly- thanks for this elegant and simple solution. Secondly – a question: Is there a way to allow the that contains the submenu to itself link to a page – perhaps upon a second click, or to work as a clickable link and have the submenu show on hover?

  10. Timothy says:

    This is a nice demo! Thank you for posting.
    Question, would you be able to have the drop down menu open on hover as well so you don’t have to click on it to open it up?

  11. Martin says:

    Nice additon, thanks. Unfortunately I have found an issue on mobile views: when I add navbar-fixed-top to the navigation, sumenues no longer behave in the same, userfriendly way. The max-height: 340px; of navbar-collapse is blocking it. Have you got an idea how to fix this? Your help is much appreciated!

    1. Rick says:

      Could you prepare a demo with your example? I can’t seem to fully understand the issue.

      1. Martin says:

        I have extended your demo in CodePen:
        Check it out in debug mode for mobile nav views (< 768px) and open the submenus of the second level. It does not open any more till the last item when navbar-fixed-top is added to nav. The problem is that

        .navbar-fixed-top .navbar-collapse {
          max-height: 340px;
        Code language: CSS (css)

        from bootstrap.css (line 4220) is blocking that. Any idea?

      2. Rick says:


        My code doesn’t take into account how to “show” the dropdown. There’s no on click / touch event for the third menu, you’d have to code that.

        Nevertheless, when I open your pen and shrink the view I see this:

        Not sure what I’m I missing.

      3. Martin says:

        The dropdown only opens for the 340px height what hides the rest of the submenus. Therefore a scrollbar appears what is not very userfriendly compared to your solution without «navbar-fixed-top». So the question is how to override this CSS rule. All I tried did not work properly.

      4. Rick says:

        I see. Have you tried overwriting with !important ?

      5. Martin says:

        Yes, I did…

  12. Trevor says:

    No sample? Stupid article, start putting samples up idiot.

    1. Rick says:

      The code is there Trevor, what’s the issue?

      1. Rick says:

        You’re right, in my recent posts I tend to create a demo first.

        In any case, here’s how it looks:


      2. enli says:

        The issue is that we readers may want to see the demo first before starting up the coding related articles. I was particularely interested in seeing the demo but I couldnt see it and then I was not interested in seeing the code snippet anymore.

  13. Scott Wissler says:

    I am trying to emulate the three level drop down menu seen on for a website I am working on. What do you think they are using HTML5, CSS3, JS JQuery, Bootstrap? Any or all?

    1. Rick says:

      Well, of course. The three basic: HTML, CSS and JS 😉

    1. Rick says:

      You’re welcome.

Leave a Reply

Your email address will not be published. Required fields are marked *