You are having a specificity issue (also take a look at this answer), so here 2 possibilities to fix the issue, and simplify your css styles for the :hover
1st dropdown items
.dropdown > li:hover
2nd dropdown items
.dropdown > ul > li:hover
> selector1st dropdown items
ul > ul > li:hover
2nd dropdown items
ul > ul > ul > li:hover
You can calculate the specificity of your rules here
I need to select my 2nd dropdown ul in CSS, but it seems I can’t, since it has attributes of the 1st dropdown ul when I try it like this:
nav ul li:hover ul li ul {
visibility: hidden;
opacity: 0;
border-top: 2px solid #ff8b00;
box-shadow: 0 2px 10px -2px rgba(0, 0, 0, 0.1);
background: #fff;
position: absolute;
top: 0;
left: 100%;
width: 200px;
margin-top: 1rem;
box-shadow: 0 2px 10px -2px rgba(0, 0, 0, 0.1);
transition: opacity 300ms ease, transform 300ms ease;
transform: translateY(50px);
}
nav ul li:hover ul li:hover ul {
visibility: visible;
opacity: 1;
transform: translateY(0);
}
I will add my full code
@import url("https://fonts.googleapis.com/css?family=Rubik:300,400,500,700,900&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Rubik", sans-serif;
line-height: 1.7;
}
a {
color: #000;
text-decoration: none;
transition: 0.3s all ease;
}
ul {
list-style: none;
}
/* Utility */
.container {
max-width: 1170px;
width: 100%;
padding: 0 15px;
margin: 0 auto;
}
.text-primary {
color: #f77b2e;
}
.mlr {
margin: 0 0.5rem;
}
/* Header */
/* Social */
header .top-bar {
background: #7a5e86;
background: linear-gradient(to right, #7a5e86 0%, #a75e67 51%, #f77b2e 100%);
padding: 0.5rem 0;
border-bottom: 1px solid #e9ecef;
overflow: hidden;
}
header .top-bar a {
color: rgba(255, 255, 255, 0.9);
}
header .top-bar i {
margin-right: 0.5rem;
}
header .top-bar .social-1 {
float: left;
}
header .top-bar .social-2 {
float: right;
}
/* Navigation */
nav {
padding: 2rem;
box-shadow: 4px 0 20px -5px rgba(0, 0, 0, 0.2);
height: 100px;
}
nav .logo {
float: left;
font-size: 1.2rem;
font-weight: 700;
text-transform: uppercase;
margin-left: -15px;
}
nav ul {
float: right;
}
nav ul li {
display: inline-block;
position: relative;
}
nav ul li a {
margin: 0 15px;
padding: 20px 0;
}
nav ul li ul li i {
right: 20px;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
nav ul li ul {
visibility: hidden;
opacity: 0;
border-top: 2px solid #ff8b00;
box-shadow: 0 2px 10px -2px rgba(0, 0, 0, 0.1);
background: #fff;
position: absolute;
top: 100%;
left: 0;
width: 200px;
margin-top: 1rem;
box-shadow: 0 2px 10px -2px rgba(0, 0, 0, 0.1);
transition: opacity 300ms ease, transform 300ms ease;
transform: translateY(50px);
}
nav ul li ul li a {
padding: 9px 20px;
display: block;
margin: 0;
}
nav ul li ul li a:hover {
background: #f8f9fa;
}
nav ul li:hover ul {
visibility: visible;
opacity: 1;
transform: translateY(0);
}
nav ul li:hover ul li ul {
visibility: hidden;
opacity: 0;
border-top: 2px solid #ff8b00;
box-shadow: 0 2px 10px -2px rgba(0, 0, 0, 0.1);
background: #fff;
position: absolute;
top: 0;
left: 100%;
width: 200px;
margin-top: 1rem;
box-shadow: 0 2px 10px -2px rgba(0, 0, 0, 0.1);
transition: opacity 300ms ease, transform 300ms ease;
transform: translateY(50px);
}
nav ul li:hover ul li:hover ul {
visibility: visible;
opacity: 1;
transform: translateY(0);
}
nav ul li ul li {
display: block;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="css/style.css" />
<script src="https://kit.fontawesome.com/1685e275a4.js"></script>
<title>Orn</title>
</head>
<body>
<!-- Header -->
<header>
<!-- Social -->
<div class="top-bar">
<div class="container">
<div class="social-1">
<a href="index.html">
<i class="far fa-envelope-open "></i> [email protected]
</a>
<span class="mlr"></span>
<a href="index.html">
<i class="fas fa-phone-alt fa-sm"></i> 451-805-0360
</a>
</div>
<div class="social-2">
<a href="index.html"> <i class="fab fa-twitter"></i> Twitter</a>
<span class="mlr"></span>
<a href="index.html"> <i class="fab fa-instagram"></i> Instagram</a>
</div>
</div>
</div>
<!-- Navigation -->
<nav>
<div class="container">
<div class="logo">
<a href="index.html" class="text-primary">Orn</a>
</div>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li>
<a href="#">About Us <i class="fas fa-angle-down fa-xs"></i></a>
<ul class="dropdown">
<li><a href="#">Team</a></li>
<li><a href="#">Pricing</a></li>
<li><a href="#">FAQ</a></li>
<li>
<a href="#"
>More Links <i class="fas fa-angle-right fa-xs"></i
></a>
<ul class="dropdown2">
<li><a href="#">Menu One</a></li>
<li><a href="#">Menu Two</a></li>
<li><a href="#">Menu Three</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Press</a></li>
<li><a href="#">Testimonials</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</nav>
</header>
</body>
</html>How can I target my 2nd dropdown menu via CSS?
li > ul
I tried like so: nav ul li:hover > ul li > ul and nav ul li:hover > ul li:hover > ul and it still didn’t work
You’ve got some issues in your order of inception AKA your
Chris, could you please be more specific about the DOM structure? What mistakes do you see? Thank you for your ur comment, I will do my research on the specificty topic
@WebByDima sorry I worded that incorrectly (too used to doing code reviews on places that require things like 508/ARIA/WCAG compliance which is probably more than you need), the DOM structure is actually not bad at all, it was just the specificity inheritance, you’re good bro.
I actually achieved needed result with your first answer before edit (I added classes)
I can edit my answer to add the classes . Your issue is specificity.
if you edit it back I can mark the answer as helped I’m just not sure if edited solution is working also fine. Thank you for your help. Do you know an article that can help me understand better my issue?
So, if I understand correctly than with “>” selector I can ignore elements I don’t need and just focus the ones I need, when trying to select something?
@WebByDima check the links 🙂