title: How to implement the collapsed main-sidebar hover function to show the treeview in adminLTE3
body: <p>In adminLTE 2.0, the main-sidebar collapsed can show the treeview when <em>hover</em>.
  <a href="https://imgur.com/Lb7LLNC" rel="nofollow noreferrer">(the link of image)</a></p>
  
  <p>I try to use adminLTE 3.0 framework to implement this feature,
  but the main-sidebar can't show the treeview block 
  <a href="https://imgur.com/kmQeA6Y" rel="nofollow noreferrer">(the link of image)</a></p>
  
  <p>How to modify my .css?</p>
  
  <p>my.css:</p>
  
  <pre><code>.sidebar-mini.sidebar-collapse .main-sidebar .nav-item a:hover{
     background-color: aqua;
     color: black;
     padding: 12px 16px; 
     text-decoration: none;
     display block;
  }
  
  
  .sidebar-mini.sidebar-collapse .main-sidebar .nav-item a:hover i,.sidebar-mini.sidebar-collapse .main-sidebar .nav-item a:hover p{
      display: block !important;
      position: relative;
      width: 180px;
      left: 50px;
      z-index: 9999;
  </code></pre>
  
  <p>}</p>
  
  <p>my.html:
  </p>
  
  <pre><code>            &lt;div class="user-panel mt-3 pb-3 mb-3 d-flex"&gt;
                  &lt;div class="image"&gt;
                      &lt;img src="IMG_4102.JPG" class="img-circle elevation-2 rotate90" alt="User Image" style="transform:rotate(90deg);"&gt;
                  &lt;/div&gt;
                  &lt;div class="info"&gt;
                      &lt;a href="#" class="d-block"&gt;TEST&lt;/a&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;nav class="mt-2"&gt;
                  &lt;ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu"&gt;
  
                      &lt;li class="nav-item"&gt;
                          &lt;a href="#" class="nav-link"&gt;
                              &lt;i class="nav-icon fas fa-tachometer-alt"&gt;&lt;/i&gt;
                              &lt;p&gt;
                                  overview
                              &lt;/p&gt;
                          &lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li class="nav-item has-treeview"&gt;
                          &lt;a href="#" class="nav-link"&gt;
                              &lt;i class="nav-icon fas fa-copy"&gt;&lt;/i&gt;
                              &lt;p&gt;
                                  Product
                                  &lt;i class="fas fa-angle-down right" id="tree1"&gt;&lt;/i&gt;
                              &lt;/p&gt;
                          &lt;/a&gt;
                          &lt;ul class="nav nav-treeview"&gt;
                              &lt;li class="nav-item"&gt;
                                  &lt;a href="pages/layout/top-nav.html" class="nav-link"&gt;
                                      &lt;i class="far fa-circle nav-icon ml-3"&gt;&lt;/i&gt;
                                      &lt;p&gt;item1&lt;/p&gt;
                                  &lt;/a&gt;
                              &lt;/li&gt;
                              &lt;li class="nav-item"&gt;
                                  &lt;a href="pages/layout/boxed.html" class="nav-link"&gt;
                                      &lt;i class="far fa-circle nav-icon ml-3"&gt;&lt;/i&gt;
                                      &lt;p&gt;item2&lt;/p&gt;
                                  &lt;/a&gt;
                              &lt;/li&gt;               
                          &lt;/ul&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/nav&gt;
          &lt;/div&gt;`
  </code></pre>
  
  <p>Please guide me through this.</p>