Трехуровневое меню \ Псевдоклассы CSS

441
31 августа 2017, 19:26

Добрый день уважаемые. Подскажите, пожалуйста как реализовать на CSS отображение трехуровневого меню Вот на этом примере 

/* MY MENU*/ 
 
.correct_right { 
  padding-right: 0 !important; 
} 
 
.correct_left { 
  padding-left: 0 !important; 
} 
 
.navigation_fluid { 
  background-color: #00ab00; 
  margin-bottom: 10px; 
} 
 
.main-nav { 
  width: 100%; 
  position: relative; 
} 
 
.main-nav__fullMenu { 
  position: relative; 
  margin: 0 auto; 
  padding: 0; 
  display: flex; 
  flex-wrap: wrap; 
  justify-content: space-between; 
  text-align: center; 
  list-style-type: none; 
  /*min-height: 50px;*/ 
} 
 
.main-nav__item { 
  height: 100%; 
  min-height: 50px; 
  width: calc(100% / 7); 
  box-sizing: border-box; 
  border-left: 1px solid #000; 
} 
 
.main-nav__item:last-child { 
  border-right: 1px solid #000; 
} 
 
.main-nav__link { 
  width: 100%; 
  height: 100%; 
  margin: 0 auto; 
} 
 
.main-nav__name { 
  display: flex; 
  flex-wrap: wrap; 
  flex-direction: column; 
  justify-content: center; 
  width: 100%; 
  min-height: 50px; 
  margin: 0; 
  padding: 2% 1%; 
  line-height: 1; 
  font-size: 15px; 
  font-weight: bold; 
  color: #fff; 
} 
 
.main-nav__name:hover { 
  background-color: #53c205; 
} 
 
.main-nav__link:hover { 
  text-decoration: none; 
} 
 
.megamenu { 
  width: 100%; 
  position: absolute; 
  top: 100%; 
  left: 0; 
  background: #f8f8f8; 
  box-sizing: border-box; 
  border-radius: 0 0 2px 2px; 
  text-align: left; 
  list-style-type: none; 
  border: 1px solid #ccc; 
  z-index: 9999; 
} 
 
.megamenu_wrapper { 
  display: table; 
  width: 100%; 
  border-collapse: collapse; 
} 
 
.subCategories_name { 
  display: table-cell; 
  /*display: none;*/ 
  width: 185px; 
  font-size: 14px; 
  vertical-align: top; 
  line-height: 16px; 
} 
 
.main-nav__item .main-nav__link:hover .subCategories_name { 
  display: table-cell; 
} 
 
.subCategories_full { 
  padding: 0; 
  margin: 9px; 
  list-style-type: none; 
} 
 
.subCategories_item { 
  width: 100%; 
  display: list-item; 
  margin-top: 15px; 
} 
 
.subCategories_item:hover { 
  color: #53c205; 
  cursor: pointer; 
} 
 
.subCategories_view { 
  display: none; 
  /*display: flex;*/ 
  flex-wrap: wrap; 
  flex-direction: row; 
  justify-content: space-between; 
  padding: 0 30px 4px; 
  overflow: hidden; 
  list-style: none; 
  width: 100%; 
  height: 100%; 
  min-height: 290px; 
  background-color: #fff; 
  border: 1px solid #ccc; 
  box-sizing: border-box; 
  z-index: 9999; 
} 
 
.subCategories_looks { 
  display: inline-block; 
  vertical-align: bottom; 
  max-width: 100px; 
} 
 
.subCategories_looks__link { 
  vertical-align: top; 
  display: inline-block; 
  min-height: 100px; 
  /*border: 1px solid red;*/ 
} 
 
.subCategories_looks__link:hover .subCategories_looks__name { 
  color: #53c205; 
  text-decoration: none; 
} 
 
.subCategories_looks__name { 
  font-size: 13px; 
  height: 30px; 
  text-align: center; 
  word-wrap: break-word; 
  color: #000; 
} 
 
