Styling nested <UL><LI> :(

Discussion in 'HTML and CSS' started by johannes, Jun 7, 2018.

  1. johannes

    johannes

    Joined:
    Jun 7, 2018
    Messages:
    1
    Likes Received:
    0
    Good day

    Im looking for some assistance in CSS.

    I have nested <UL`s> i managed to style the first one to display on hover the items in the list.
    just trying to replicate my first results

    i cannot get my second <UL> to do the same, i think i am confused with the ul >ul selectors

    i am uploading the file

    any assistance is appreciated.
     

    Attached Files:

    • bar.txt
      File size:
      3.3 KB
      Views:
      174
    johannes, Jun 7, 2018
    #1

    1. Advertisements

  2. johannes

    shaili shah

    Joined:
    Jul 15, 2019
    Messages:
    12
    Likes Received:
    0
    <! doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8" />
    <link href="C:/xampp/htdocs/DONE/static/fontawesome-all.css" rel="stylesheet">
    <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;
    }

    .ul2 {
    background-color: #151719;
    color: white;
    }
    </style>
    </head>

    <body>
    <div id="sidebar">
    <div class="toggle-btn" onclick="toggleSidebar()">
    <span></span>
    <span></span>
    <span></span>
    </div>
    <ul>
    <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 class="ul2">
    <li class="ul2"><a href=""><span class="fa fa-plus"></span>Add</a></li>
    <li class="ul2"><a href=""><span class="fa fa-edit"></span>Edit</a></li>
    <li class="ul2"><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>
    </ul>
    </div>
    <script>
    function toggleSidebar() {
    document.getElementById("sidebar").classList.toggle('active');
    }
    </script>
    </body>
    </html>
     
    shaili shah, Sep 26, 2019
    #2

    1. Advertisements

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments (here). After that, you can post your question and our members will help you out.
Similar Threads

  1. ul li styling

  2. Styling Div and UL

  3. <ul>s nested in <li>s - how to get the on on higher level ?

  4. peculiar dom model for nested UL elements

  5. CSS Link styling and Layout Problem

  6. <ul><li><ul><li>... onclick() only for one node ?

  7. UL LI get text

  8. <ul> <li> links and spacing

Loading...