Styling nested <UL> and <LI>

HTML-CSS
1

Good day
any that can please assist.
i am trying to style my nested lists. when hovered over it should pop up. i got the first one correct and working. but now styling my second and third is problematic. can anyone assist me with a code snippet or some help.
Database menu displaying fine but reports not so much. not using classes.

getting stuck with the ul>ul i think

<! doctype html>

<meta charset="utf-8"/>

<style type="text/css">
*{

margin:0px;
padding:0px;
font-family:sans-serif;

}
#sidebar ul{
list-style: none;
margin: 0;
}
#sidebar{
position:fixed;
width: 200px;
height:100%;
background: #151719;
left: 0px;
transition: all 500ms linear;
}
#sidebar.active{
left:-200px;

    }

    #sidebar ul li{
        
        list-style: none;
        position: relative;
        padding :15px;
        width:170px;
        border-top: 1px solid rgba(100,100,100,0.3);

}
#sidebar .toggle-btn{

        position: absolute;
        left:210px;
        top:0px;

}
#sidebar .toggle-btn span{
position:relative;
display: block;
width: 30px;
height: 5px;
background: #151719;
margin: 5px 0px;
}

     #sidebar ul ul{
        transition: all 0.3s;
     position: absolute;
        background: #151719;
        opacity: 0;
       visibility: hidden;
        height 100%; 
        left:100%;
        top:-2%;
    }
    #sidebar ul li:hover >ul{
        opacity: 1;
        visibility: visible;
    }
   
   
    
    #sidebar ul li a{
        color:white;
        padding:0px;
        margin: 0 0;
        text-decoration: none;
    }
    span{
        margin-right:15px;
    }
    #sidebar ul li:hover{
        background-color: grey;

<div id="sidebar">

    <div class="toggle-btn" onclick="toggleSidebar()">

        <span></span>

        <span></span>

        <span></span>
</div>

        <li><a href=""><span class ="fa fa-home"></span>Home</a></li>
        <li><a href=""><span class ="fa fa-database"></span>Database Items</a>
        <ul>
            <li><a href=""><span class="fa fa-plus"></span>Add</a></li>
            <li><a href=""><span class="fa fa-edit"></span>Edit</a></li>
            <li><a href=""><span class="fa fa-trash"></span>Delete</a></li>
            
            </ul>
        
        <li><a href=""><span class ="fa fa-desktop"></span>Reports</a></li>
        <ul>
            <li><a href=""><span class = "fa fa-plus"></span>Stock Reports</a></li>
            <li><a href=""><span class = "fa fa-plus"></span>Equipment Reports</a></li>
            <li><a href=""><span class = "fa fa-plus"></span>Financial Reports</a></li>


        </ul>
        <li><a href=""><span class ="fa fa-database"></span>Document Warehouse</a></li>
        <li><a href=""><span class ="fa fa-home"></span>Contact Us</a></li>
function toggleSidebar(){ document.getElementById("sidebar").classList.toggle('active'); 
}

</script>
</body>
2 
#sidebar ul ul

Why? The whole code is messed up.

3

The first lis don’t have a ul and the last li doesn’t have a closing tag.

#sidebar ul li:hover >ul

Whyy?? You have no child ul under sidebar. You have a lotta work to do my friend.