How to make a slide out <li> </ul>

Hi guys
please assist i have currently a working <li> <ul> that on hover it shows more information.
Ie, [DATABASE] -----> [ADD ITEMS]
but i cant seem to get this right [DATABASE]—>[ADD ITEMS] ---->[TYPE OF ITEM]

Here is a sample of my working code

<li><a href=""><span class ="fa fa-desktop"></span>Documents</a>
                            <ul>
                                <li><a href=""><span class = "fa fa-plus"></span>Add</a></li>
                                <li><a href=""><span class = "fa fa-plus"></span>Edit</a></li>
                                <li><a href=""><span class = "fa fa-plus"></span>Delete</a></li>
                           </ul>

CSS

*{
    
    margin:0px;
    padding:0px;
    font-family:sans-serif;
 
}

        #sidebar ul{
            list-style: none;
            margin: 0;
            padding: 0;
             z-index:10;
            font-size: 12px;
        }
#sidebar{
    position:fixed;
    width: 200px;
    top:72px;
    height:100%;
    background: #151719;
    left: 0px;
    transition: all 500ms linear;
}
        #sidebar.active{
            left:-200px;
             z-index:10;
        }

        #sidebar ul li{
            
            list-style: none;
            position: relative;
            padding :15px;
            width:170px;
            border-top: 1px solid rgba(100,100,100,0.3);
             z-index:10;
}
#sidebar ul li ul li{
            
            list-style: none;
            position: relative;
            padding :165px;
            width:370px;
            border-top: 1px solid rgba(100,100,100,0.3);
             z-index:10;
}
#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%;
              z-index:10;
        }
      #sidebar ul li:hover >ul{
            opacity: 1;
            visibility: visible;
          background-color: black;
           z-index:10;
        }
      
    
        #sidebar ul li a{
            color:white;
            padding:0px;
            margin: 0 0;
            text-decoration: none;
             z-index:10;
        }
        span{
            margin-right:15px;
           
        }
        #sidebar ul li:hover{
           background-color: grey;
             z-index:10;
            
        }
        .container{
            width 80%
            margin :0 auto;
           
            
           
        }
        header {
            background: #55d6aa;
            position:fixed;
            top:0;
            left:0;
            right:20;
        }
        header::after{
            content'';
            display: table;
            clear:both;
            
        }
        nav{
            
           
            margin-left: 20%;
            width:80%;
            z-index: -1  ;
                       
              
        }
        nav ul{
            
            margin:0;
            padding: 0;
            list-style: none;
              
        }
        nav li{
            display: inline-block;
            margin:  20px;
            padding-top:10px;
            position: relative;
              
        }
        nav a{
            color: #444;
            text-decoration: none;
            text-transform: uppercase;
            font-size: 16px;
            font-weight: 800;
            
          
            
            
        }
        nav a:hover{
            color:white;
        
        }
        nav a::before{
            content: '';
            display: block;
            height:5px;
            width: 0%;
            background-color: #444;
            position: absolute;
            top:0;
            transition: all ease-in-out 400ms;
        }
        nav a:hover::before{
            width: 100%;
            
            
        }
 
    

        
  1. Please provide a proper reduced testcase e.g. via codepen.io, jsfiddle.com or codesandbox.io
  2. you have CSS in your example that is not related to the problem (nav, .container)
  3. your HTML is not complete.

I tried to create a codepen, but was not able to reproduce your problem
https://codepen.io/MartinMuzatko/pen/eqgKRX

2 Likes
<html>
<style>
    *{
    
    margin:0px;
    padding:0px;
    font-family:sans-serif;
 
}

        #sidebar ul{
            list-style: none;
            margin: 0;
            padding: 0;
             z-index:10;
            font-size: 12px;
        }
