2

У меня в categories (Категории) перечислены iPhone,iPad итд. Так вот как сделать при наведении на дроп лист автоматом наведение на категорию. То есть если я навожу на iPhone x допустим, светился и iPhone тоже.

li {
  list-style: none;
}

.menu {
  display: flex;
  justify-content: center;
  max-width: 700px;
  max-height: 90px;
  height: 100%;
  margin: auto;
  background-color: black;
  border: 1px solid #fff;
}

.menu:hover {
  border: 1px solid coral;
}

.categories a {
  color: #fff;
  text-decoration: none;
  margin-right: 25px;
  padding: 10px 0px;
}

.categories a:hover {
  color: coral;
}

.btn {
  display: inline-block;
  color: #fff;
  font-size: 1rem;
  font-weight: 400;
  background-color: transparent;
  border: 1px solid #fff;
  border-radius: 50px;
  padding: 10px;
  cursor: pointer;
  outline: none;
  letter-spacing: 3px;
}

.btn:hover {
  background-color: transparent;
  border: 1px solid coral;
  color: coral;
}

ul {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}

ul.categories>li {
  align-items: center;
  display: flex;
  list-style: none;
  position: relative;
  z-index: 1;
}

.submenu {
  z-index: -1;
  padding: 10px 0px;
  background-color: black;
  overflow: hidden;
  display: none;
  width: 200px;
  position: absolute;
  line-height: 1.5rem;
  top: 40px;
  left: 0;
}

.submenu li {
  width: 200px;
  display: block;
}

.submenu li a {
  display: block;
  background-color: transparent;
}

.submenu li:hover {
  display: block;
  padding-left: 5px;
  background-color: transparent;
}

.categories li:hover .submenu {
  display: block;
  border-left: 1px solid coral;
  border-bottom: 1px solid coral;
}

.categories button:hover+.submenu {
  color: coral;
}
<nav class="menu">
  <ul class="categories">
    <li><a href="#"><button class="btn" type="">iPhone</button> </a>
      <ul class="submenu">
        <li><a href="#">iPhone X</a></li>
        <li><a href="#">iPhone 8 Plus</a></li>
        <li><a href="#">iPhone 8</a></li>
        <li><a href="#">iPhone 7 Plus</a></li>
      </ul>
    </li>
    <li><a href="#"><button class="btn" type="">iPad</button></a>
      <ul class="submenu">
        <li><a href="#">iPad Pro</a></li>
        <li><a href="#">iPad 2017</a></li>
        <li><a href="#">iPad Mini</a></li>
        <li><a href="#">iPad Air 2</a></li>
      </ul>
    </li>
    <li><a href="#"><button class="btn" type="">Mac</button></a>
      <ul class="submenu">
        <li><a href="#">iMac Pro</a></li>
        <li><a href="#">iMac 2017</a></li>
        <li><a href="#">iMac 2016</a></li>
        <li><a href="#">iMac 2015</a></li>
      </ul>
    </li>
    <li><a href="#"><button class="btn" type="">Watch</button></a>
      <ul class="submenu">
        <li><a href="#">Watch Series 1</a></li>
        <li><a href="#">Watch Series 2</a></li>
        <li><a href="#">Watch Series 3</a></li>
        <li><a href="#">Watch Series 3 (Edition)</a></li>
      </ul>
    </li>
    <li><a href="#"><button class="btn" type="">Accessories</button></a>
      <ul class="submenu">
        <li><a href="#">Apple Mini DisplayPort</a></li>
        <li><a href="#">Мышь Apple Magic Mouse 2</a></li>
        <li><a href="#">Apple USB-C Digital AV </a></li>
        <li><a href="#">Трекпад Apple Magic Trackpad 2 </a></li>
      </ul>
    </li>
  </ul>
</nav>

3
  • Непонятна суть вопроса, что значит "hover категории" ?
    – Arsen
    30 мар 2018 в 8:56
  • у меня в categories (Категории) перечислены iPhone,iPad итд. Так вот как сделать при наведении на дроп лист автоматом наведение на категорию. То есть если я навожу на iPhone x допустим, светился и iPhone тоже. 30 мар 2018 в 8:58
  • 1
    Позвольте написать код заново, у вас некорректно построена структура html
    – user245150
    30 мар 2018 в 9:05

2 ответа 2

3

Я не менял структуру и не менял вашу вёрстку , но исправил и интересующий фрагмент css выглядит так :

li:hover a>.btn { border: 1px solid green;color: green;}

и сама реализация такая :

li {
  list-style: none;
}

.menu {
  display: flex;
  justify-content: center;
  max-width: 700px;
  max-height: 90px;
  height: 100%;
  margin: auto;
  background-color: black;
  border: 1px solid #fff;
}

.menu:hover {
  border: 1px solid coral;
}

.categories a {
  color: #fff;
  text-decoration: none;
  margin-right: 25px;
  padding: 10px 0px;
}

.categories a:hover {
  color: coral;
}

.btn {
  display: inline-block;
  color: #fff;
  font-size: 1rem;
  font-weight: 400;
  background-color: transparent;
  border: 1px solid #fff;
  border-radius: 50px;
  padding: 10px;
  cursor: pointer;
  outline: none;
  letter-spacing: 3px;
}

.btn:hover {
  background-color: transparent;
  border: 1px solid coral;
  color: coral;
}

ul {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}

ul.categories>li {
  align-items: center;
  display: flex;
  list-style: none;
  position: relative;
  z-index: 1;
}

