title: Expanding bootstraps dropdown-submenu, keeping it inline with the parent menu
body: <p>I want the submenu from the dropdown nav to be inline with its parent. The first link is inline fine because - .dropdown-submenu > .dropdown-menu {top:0;} but with the other links in the submenu the "top" position changes in relation to its parent menu link. Please look at <a href="http://bootply.com/66517" rel="nofollow">http://bootply.com/66517</a></p>
  
  <pre><code>            &lt;ul class="dropdown-menu"&gt;
                                  &lt;li class="dropdown-submenu"&gt;
                                  &lt;a href="#"&gt;More options&lt;/a&gt;
                                  &lt;ul class="dropdown-menu"&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;Second level link&lt;/a&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;Second level link&lt;/a&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;Second level link&lt;/a&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;Second level link&lt;/a&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;Second level link&lt;/a&gt;&lt;/li&gt;
                                  &lt;/ul&gt;
                                  &lt;/li&gt;
                                  &lt;li class="dropdown-submenu"&gt;
                                  &lt;a href="#"&gt;More options&lt;/a&gt;
                                  &lt;ul class="dropdown-menu"&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;Second level link&lt;/a&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;Second level link&lt;/a&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;Second level link&lt;/a&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;Second level link&lt;/a&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;Second level link&lt;/a&gt;&lt;/li&gt;
                                  &lt;/ul&gt;
                                  &lt;/li&gt;
                                  &lt;li class="dropdown-submenu"&gt;
                                  &lt;a href="#"&gt;More options&lt;/a&gt;
                                  &lt;ul class="dropdown-menu"&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;Second level link&lt;/a&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;Second level link&lt;/a&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;Second level link&lt;/a&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;Second level link&lt;/a&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;Second level link&lt;/a&gt;&lt;/li&gt;
                                  &lt;/ul&gt;
                                  &lt;/li&gt;
                                  &lt;hr&gt;
                              &lt;/ul&gt;
                              &lt;/li&gt;           
                          &lt;/ul&gt;
  </code></pre>