title: Multilevel dropdown menu is getting scattered in mobile reponsive view using bootstrap 3 framework
body: <p>Please look at my HTML structure.The problem is that when ever I am trying to open it in the mobile responsive view the design is getting scattered.But in the desktop view this is working fine.The first dropdown under the "Dropdown" tab is working fine but from the third dropdown this getting messy in the mobile responsive view.
  I have used "animate.min.css" and "bootstrap-dropdownhover.min.css" for the css part and for the js part I have used bootstrap-dropdownhover.js for the js part.</p>
  
  <p>and my html code is here </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
      &lt;head&gt;
      &lt;title&gt;Bootstrap 101 Template&lt;/title&gt;
      &lt;meta charset="utf-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  
      &lt;!-- Bootstrap --&gt;
      &lt;link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"&gt;
  
      &lt;!-- Bootstrap Dropdown Hover CSS --&gt;
      &lt;link href="css/animate.css" rel="stylesheet"&gt;
      &lt;link href="css/bootstrap-dropdownhover.css" rel="stylesheet"&gt;
  
      &lt;!-- jQuery (necessary for Bootstrap's JavaScript plugins) --&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
      &lt;!-- Include all compiled plugins (below), or include individual files as needed --&gt;
      &lt;script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"&gt;&lt;/script&gt;
  
      &lt;!-- Bootstrap Dropdown Hover JS --&gt;
      &lt;script src="js/bootstrap-dropdownhover.js"&gt;&lt;/script&gt;
      &lt;style&gt;
      .my_caret {
          position: absolute;
          right: 0;
      }
  &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
      &lt;div class="container"&gt; 
  
        &lt;!-- Static navbar --&gt;
        &lt;nav class="navbar navbar-default"&gt;
          &lt;div class="container-fluid"&gt;
            &lt;div class="navbar-header"&gt;
              &lt;button aria-controls="navbar" aria-expanded="false" data-target="#navbar" data-toggle="collapse" class="navbar-toggle collapsed" type="button"&gt; &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt; &lt;span class="icon-bar"&gt;&lt;/span&gt; &lt;span class="icon-bar"&gt;&lt;/span&gt; &lt;span class="icon-bar"&gt;&lt;/span&gt; &lt;/button&gt;
              &lt;a href="#" class="navbar-brand"&gt;Project name&lt;/a&gt; &lt;/div&gt;
            &lt;div class="navbar-collapse collapse" id="navbar" data-toggle="dropdown" data-hover="dropdown" data-animations="zoomIn zoomIn zoomIn zoomIn"&gt;
              &lt;ul class="nav navbar-nav"&gt;
                &lt;li class="active"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;About&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
                &lt;li class="dropdown"&gt; &lt;a class="dropdown-toggle" href="#"&gt;Dropdown &lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
                  &lt;ul class="dropdown-menu"&gt;
                    &lt;li&gt;&lt;a href="#"&gt;Action&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#"&gt;Another action&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#"&gt;Something else here&lt;/a&gt;&lt;/li&gt;
                    &lt;li class="dropdown"&gt; &lt;a href="#"&gt;One more separated link&lt;span class="caret my_caret"&gt;&lt;/span&gt;&lt;/a&gt;
                      &lt;ul class="dropdown-menu"&gt;
                        &lt;li&gt;&lt;a href="#"&gt;Something else here&lt;/a&gt;&lt;/li&gt;
                        &lt;li class="dropdown"&gt;&lt;a href="#"&gt;Separated link&lt;span class="caret my_caret"&gt;&lt;/span&gt;&lt;/a&gt;
                          &lt;ul class="dropdown-menu"&gt;
                            &lt;li&gt;&lt;a href="#"&gt;Something&lt;/a&gt;&lt;/li&gt;
                          &lt;/ul&gt;
                        &lt;/li&gt;
                      &lt;/ul&gt;
                    &lt;/li&gt;
                  &lt;/ul&gt;
                &lt;/li&gt;
              &lt;/ul&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/nav&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>
  Have taken reference from this site
  <a href="http://kybarg.github.io/bootstrap-dropdown-hover/#dropdowns-installing" rel="nofollow">http://kybarg.github.io/bootstrap-dropdown-hover/#dropdowns-installing</a></p>
  
  <p>Thanks in advance for help</p>