.submenu {
  z-index: -1;
  padding: 10px 0px;
  background-color: black;
  overflow: hidden;
  display: none;
  width: 200px;
  position: absolute;
  line-height: 1.5rem;
  top: 40px;
  left: 0;
}

.submenu li {
  width: 200px;
  display: block;
}

li:hover a>.btn {
  border: 1px solid green;
  color: orange;
}

.submenu li a {
  display: block;
  background-color: transparent;
}

.submenu li:hover {
  display: block;
  padding-left: 5px;
  background-color: transparent;
}

.categories li:hover .submenu {
  display: block;
  border-left: 1px solid coral;
  border-bottom: 1px solid coral;
}

.categories button:hover+.submenu {
  color: coral;
}
<nav class="menu">
  <ul class="categories">
    <li><a href="#"><button class="btn" type="">iPhone</button> </a>
      <ul class="submenu">
        <li><a href="#">iPhone X</a></li>
        <li><a href="#">iPhone 8 Plus</a></li>
        <li><a href="#">iPhone 8</a></li>
        <li><a href="#">iPhone 7 Plus</a></li>
      </ul>
    </li>
    <li><a href="#"><button class="btn" type="">iPad</button></a>
      <ul class="submenu">
        <li><a href="#">iPad Pro</a></li>
        <li><a href="#">iPad 2017</a></li>
        <li><a href="#">iPad Mini</a></li>
        <li><a href="#">iPad Air 2</a></li>
      </ul>
    </li>
    <li><a href="#"><button class="btn" type="">Mac</button></a>
      <ul class="submenu">
        <li><a href="#">iMac Pro</a></li>
        <li><a href="#">iMac 2017</a></li>
        <li><a href="#">iMac 2016</a></li>
        <li><a href="#">iMac 2015</a></li>
      </ul>
    </li>
    <li><a href="#"><button class="btn" type="">Watch</button></a>
      <ul class="submenu">
        <li><a href="#">Watch Series 1</a></li>
        <li><a href="#">Watch Series 2</a></li>
        <li><a href="#">Watch Series 3</a></li>
        <li><a href="#">Watch Series 3 (Edition)</a></li>
      </ul>
    </li>
    <li><a href="#"><button class="btn" type="">Accessories</button></a>
      <ul class="submenu">
        <li><a href="#">Apple Mini DisplayPort</a></li>
        <li><a href="#">Мышь Apple Magic Mouse 2</a></li>
        <li><a href="#">Apple USB-C Digital AV </a></li>
        <li><a href="#">Трекпад Apple Magic Trackpad 2 </a></li>
      </ul>
    </li>
  </ul>
</nav>

2

Я переписал код, суть в том что при наведении на .category ссылки изменяют цвет а так как .submenu потомок класса .category происходит наведение так-же и по .category. Я удалил button потому-что для кнопок меню лучше использовать просто ссылки.

* {
  margin: 0;
  padding: 0;
}

body {
  font-family: sans-serif;
}

.menu {
  padding: 10px;
  background: #222;
}
.menu .categories {
  display: flex;
  list-style-type: none;
}
.menu .categories .category {
  padding: 0 10px;
}
.menu .categories .category a {
  color: #fff;
}
.menu .categories .category:hover a {
  color: #ff7300;
}
.menu .categories .category:hover .submenu {
  display: block;
}
.menu .categories .category .submenu {
  list-style-type: none;
  position: absolute;
  background: #222;
  padding: 10px;
  display: none;
}
.menu .categories .category .submenu li a {
  color: #fff;
}
.menu .categories .category .submenu li a:hover {
  color: #ff7300;
}
<nav class="menu">
   <ul class="categories">
      <li class="category">
         <a href="#" class="btn">IPhone</a>
         <ul class="submenu">
            <li><a href="#">iPhone X</a></li>
            <li><a href="#">iPhone 8 Plus</a></li>
            <li><a href="#">iPhone 8</a></li>
            <li><a href="#">iPhone 7 Plus</a></li>
         </ul>
      </li>
      <li class="category">
         <a href="#" class="btn">IPhone</a>
         <ul class="submenu">
            <li><a href="#">iPhone X</a></li>
            <li><a href="#">iPhone 8 Plus</a></li>
            <li><a href="#">iPhone 8</a></li>
            <li><a href="#">iPhone 7 Plus</a></li>
         </ul>
      </li>      <li class="category">
         <a href="#" class="btn">IPhone</a>
         <ul class="submenu">
            <li><a href="#">iPhone X</a></li>
            <li><a href="#">iPhone 8 Plus</a></li>
            <li><a href="#">iPhone 8</a></li>
            <li><a href="#">iPhone 7 Plus</a></li>
         </ul>
      </li>      <li class="category">
         <a href="#" class="btn">IPhone</a>
         <ul class="submenu">
            <li><a href="#">iPhone X</a></li>
            <li><a href="#">iPhone 8 Plus</a></li>
            <li><a href="#">iPhone 8</a></li>
            <li><a href="#">iPhone 7 Plus</a></li>
         </ul>
      </li>      <li class="category">
         <a href="#" class="btn">IPhone</a>
         <ul class="submenu">
            <li><a href="#">iPhone X</a></li>
            <li><a href="#">iPhone 8 Plus</a></li>
            <li><a href="#">iPhone 8</a></li>
            <li><a href="#">iPhone 7 Plus</a></li>
         </ul>
      </li>
   </ul>
</nav>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.