.subCategories_looks__imageBlock { 
  margin: 0 auto; 
} 
 
.subCategories_looks__img { 
  width: 100%; 
  max-width: 100px; 
  background-size: cover; 
} 
 
.megamenu .megamenu_wrapper .subCategories_name .subCategories_full .subCategories_item:nth-of-type(1):hover .megamenu_wrapper .subCategories_view:nth-of-type(1), 
.megamenu .megamenu_wrapper .subCategories_name .subCategories_full .subCategories_item:nth-of-type(2):hover .megamenu_wrapper .subCategories_view:nth-of-type(2) { 
  display: flex; 
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/> 
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container-fluid navigation_fluid"> 
  <div class="container correct_right correct-left"> 
    <div class="col-xs-12"> 
      <nav id="menu" class="main-nav"> 
        <ul class="main-nav__fullMenu"> 
          <li class="main-nav__item"> 
            <a class="main-nav__link" href="#"> 
              <h2 class="main-nav__name">ROOT</h2> 
            </a> 
            <div class="megamenu"> 
              <div class="megamenu_wrapper"> 
                <div class="subCategories_name"> 
                  <ul class="subCategories_full"> 
                    <li class="subCategories_item">Игры, Мультимедиа</li> 
                    <li class="subCategories_item">Ноутбуки</li> 
                    <li class="subCategories_item">Планшеты</li> 
                    <li class="subCategories_item">Электронные книги</li> 
                    <li class="subCategories_item">Персональные Компьютеры</li> 
                    <li class="subCategories_item">Принтеры</li> 
                    <li class="subCategories_item">Сетевое Оборудование</li> 
                    <li class="subCategories_item">Компьютерная периферия</li> 
                  </ul> 
                </div> 
                <ul class="subCategories_view"> 
                  <li class="subCategories_looks"> 
                    <div class="subCategories_looks__item"> 
                      <a class="subCategories_looks__link" href="#"> 
                        <h3 class="subCategories_looks__name">Игровые приставки</h3> 
                        <div class="subCategories_looks__imageBlock visible-md visible-lg"> 
                          <img class="subCategories_looks__img" src="/image/catalog/demo/1.jpg" alt=""> 
                        </div> 
                      </a> 
                    </div> 
                  </li> 
                </ul> 
                <ul class="subCategories_view"> 
                  <li class="subCategories_looks"> 
                    <div class="subCategories_looks__item"> 
                      <a class="subCategories_looks__link" href="#"> 
                        <h3 class="subCategories_looks__name">Acer</h3> 
                        <div class="subCategories_looks__imageBlock visible-md visible-lg"> 
                          <img class="subCategories_looks__img" src="/image/catalog/demo/1.jpg" alt=""> 
                        </div> 
                      </a> 
                    </div> 
                  </li> 
                  <li class="subCategories_looks"> 
                    <div class="subCategories_looks__item"> 
                      <a class="subCategories_looks__link" href="#"> 
                        <h3 class="subCategories_looks__name">Asus</h3> 
                        <div class="subCategories_looks__imageBlock visible-md visible-lg"> 
                          <img class="subCategories_looks__img" src="/image/catalog/demo/1.jpg" alt=""> 
                        </div> 
                      </a> 
                    </div> 
                  </li> 
                  <li class="subCategories_looks"> 
                    <div class="subCategories_looks__item"> 
                      <a class="subCategories_looks__link" href="#"> 
                        <h3 class="subCategories_looks__name">Dell</h3> 
                        <div class="subCategories_looks__imageBlock visible-md visible-lg"> 
                          <img class="subCategories_looks__img" src="/image/catalog/demo/1.jpg" alt=""> 
                        </div> 
                      </a> 
                    </div> 
                  </li> 
                  <li class="subCategories_looks"> 
                    <div class="subCategories_looks__item"> 
                      <a class="subCategories_looks__link" href="#"> 
                        <h3 class="subCategories_looks__name">Dream Machines</h3> 
                        <div class="subCategories_looks__imageBlock visible-md visible-lg"> 
                          <img class="subCategories_looks__img" src="/image/catalog/demo/1.jpg" alt=""> 
                        </div> 
                      </a> 
                    </div> 
                  </li> 
                  <li class="subCategories_looks"> 
                    <div class="subCategories_looks__item"> 
                      <a class="subCategories_looks__link" href="#"> 
                        <h3 class="subCategories_looks__name">Fujitsu</h3> 
                        <div class="subCategories_looks__imageBlock visible-md visible-lg"> 
                          <img class="subCategories_looks__img" src="/image/catalog/demo/1.jpg" alt=""> 
                        </div> 
                      </a> 
                    </div> 
                  </li> 
                  <li class="subCategories_looks"> 
                    <div class="subCategories_looks__item"> 
                      <a class="subCategories_looks__link" href="#"> 
                        <h3 class="subCategories_looks__name">HP</h3> 
                        <div class="subCategories_looks__imageBlock visible-md visible-lg"> 
                          <img class="subCategories_looks__img" src="/image/catalog/demo/1.jpg" alt=""> 
                        </div> 
                      </a> 
                    </div> 
                  </li> 
                  <li class="subCategories_looks"> 
                    <div class="subCategories_looks__item"> 
                      <a class="subCategories_looks__link" href="#"> 
                        <h3 class="subCategories_looks__name">Lenovo</h3> 
                        <div class="subCategories_looks__imageBlock visible-md visible-lg"> 
                          <img class="subCategories_looks__img" src="/image/catalog/demo/1.jpg" alt=""> 
                        </div> 
                      </a> 
                    </div> 
                  </li> 
                  <li class="subCategories_looks"> 
                    <div class="subCategories_looks__item"> 
                      <a class="subCategories_looks__link" href="#"> 
                        <h3 class="subCategories_looks__name">MSI</h3> 
                        <div class="subCategories_looks__imageBlock visible-md visible-lg"> 
                          <img class="subCategories_looks__img" src="/image/catalog/demo/1.jpg" alt=""> 
                        </div> 
                      </a> 
                    </div> 
                  </li> 
                  <li class="subCategories_looks"> 
                    <div class="subCategories_looks__item"> 
                      <a class="subCategories_looks__link" href="#"> 
                        <h3 class="subCategories_looks__name">Packard Bell</h3> 
                        <div class="subCategories_looks__imageBlock visible-md visible-lg"> 
                          <img class="subCategories_looks__img" src="/image/catalog/demo/1.jpg" alt=""> 
                        </div> 
                      </a> 
                    </div> 
                  </li> 
                  <li class="subCategories_looks"> 
                    <div class="subCategories_looks__item"> 
                      <a class="subCategories_looks__link" href="#"> 
                        <h3 class="subCategories_looks__name">Samsung</h3> 
                        <div class="subCategories_looks__imageBlock visible-md visible-lg"> 
                          <img class="subCategories_looks__img" src="/image/catalog/demo/1.jpg" alt=""> 
                        </div> 
                      </a> 
                    </div> 
                  </li> 
                  <li class="subCategories_looks"> 
                    <div class="subCategories_looks__item"> 
                      <a class="subCategories_looks__link" href="#"> 
                        <h3 class="subCategories_looks__name">Sony</h3> 
                        <div class="subCategories_looks__imageBlock visible-md visible-lg"> 
                          <img class="subCategories_looks__img" src="/image/catalog/demo/1.jpg" alt=""> 
                        </div> 
                      </a> 
                    </div> 
                  </li> 
                  <li class="subCategories_looks"> 
                    <div class="subCategories_looks__item"> 
                      <a class="subCategories_looks__link" href="#"> 
                        <h3 class="subCategories_looks__name">Toshiba</h3> 
                        <div class="subCategories_looks__imageBlock visible-md visible-lg"> 
                          <img class="subCategories_looks__img" src="/image/catalog/demo/1.jpg" alt=""> 
                        </div> 
                      </a> 
                    </div> 
                  </li> 
                  <li class="subCategories_looks"> 
                    <div class="subCategories_looks__item"> 
                      <a class="subCategories_looks__link" href="#"> 
                        <h3 class="subCategories_looks__name">Аксессуары для ноутбуков</h3> 
                        <div class="subCategories_looks__imageBlock visible-md visible-lg"> 
                          <img class="subCategories_looks__img" src="/image/catalog/demo/1.jpg" alt=""> 
                        </div> 
                      </a> 
                    </div> 
                  </li> 
                  <li class="subCategories_looks"> 
                    <div class="subCategories_looks__item"> 
                      <a class="subCategories_looks__link" href="#"> 
                        <h3 class="subCategories_looks__name">Коплектующие для ноутбука</h3> 
                        <div class="subCategories_looks__imageBlock visible-md visible-lg"> 
                          <img class="subCategories_looks__img" src="/image/catalog/demo/1.jpg" alt=""> 
                        </div> 
                      </a> 
                    </div> 
                  </li> 
                  <li class="subCategories_looks"> 
                    <div class="subCategories_looks__item"> 
                      <a class="subCategories_looks__link" href="#"> 
                        <h3 class="subCategories_looks__name">Apple</h3> 
                        <div class="subCategories_looks__imageBlock visible-md visible-lg"> 
                          <img class="subCategories_looks__img" src="/image/catalog/demo/1.jpg" alt=""> 
                        </div> 
                      </a> 
                    </div> 
                  </li> 
                </ul> 
 
 
 
 
              </div> 
            </div> 
 
 
          </li> 
          <li class="main-nav__item"> 
            <a class="main-nav__link" href="#"> 
              <h2 class="main-nav__name"> 
                Компьютеры и сети 
              </h2> 
            </a> 
          </li> 
          <li class="main-nav__item"> 
            <a class="main-nav__link" href="#"> 
              <h2 class="main-nav__name"> 
                ТВ, Аудио, Фото, Видео 
              </h2> 
            </a> 
          </li> 
          <li class="main-nav__item"> 
            <a class="main-nav__link" href="#"> 
              <h2 class="main-nav__name"> 
                Мобильная связь 
              </h2> 
            </a> 
          </li> 
          <li class="main-nav__item"> 
            <a class="main-nav__link" href="#"> 
              <h2 class="main-nav__name"> 
                Туризм, Спорт, Отдых 
              </h2> 
            </a> 
          </li> 
          <li class="main-nav__item"> 
            <a class="main-nav__link" href="#"> 
              <h2 class="main-nav__name"> 
                Для детей 
              </h2> 
            </a> 
          </li> 
          <li class="main-nav__item"> 
            <a class="main-nav__link" href="#"> 
              <h2 class="main-nav__name"> 
                Бытовая техника 
              </h2> 
            </a> 
          </li> 
 
 
        </ul> 
      </nav> 
    </div> 
  </div> 
</div>
https://jsfiddle.net/9h5sbye7/1/ Я немогу понять почему не отрабатывает последняя строка моего CSS ? Как сделать плавное отображение Навел на слово Игры, Мультимедиа получил блок с Игровые приставки навел на Ноутбуки получил блок с марками ноутбуков

Answer 1

Всё на самом деле очень даже просто. Обычное наследование в CSS. Вот написал простенький примерчик. В твоём коде всё слишком сложно и грустно, так не делается

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Menu</title>
</head>
<body>
  <ul class="main-menu">
    <li class="main-list">Menu 1
      <ul class="second-menu">
        <li class="second-list">Second
          <ul class="third-menu">
            <li class="third-list">Third</li>
          </ul>
        </li>
        <li class="second-list">Second
          <ul class="third-menu">
            <li class="third-list">Third</li>
            <li class="third-list">Third</li>
            <li class="third-list">Third</li>
            <li class="third-list">Third</li>
          </ul>
        </li>
      </ul>
    </li>
    <li class="main-list">Menu 2
      <ul class="second-menu">
        <li class="second-list">Second
          <ul class="third-menu">
            <li class="third-list">Third</li>
          </ul>
        </li>
        <li class="second-list">Second
          <ul class="third-menu">
            <li class="third-list">Third</li>
            <li class="third-list">Third</li>
            <li class="third-list">Third</li>
            <li class="third-list">Third</li>
          </ul>
        </li>
      </ul>
    </li>
    <li class="main-list">Menu 3</li>
  </ul>
</body>
</html>

CSS

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}
.main-menu{
  width:500px;
  height:50px;
  background-color:#444;
  display:flex;
  list-style:none;
  font-family:arial;
  color:#eee;
  justify-content: space-around;
  margin:auto;
}
.main-menu > .main-list{
  line-height:50px;
  width:100%;
  text-align:center;
  cursor:pointer;
}
.main-menu > .main-list:hover{
  background-color:#eee;
  color:#555;
}
.main-menu > .main-list > .second-menu{
  display:none;
  list-style:none;
}
.main-menu > .main-list:hover > .second-menu{
  display:block;
}
.main-menu > .main-list > .second-menu > .second-list:hover{
  background-color:#ddd;
}
.main-menu > .main-list > .second-menu > .second-list{
  height:50px;
  background-color:#eee;
}
.main-menu > .main-list > .second-menu > .second-list > .third-menu{
  display:none;
  margin-left:100%;
  margin-top:-50px;
  list-style:none;
  color:#eee;
}
.main-menu > .main-list > .second-menu > .second-list > .third-menu > .third-list{
  text-align:center;
  width: 150px;
  background-color:#777;
}
.main-menu > .main-list > .second-menu > .second-list > .third-menu > .third-list:hover{
  background-color:#566
}
.main-menu > .main-list > .second-menu > .second-list:hover > .third-menu{
  display:block;
}
Answer 2

