Не работает подменю

180
24 июня 2021, 08:00

Доброй ночи. Есть выпадающее меню и по плану когда наводишь на Produst - Desctop cправа должно появится скрытое подменю drop-menu2. Я уже и дал пункту меню desctom класс, а вот как с помощью ховера сделать так чтобы появлялась спрятанное меню не понимаю.

html

<!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" />
    <title>Document</title>
  </head>
  <body>
    <div class="header">
      <div class="container">
        <nav class="nav">
          <a href="index.html" class="logo">
            <img src="img/logo.png" alt="" />
          </a>
          <ul class="menu">
            <li><a href="#">Home</a></li>
            <li>
              <a href="#">Products</a>
              <ul class="drop-menu">
                <li><a href="#">Laptops</a></li>
                <li><a class="desctop" href="#">Desktop</a></li>
                <ul class="drop-menu2">
                  <li><a href="#">Gaming</a></li>
                  <li><a href="#">Business</a></li>
                  <li><a href="#">Mac</a></li>
                </ul>
                <li><a href="#">Computer parts</a></li>
              </ul>
            </li>
            <li><a href="#">Contact</a></li>
          </ul>
        </nav>
        <!--   <div class="header-left bc">
          <p></p>
        </div>
        <div class="header-right bc">
          <p></p>
        </div>
        <div class="header-bottom bc">
          <p></p>
        </div>-->
      </div>
    </div>
    <div class="main">
      <div class="container">
        <div class="sidebar-left bc">
          <p></p>
        </div>
        <div class="sidebar-middle bc">
          <p></p>
        </div>
        <div class="sidebar-left bc">
          <p></p>
        </div>
        <div class="sidebar-first bc">
          <p></p>
        </div>
        <div class="sidebar-second bc">
          <p></p>
        </div>
        <div class="footer">
          <div class="container">
            <div class="footer-first bc">
              <p></p>
            </div>
            <div class="footer-second bc">
              <p></p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

CSS

/*-----------------cammon start------------------*/
* {
  box-sizing: border-box;
}
body {
  background-color: #faf0e6;
  padding: 10px 0;
}
.bc {
  background-color: #f4a460;
}
.container {
  width: 1200px;
  margin: 0 auto;
}
a,
span {
  display: inline-flex;
  color: inherit;
  text-decoration: none;
}
/*-----------------cammon end------------------*/
.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 5px;
}
.logo {
  font-family: sans-serif;
  font-size: 50px;
  font-weight: 900;
}
.logo > img {
  width: 100px;
  margin-right: 10px;
}
.menu {
  display: flex;
  align-items: center;
  font-size: 20px;
  font-weight: bold;
  color: #0096d6;
}
.menu > li + li {
  margin-left: 10px;
}
.menu li {
  position: relative;
}
.menu li:hover > a {
  text-decoration: underline;
}
.menu a {
  padding: 10px 25px;
  background-color: #d3d3d3;
  border-radius: 10px;
  border: 2px solid #0096d6;
}
.drop-menu {
  padding: 10px;
  position: absolute;
  left: 0;
  top: 100%;
  visibility: hidden;
  opacity: 0;
}
.drop-menu2 {
  position: absolute;
  right: 0;
  left: 100%;
  visibility: hidden;
  opacity: 0;
}
.drop-menu > li + li {
  margin-top: 10px;
}
.menu li:hover > .drop-menu {
  visibility: visible;
  opacity: 1;
}
.desctop li:hover {
  visibility: visible;
  opacity: 2;
}
.main .header .container .header-left {
  width: 300px;
  min-height: 150px;
  padding-top: 10px;
}
.header .container .header-right {
  width: 850px;
}
.header .container .header-bottom {
  width: 1200px;
  min-height: 250px;
  margin: 25px 0;
}
.main .container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.main .container .sidebar-left {
  width: 300px;
  min-height: 200px;
}
.main .container .sidebar-middle {
  width: 500px;
}
.main .container .sidebar-left {
  width: 300px;
}
.main .container .sidebar-first {
  width: 580px;
  min-height: 200px;
  margin: 20px 0;
}
.main .container .sidebar-second {
  width: 580px;
  margin: 20px 0;
}
.footer .container .footer-first {
  width: 100%;
  min-height: 100px;
  margin-bottom: 20px;
}
.footer .container .footer-second {
  width: 100%;
  min-height: 150px;
}
Answer 1

Вот так это делается - смотрим

смотреть на полный экран

* { 
  box-sizing: border-box; 
} 
 
body { 
  background-color: #faf0e6; 
  padding: 10px 0; 
} 
 
.bc { 
  background-color: #f4a460; 
} 
 
.container { 
  width: 1200px; 
  margin: 0 auto; 
} 
 
a, 
span { 
  display: inline-flex; 
  color: inherit; 
  text-decoration: none; 
} 
 
 
/*-----------------cammon end------------------*/ 
 
.nav { 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
  padding-bottom: 5px; 
} 
 
