Как выбрать ul внутри ul в другом ul? - PullRequest
Новая
       8

Как выбрать ul внутри ul в другом ul?

0 голосов
/ 23 января 2020

Мне нужно выбрать свой второй раскрывающийся список ul в CSS, но, похоже, я не могу, поскольку он имеет атрибуты первого раскрывающегося списка ul, когда я пытаюсь сделать это следующим образом: 

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 добавлю мой полный код 

@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> info@yourdomain.com
            </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>

Как настроить таргетинг на мое второе раскрывающееся меню с помощью CSS?

Ответы [ 2 ]

1 голос
/ 23 января 2020

У вас проблема с специфичностью (также посмотрите на этот ответ ), так что здесь есть 2 возможности исправить проблему и упростить ваши стили css для :hover

Использование класса

1-й выпадающий элемент 

.dropdown > li:hover

2-й выпадающий элемент 

.dropdown >  ul > li:hover

Использование дочерний комбинатор > селектор

1-й выпадающий список 

 ul > ul > li:hover

2-й выпадающий список 

 ul > ul > ul > li:hover

Вы можете рассчитать специфику ваших правил здесь

0 голосов
/ 23 января 2020

Это будет работать: 

ul ul ul {
   background: red;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...