Придумывать веросипед не нужно, есть масса готовых пимеров, достаточно погуглить. Вот неплохой пример http://variable.pp.ua/%D0%BC%D0%BD%D0%BE%D0%B3%D0%BE%D1%83%D1%80%D0%BE%D0%B2%D0%BD%D0%B5%D0%B2%D0%BE%D0%B5-%D0%B2%D1%8B%D0%BF%D0%B0%D0%B4%D0%B0%D1%8E%D1%89%D0%B5%D0%B5-%D0%BC%D0%B5%D0%BD%D1%8E-jquery-css/, наслаждайтесь:)

READ ALSO
Изменить фон при скролле вниз на 100vh
CSS

Изменить фон при скролле вниз на 100vh

Есть фиксированный хедер, в нём есть кнопка (#button), фон кнопки изначально прозраченНо при прокрутке страницы вниз на 100vh фон кнопки должен...

 406
Как сделать выбор рейтинга для товаров?
CSS

Как сделать выбор рейтинга для товаров?

Как сделать выбор рейтинга в виде звёзд? И нужно поставить звёзды в формате svg, svg имеютсяА допустим если использовать плагин jquery bar rating, то там...

 376
Комбинации вложенности классов Bootstrap
CSS

Комбинации вложенности классов Bootstrap

У меня вопрос касаемо того, какие классы Bootstrap, предназначенные для создания адаптивного макета, могут быть вложены друг в другаРазумеется,...

 376
MySQL, смена кодировки в заполненной бд
MySQL

MySQL, смена кодировки в заполненной бд

Добрый деньУчусь ПэХаПэ по книге, в главе MySQL создавалась БД на английском языке

 346