.logo { 
  font-family: sans-serif; 
  font-size: 50px; 
  font-weight: 900; 
} 
 
.logo>img { 
  width: 100px; 
  margin-right: 10px; 
} 
 
.menu { 
  display: flex; 
  align-items: center; 
  font-size: 20px; 
  font-weight: bold; 
  color: #0096d6; 
} 
 
.menu>li+li { 
  margin-left: 10px; 
} 
 
.menu li { 
  position: relative; 
} 
 
.menu li:hover>a { 
  text-decoration: underline; 
} 
 
.menu a { 
  padding: 10px 25px; 
  background-color: #d3d3d3; 
  border-radius: 10px; 
  border: 2px solid #0096d6; 
} 
 
.drop-menu { 
  padding: 10px; 
  position: absolute; 
  left: 0; 
  top: 100%; 
  visibility: hidden; 
  opacity: 0; 
} 
 
.drop-menu2 { 
  position: absolute; 
  right: 0; 
  left: 100%; 
  visibility: hidden; 
  opacity: 0; 
  top: 0; 
} 
 
.drop-menu>li+li { 
  margin-top: 10px; 
} 
 
.menu li:hover .drop-menu { 
  visibility: visible; 
  opacity: 1; 
} 
 
.drop-menu li:hover .drop-menu2 { 
  visibility: visible; 
  opacity: 1; 
} 
 
.desctop li:hover { 
  visibility: visible; 
  opacity: 2; 
} 
 
.main .header .container .header-left { 
  width: 300px; 
  min-height: 150px; 
  padding-top: 10px; 
} 
 
.header .container .header-right { 
  width: 850px; 
} 
 
.header .container .header-bottom { 
  width: 1200px; 
  min-height: 250px; 
  margin: 25px 0; 
} 
 
.main .container { 
  display: flex; 
  justify-content: space-between; 
  flex-wrap: wrap; 
} 
 
.main .container .sidebar-left { 
  width: 300px; 
  min-height: 200px; 
} 
 
.main .container .sidebar-middle { 
  width: 500px; 
} 
 
.main .container .sidebar-left { 
  width: 300px; 
} 
 
.main .container .sidebar-first { 
  width: 580px; 
  min-height: 200px; 
  margin: 20px 0; 
} 
 
.main .container .sidebar-second { 
  width: 580px; 
  margin: 20px 0; 
} 
 
.footer .container .footer-first { 
  width: 100%; 
  min-height: 100px; 
  margin-bottom: 20px; 
} 
 
.footer .container .footer-second { 
  width: 100%; 
  min-height: 150px; 
}
<div class="header"> 
  <div class="container"> 
    <nav class="nav"> 
      <a href="index.html" class="logo"> 
        <img src="img/logo.png" alt="" /> 
      </a> 
      <ul class="menu"> 
        <li><a href="#">Home</a></li> 
        <li> 
          <a href="#">Products</a> 
          <ul class="drop-menu"> 
            <li><a href="#">Laptops</a></li> 
            <li><a class="desctop" href="#">Desktop</a> 
              <ul class="drop-menu2"> 
                <li><a href="#">Gaming</a></li> 
                <li><a href="#">Business</a></li> 
                <li><a href="#">Mac</a></li> 
              </ul> 
            </li> 
            <li><a href="#">Computer parts</a></li> 
          </ul> 
        </li> 
 
        <li><a href="#">Contact</a></li> 
      </ul> 
    </nav> 
    <!--   <div class="header-left bc"> 
          <p></p> 
        </div> 
        <div class="header-right bc"> 
          <p></p> 
        </div> 
        <div class="header-bottom bc"> 
          <p></p> 
        </div>--> 
  </div> 
</div> 
<div class="main"> 
  <div class="container"> 
    <div class="sidebar-left bc"> 
      <p></p> 
    </div> 
    <div class="sidebar-middle bc"> 
      <p></p> 
    </div> 
    <div class="sidebar-left bc"> 
      <p></p> 
    </div> 
    <div class="sidebar-first bc"> 
      <p></p> 
    </div> 
    <div class="sidebar-second bc"> 
      <p></p> 
    </div> 
    <div class="footer"> 
      <div class="container"> 
        <div class="footer-first bc"> 
          <p></p> 
        </div> 
        <div class="footer-second bc"> 
          <p></p> 
        </div> 
      </div> 
    </div> 
  </div> 
</div>

Answer 2

В HTML документе.
1)Вам нужно добавить класс элементу <li> для удобного выбора в css.
До:

<li><a class="desctop" href="#">Desktop</a></li>

После: 

<li class="desctop"><a href="#">Desktop</a></li>

2) Поместите ваше подменю в элемент <li> с классом "desctop".
До:

<li class="desctop"><a href="#">Desktop</a></li>
<ul class="drop-menu2">
  <li><a href="#">Gaming</a></li>
  <li><a href="#">Business</a></li>
  <li><a href="#">Mac</a></li>