#sidebar{
    position:fixed;
    width: 200px;
    top:72px;
    height:100%;
    background: #151719;
    left: 0px;
    transition: all 500ms linear;
}
        #sidebar.active{
            left:-200px;
             z-index:10;
        }

        #sidebar ul li{
            
            list-style: none;
            position: relative;
            padding :15px;
            width:170px;
            border-top: 1px solid rgba(100,100,100,0.3);
             z-index:10;
}
#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%;
              z-index:10;
        }

      #sidebar ul li:hover >ul{
            opacity: 1;
            visibility: visible;
          background-color: black;
           z-index:10;
        }
      
    
        #sidebar ul li a{
            color:white;
            padding:0px;
            margin: 0 0;
            text-decoration: none;
             z-index:10;
        }
        span{
            margin-right:15px;
           
        }
        #sidebar ul li:hover{
           background-color: grey;
             z-index:10;
            
        }
        .container{
            width 80%
            margin :0 auto;
           
            
           
        }
        header {
            background: #55d6aa;
            position:fixed;
            top:0;
            left:0;
            right:20;
        }
        header::after{
            content'';
            display: table;
            clear:both;
            
        }
        nav{
            
           
            margin-left: 20%;
            width:80%;
            z-index: -1  ;
                       
              
        }
        nav ul{
            
            margin:0;
            padding: 0;
            list-style: none;
              
        }
        nav li{
            display: inline-block;
            margin:  20px;
            padding-top:10px;
            position: relative;
              
        }
        nav a{
            color: #444;
            text-decoration: none;
            text-transform: uppercase;
            font-size: 16px;
            font-weight: 800;
            
          
            
            
        }
        nav a:hover{
            color:white;
        
        }
        nav a::before{
            content: '';
            display: block;
            height:5px;
            width: 0%;
            background-color: #444;
            position: absolute;
            top:0;
            transition: all ease-in-out 400ms;
        }
        nav a:hover::before{
            width: 100%;
            
            
        }
    
    </style>
<body>
<!-- HEADER AND TOP NAV BAR -->
    <div class="container">
        <header>
            <nav>
                <ul>
                    <li><a href="">Home</a></li>
                    <li><a href="">Data</a></li>
                    <li><a href="">Reports</a></li>
                    <li><a href="">Financial</a></li>
                    <li><a href="">Boardrooms</a></li>
                    <li><a href="">Fire Register</a></li>
                </ul>
            </nav>
        </header>
    </div>
<!--SIDEBAR JAVASCRIPT HAMBURGER -->
    
    <div id="sidebar">
        <div class="toggle-btn" onclick="toggleSidebar()">
            <span></span>
            <span></span>
            <span></span>
        </div>

        <ul>
