Styling nested <UL><LI> :(


Joined
Jun 7, 2018
Messages
1
Reaction score
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.
 

Attachments

  • bar.txt
    3.3 KB · Views: 242
Ad

Advertisements

Joined
Jul 15, 2019
Messages
11
Reaction score
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>
 

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. After that, you can post your question and our members will help you out.

Ask a Question

Top