</ul>

После:

<li class="desctop">
  <a href="#">Desktop</a>
  <ul class="drop-menu2">
    <li><a href="#">Gaming</a></li>
    <li><a href="#">Business</a></li>
    <li><a href="#">Mac</a></li>
  </ul>
</li>

В CSS файле.
Замените селектор:

 .desctop li:hover {
   visibility: visible;
   opacity: 2;
 }

На:

 .desctop:hover .drop-menu2{
   visibility: visible;
   opacity: 2;
 }

Все работает.

Answer 3

На первый взгляд похоже, что выбранный код поддерживает только два уровня. Попробуйте использовать этот

<div class="main">
            <ul class="mainnav">
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li class="hassubs"><a href="#">Services</a>
                    <ul class="dropdown">
                        <li class="subs"><a href="#">Web Development</a></li>
                        <li class="subs"><a href="#">Mobile Apps</a></li>
                        <li class="subs hassubs"><a href="#">Designing</a>
                            <ul class="dropdown">
                                <li class="subs"><a href="#">Web Design</a></li>
                                <li class="subs"><a href="#">Graphic Design</a></li>
                                <li class="subs"><a href="#">Logo Design</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li><a href="#">Gallery</a></li>
                <li class="hassubs"><a href="#">Contact</a>
                    <ul class="dropdown">
                        <li class="subs"><a href="#">Email</a></li>
                        <li class="subs hassubs"><a href="#">Address</a>
                            <ul class="dropdown">
                                <li class="subs"><a href="#">Head Office</a></li>
                                <li class="subs"><a href="#">Registered Office</a></li>
                                <li class="subs"><a href="#">Locate us</a></li>
                            </ul>
                        </li>
                        <li class="subs"><a href="#">Phone</a></li>
                    </ul>
                </li>
            </ul>
            <br style="clear: both;">
        </div>

.main{width: 100%; background: #eee;}
/*General Menu Styling*/
.mainnav{margin: 0 auto}
li{list-style: none;}
li a{text-decoration: none;}
.dropdown{position: absolute; width: 150px;top: 41px; opacity: 0;visibility: hidden;transition: ease-out .35s;-moz-transition: ease-out .35s;-webkit-transition: ease-out .35s;}
.mainnav li{float: left;padding: 5px;background: maroon;border-left: 1px dotted #fff;}
.mainnav li:first-child{border: none;}
.mainnav li a{ display: block;padding: 2px 20px;color: #fff;font-family: arial;}
.mainnav li:hover{background: #fff;transition: ease-in .35s;-moz-transition: ease-in .35s;-webkit-transition: ease-in .35s;}
.mainnav li:hover a{color: maroon;transition: ease-in .35s;-moz-transition: ease-in .35s;-webkit-transition: ease-in .35s;}
/*First Level*/
.subs {left: -45px;position: relative;top: 0px;width: 175px;border-left: none !important; border-bottom: 1px dotted #fff !important;}
.subs:last-child{border: none !important;}
.hassubs:hover .dropdown,.hassubs .hassubs:hover .dropdown{opacity: 1;visibility: visible; transition: ease-in .35s;-moz-transition: ease-in .35s;-webkit-transition: ease-in .35s;}
.mainnav li:hover ul a,.mainnav li:hover ul li ul li a{color: white;}
.mainnav li ul li:hover,.mainnav li ul li ul li:hover{background: #fff;transition: ease-in-out .35s;-moz-transition: ease-in-out .35s;-webkit-transition: ease-in-out .35s;}
.mainnav li ul li:hover a,.mainnav li ul li ul li:hover a{color: maroon;transition: ease-in-out .35s;-moz-transition: ease-in-out .35s;-webkit-transition: ease-in-out .35s;}
/*Second Level*/
.hassubs .hassubs .dropdown .subs{left: 25px;position: relative;width: 165px;top: 0px;}
.hassubs .hassubs .dropdown{position: absolute;width: 150px;left: 120px;top: 0px;opacity: 0;visibility: hidden;transition: ease-out .35s;-moz-transition: ease-out .35s;-webkit-transition: ease-out .35s;}
READ ALSO
В каком сегменте программы находится таблица виртуальных функций класса?
c++

В каком сегменте программы находится таблица виртуальных функций класса?

Имеется одиночный класс с одной виртуальной функцией, не чисто-виртуальной

 148
Как работает оператор [] в std::shared_ptr
c++

Как работает оператор [] в std::shared_ptr

Пытаюсь получить доступ к элементу массива через его указатель, объявленный как shared_ptr так:

 93
noexcept swap с мьютексами
c++

noexcept swap с мьютексами

Считается хорошим тоном обеспечивать noexcept-swap функцию-член классаЧто делать, если появляется необходимость добавить в этой функции такую...

 127
Проверка блокировки MAC OS
c++

Проверка блокировки MAC OS

Как проверить заблокирована ли машина на MAC OS?

 96