<!-- SIDEBAR INFORMATION WITH AWESOMEFONT -->

            <li><a href=""><span class ="fa fa-home"></span>Home</a></li>
            <li><a href=""><span class ="fa fa-database"></span>Report A Defect</a>
                <ul>
                    <li><a href="ticketfinal.PHP"><span class="fa fa-plus"></span>Add</a></li>
                    <li><a href=""><span class="fa fa-edit"></span>Edit</a></li>
                    

                </ul>
                <li> <a href="reference.php"><span class="fa fa-plus"></span>Check Reference Number</a></li>
                <li><a href=""><span class ="fa fa-desktop"></span>Reports</a>
                    <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>
                        <li><a href=""><span class = "fa fa-plus"></span>Current Projects</a></li>
                        <li><a href=""><span class = "fa fa-plus"></span>Historic Projects</a></li>
                        <li><a href=""><span class = "fa fa-plus"></span>Defect Reports</a></li>
                        
                        
                    </ul>

                    <li> <a href=""><span class="fa fa-plus"></span>DataBase Items</a>

                        <ul>

                            <li><a href=""> <span class = "fa fa-plus"></span>Add Stock</a></li>
                            <li><a href="newequip.php"> <span class = "fa fa-plus"></span>Add New Equipment</a></li>
                            <li><a href="loadequipment.php"> <span class = "fa fa-plus"></span>Add Fixed Equipment</a></li>
                            <li><a href=""> <span class = "fa fa-plus"></span>Add Mobile Equipment</a></li>
                        </ul>   
                        
                        <ul>
                            <li><a href=""> <span class = "fa fa-plus"></span>Add Stock</a></li>
                        </ul>
                           
                        
                        <li><a href=""><span class ="fa fa-desktop"></span>Documents</a>
                            <ul>
                                <li><a href=""><span class = "fa fa-plus"></span>Add</a></li>
                                <li><a href=""><span class = "fa fa-plus"></span>Edit</a></li>
                                <li><a href=""><span class = "fa fa-plus"></span>Delete</a></li>


                            </ul>
                            <li><a href=""><span class ="fa fa-desktop"></span>Contractors</a>
                                <ul>
                                    <li><a href=""><span class = "fa fa-plus"></span>Add</a></li>
                                    <li><a href=""><span class = "fa fa-plus"></span>Edit</a></li>
                                    <li><a href=""><span class = "fa fa-plus"></span>Remove</a></li>
                                    <li><a href="star.php"><span class = "fa fa-plus"></span>Contractor Ratings</a></li>
                                    <li><a href=""><span class = "fa fa-plus"></span>Contacts</a></li>

                                </ul>
                                <li><a href=""><span class ="fa fa-desktop"></span>Orders</a>
                                    <ul>
                                        <li><a href=""><span class = "fa fa-plus"></span>Add</a></li>
                                        <li><a href=""><span class = "fa fa-plus"></span>Edit</a></li>
                                        <li><a href=""><span class = "fa fa-plus"></span>Delete</a></li>
                                        <li><a href=""><span class = "fa fa-plus"></span>Open Orders</a></li>
                                        <li><a href=""><span class = "fa fa-plus"></span>Completed Orders</a></li>
                                        <li><a href=""><span class = "fa fa-plus"></span>Outstanding Orders</a></li>
                                    </ul>
<li><a href=""><span class = "fa fa-plus"></span>Assign Contract To Supplier</a>
                                        <ul>
                                           
                                            <li><a href="assigncontract.php"><span class = "fa fa-plus"></span>Add</a></li>
                                            <li><a href=""><span class = "fa fa-plus"></span>Edit</a></li>
                                             <li><a href=""><span class = "fa fa-plus"></span>Delete</a></li>

                                        </ul>

                                    <li><a href=""><span class = "fa fa-plus"></span>Maintenance</a>
                                        <ul>
                                            <li><a href=""><span class = "fa fa-plus"></span>Equipment</a></li>
                                            <li><a href=""><span class = "fa fa-plus"></span>Records</a></li>
                                            <li><a href=""><span class = "fa fa-plus"></span>Add</a></li>
                                            <li><a href=""><span class = "fa fa-plus"></span>Edit</a></li>

                                        </ul>
                                        
                                         
                                       <li><a href=""><span class ="fa fa-home"></span>Contact Us</a></li>

    </ul>
    </div>
    </body>
</html>

Hope it is more clear

i basically want additional list item currently when i hover over report a defect it then shows Add and edit ( i want to hover over Edit for example and show me “hello” )

Just follow the same nested list format.

e.g.

...
 <li><a href=""><span class ="fa fa-database"></span>Report A Defect</a>
      <ul>
        <li><a href="ticketfinal.PHP"><span class="fa fa-plus"></span>Add</a></li>
        <li><a href=""><span class="fa fa-edit"></span>Edit</a>
          <ul>
            <li><a href="#">Hello</a></li>
          </ul>
        </li>
      </ul>
    <li> <a href="reference.php"><span class="fa fa-plus"></span>Check Reference Number</a></li>
...

Be careful with fixed elements because if they go outside of the viewport they are unreachable.

Thanks for the help. works like a charm

1 Like

Im still kinda new, what do you propose as you mentioned i should stay away from fixed elements

You just need to ensure that your fixed elements don’t end up outside the viewport or you won’t be able to see them.

Without seeing your whole page I can’t really point you to specific problems. :slight_smile: