У меня в 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>
html