title: Level 3 metisMenu item not expanding back to active selection
body: <p>I am using the following bootstrap navigation sidebar with metisMenu jquery library:</p>
  
  <pre><code>&lt;div id="Sidebar" class="navbar-default sidebar" role="navigation"&gt;
      &lt;div class="sidebar-nav navbar-collapse"&gt;
          &lt;ul class="nav" id="side-menu"&gt;
              &lt;li&gt;
                  &lt;a href="/Dashboard"&gt;&lt;i class="fa fa-dashboard fa-fw"&gt;&lt;/i&gt; Dashboard&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;a href='#'&gt;
                      &lt;i class='fa fa-calendar fa-fw'&gt;&lt;/i&gt; Diary&lt;span class='glyphicon arrow'&gt;&lt;/span&gt;
                  &lt;/a&gt;
                  &lt;ul class='nav nav-second-level'&gt;
                      &lt;li&gt;
                          &lt;a href="/Diary/Index?diaryModeId=1"&gt;My Actions&lt;/a&gt;
                      &lt;/li&gt;
  
                  &lt;/ul&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;a href='#'&gt;
                      &lt;i class='fa fa-pie-chart fa-fw'&gt;&lt;/i&gt; MI&lt;span class='glyphicon arrow'&gt;&lt;/span&gt;
                  &lt;/a&gt;
                  &lt;ul class='nav nav-second-level'&gt;
                      &lt;li&gt;
                          &lt;a href="/MI/EntityStatus"&gt;Entity Status&lt;/a&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;a href='#'&gt;
                      &lt;i class='fa fa-cogs fa-fw'&gt;&lt;/i&gt; Administration&lt;span class='glyphicon arrow'&gt;&lt;/span&gt;
                  &lt;/a&gt;
                  &lt;ul class='nav nav-second-level'&gt;
  
                      &lt;li&gt;
                          &lt;a href='#'&gt;
                              Question Admin&lt;span class='fa plus-minus'&gt;&lt;/span&gt;
                          &lt;/a&gt;
                          &lt;ul class='nav nav-third-level'&gt;
  
                              &lt;li&gt;
                                  &lt;a href="/Rule/Index"&gt;Business Rules&lt;/a&gt;
                              &lt;/li&gt;
                              &lt;li&gt;
                                  &lt;a href="/Question/Index"&gt;Question Bank&lt;/a&gt;
                              &lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/li&gt;
                      &lt;li&gt;
                          &lt;a href='#'&gt;
                              User Admin&lt;span class='fa plus-minus'&gt;&lt;/span&gt;
                          &lt;/a&gt;
                          &lt;ul class='nav nav-third-level'&gt;
                              &lt;li&gt;
                                  &lt;a href="/User/Index"&gt;Users&lt;/a&gt;
                              &lt;/li&gt;
                              &lt;li&gt;
                                  &lt;a href="/Team/Index"&gt;Teams&lt;/a&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;
  </code></pre>
  
  <p>I run the following code on refresh:</p>
  
  <pre><code>$(function () {
  
      $('#side-menu').metisMenu();
  
  });
  </code></pre>
  
  <p>Level 1 and level 2 selection works fine with the menu collapsing then re-selecting selected menu option. When I select a level 3 item (such as Question Bank) the menu collapses but then does not re-select. Is there something else I need to do? Is my html mark up correct?</p>