如何实现折叠的主边栏悬停功能以在adminLTE3中显示树视图

Question

在adminLTE 2.0中，折叠的主侧边栏可以在悬停时显示树视图。 (the link of image)

我尝试使用adminLTE 3.0框架来实现此功能， 但主侧边栏无法显示树视图块 (the link of image)

如何修改.css？

my.css：

.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;

}

my.html：

            <div class="user-panel mt-3 pb-3 mb-3 d-flex">
                <div class="image">
                    <img src="IMG_4102.JPG" class="img-circle elevation-2 rotate90" alt="User Image" style="transform:rotate(90deg);">
                </div>
                <div class="info">
                    <a href="#" class="d-block">TEST</a>
                </div>
            </div>
            <nav class="mt-2">
                <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu">

                    <li class="nav-item">
                        <a href="#" class="nav-link">
                            <i class="nav-icon fas fa-tachometer-alt"></i>
                            <p>
                                overview
                            </p>
                        </a>
                    </li>
                    <li class="nav-item has-treeview">
                        <a href="#" class="nav-link">
                            <i class="nav-icon fas fa-copy"></i>
                            <p>
                                Product
                                <i class="fas fa-angle-down right" id="tree1"></i>
                            </p>
                        </a>
                        <ul class="nav nav-treeview">
                            <li class="nav-item">
                                <a href="pages/layout/top-nav.html" class="nav-link">
                                    <i class="far fa-circle nav-icon ml-3"></i>
                                    <p>item1</p>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a href="pages/layout/boxed.html" class="nav-link">
                                    <i class="far fa-circle nav-icon ml-3"></i>
                                    <p>item2</p>
                                </a>
                            </li>               
                        </ul>
                    </li>
                </ul>
            </nav>
        </div>`

请引导我完成这个过程。