How to show all siblings: hover over pure CSS
You need to select all sibling items on mouseover <li>
. Went through the accepted answer here , but it doesn't work. JSFiddle here
.menu {
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;;
background-color: #777;
}
.menu li {
float: none;
display: none;
}
.menu li a {
display: block;
padding: 10px 20px 10px 20px;
text-decoration: none;
color: #bbb;
}
.menu li a:hover {
color: #fff;
}
.menu .btn {
display: block;
cursor: pointer;
}
.menu li:hover ~ .menu li{/*ON THIS HOVER NOT SHOWING ALL SIBLIING LIs*/
display: block !important;
}
<!--NEED SOLUTION WITHOUT ALTERING HTML -->
<ul class="menu">
<li class="btn"><a>☰</a></li>
<li><a href="/">Home</a></li>
<li><a href="/portfolio">Portfolio</a></li>
<li><a href="/contact">Contact</a>
<ul class="sub-menu">
<li><a href="/">Sub Menu</a></li>
<li><a href="/portfolio">Sub Menu</a></li>
</ul>
</li>
</ul>
<!--NEED SOLUTION WITHOUT ALTERING HTML -->
source to share
Your problem is the selector:
.menu li:hover ~ .menu li
A hidden element cannot be hovered, which means it li:hover
will never match an element. In addition, the generalizing combinator tries to find (subsequent) siblings that are <li>
elements converging from sibling elements .menu
. Which does not match the elements on the page.
Converting this to the following selector:
.menu:hover li ~ li
.menu {
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
;
background-color: #777;
}
.menu li {
float: none;
display: none;
}
.menu li a {
display: block;
padding: 10px 20px 10px 20px;
text-decoration: none;
color: #bbb;
}
.menu li a:hover {
color: #fff;
}
.menu .btn {
display: block;
cursor: pointer;
}
.menu:hover li ~ li {
display: block;
}
<!--NEED SOLUTION WITHOUT ALTERING HTML -->
<ul class="menu">
<li class="btn"><a>☰</a>
</li>
<li><a href="/">Home</a>
</li>
<li><a href="/portfolio">Portfolio</a>
</li>
<li><a href="/contact">Contact</a>
<ul class="sub-menu">
<li><a href="/">Sub Menu</a>
</li>
<li><a href="/portfolio">Sub Menu</a>
</li>
</ul>
</li>
</ul>
<!--NEED SOLUTION WITHOUT ALTERING HTML -->
works; that he will - because of the general mix of siblings - match only those elements <li>
with the previous brother <li>
, which means that he will and never be able to show the first one <li>
.
So, instead, I would suggest using:
.menu:hover li
.menu {
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
;
background-color: #777;
}
.menu li {
float: none;
display: none;
}
.menu li a {
display: block;
padding: 10px 20px 10px 20px;
text-decoration: none;
color: #bbb;
}
.menu li a:hover {
color: #fff;
}
.menu .btn {
display: block;
cursor: pointer;
}
.menu:hover li {
display: block;
}
<!--NEED SOLUTION WITHOUT ALTERING HTML -->
<ul class="menu">
<li class="btn"><a>☰</a>
</li>
<li><a href="/">Home</a>
</li>
<li><a href="/portfolio">Portfolio</a>
</li>
<li><a href="/contact">Contact</a>
<ul class="sub-menu">
<li><a href="/">Sub Menu</a>
</li>
<li><a href="/portfolio">Sub Menu</a>
</li>
</ul>
</li>
</ul>
<!--NEED SOLUTION WITHOUT ALTERING HTML -->
source to share