CSS Multi-Level Accordion Menu - css

Question

I have written some codes in HTML and CSS. The output is shown in the screenshot.
When a menu item is selected ( is expanded), the color section at the right side of the menu disapears while aforementioned menu is selected (after mouse is not hovering the item).
How to make the color stay even after the mouse is not over the menu?
(Please do not suggest any Java Script code.)
CSS Multi-Level Accordion Menu
* {
margin: 0;
padding: 0;
font-family: Arial;
font-size: 14px;
}
.block {
float: right;
max-width: 360px;
width: 100%;
height: 100%;
background-color: white;
overflow: hidden;
margin: 0;
}
.block > div {
display: block;
position: relative;
background-color: #fff;
color: #767676;
border-bottom: 1px solid #e5e5e5;
border-left: 1px solid #e5e5e5;
}
.block > div:nth-child(1):before {
font-family: 'FontAwesome';
content: "\F0CA";
font-size: 16px;
width: 50px;
font-weight: bold;
text-align: center;
position: absolute;
right: 0;
top: 0;
line-height: 50px;
margin: 0;
color: #767676;
border-right: 4px solid #E94B3B;
background: none; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(to right, rgba(0,0,0,0) 50%, #E94B3B 50%); /* Safari 5.1-6.0 */
background: -o-linear-gradient(to right, rgba(0,0,0,0) 50%, #E94B3B 50%); /* For Opera 11.6-12.0 */
background: -moz-linear-gradient(to right, rgba(0,0,0,0) 50%, #E94B3B 50%); /* For Firefox 3.6-15 */
background: linear-gradient(to right, rgba(0,0,0,0) 50%, #E94B3B 50%); /* Standard syntax */
background-size: 200% 100%;
transition: all 0.25s ease-in-out;
}
.block > div:nth-child(1):hover:before {
background-position: 100% 0;
color: white;
}
.block > div:nth-child(2):before {
font-family: 'FontAwesome';
content: "\F0F6";
font-size: 16px;
width: 50px;
font-weight: bold;
text-align: center;
position: absolute;
right: 0;
top: 0;
line-height: 50px;
margin: 0;
color: #767676;
border-right: 4px solid #ffb61c;
background: none; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(to right, rgba(0,0,0,0) 50%, #ffb61c 50%); /* Safari 5.1-6.0 */
background: -o-linear-gradient(to right, rgba(0,0,0,0) 50%, #ffb61c 50%); /* For Opera 11.6-12.0 */
background: -moz-linear-gradient(to right, rgba(0,0,0,0) 50%, #ffb61c 50%); /* For Firefox 3.6-15 */
background: linear-gradient(to right, rgba(0,0,0,0) 50%, #ffb61c 50%); /* Standard syntax */
background-size: 200% 100%;
transition: all 0.25s ease-in-out;
}
.block > div:nth-child(2):hover:before {
background-position: 100% 0;
color: white;
}
.block > div > input + label {
cursor: pointer;
display: block;
line-height: 50px;
background-color: white;
transition: background-color 0.5s;
color: #767676;
padding-right: 60px;
text-align: right;
}
.block > div > input ~ div {
visibility: hidden;
max-height: 0;
padding: 0;
opacity: 0;
transition: all 0.5s;
}
.block > div > input:checked + label {
background-color: #f3f3f3;
transition: background-color 0.5s;
color: black;
}
.block > div > input:checked ~ div {
display: block;
opacity: 1;
visibility: visible;
height: auto;
max-height: 10000px;
padding: 0;
transition: all 0.5s;
}
.block a {
display: block;
line-height: 50px;
text-decoration: none;
color: black;
border-top: solid 1px #e5e5e5;
padding-right: 50px;
text-align: right;
}
.block a:hover {
background: #eeeeee;
}
#font-face {
font-family: 'FontAwesome';
src: url('../fonts/FontAwesome.otf') format('opentype');
}
<div class="block">
<div>
<input type="radio" name="item" id="item-one" hidden />
<label for="item-one">First</label>
<div>
<p>Menu 1.1</p>
<p>Menu 1.2</p>
<p>Menu 1.3</p>
</div>
</div>
<div>
<input type="radio" name="item" id="item-two" hidden />
<label for="item-two">second</label>
<div>
<p>Menu 2.1</p>
<p>Menu 2.2</p>
<p>Menu 2.3</p>
</div>
</div>
</div>

Answer 1

You can refactor your HTML a bit so that the hover state is possible to achieve with :checked on your inputs instead.
First, replace the pseudo element on .block>div with a span element that goes after the label. We need something that's after the input so we can select it with CSS, since there is no CSS parent selector. And we can't use pseudo elements on inputs, so we'll just add a span instead.
<div class="block">
<div>
<input type="checkbox" name="item" id="item-one" hidden />
<label for="item-one">First</label>
<span></span>
<div>
<p>Menu 1.1</p>
<p>Menu 1.2</p>
<p>Menu 1.3</p>
</div>
</div>
</div>
Note that I took the little box symbol out of your content property from the pseudo element and jut put it in the span.
After that, it's just a matter of changing your selectors. So this...
.block > div:nth-child(1):before { ... }
.block > div:nth-child(1):hover:before { ... }
Becomes this...
#item-one + label + span { ... }
.block>div:nth-child(1):hover #item-one + label + span,
#item-one:checked + label + span { ... }
That's it!
You do need to add an explicit height on the span that was not there for the pseudo element, as well as set the span to display: block. The rest of the styles are exactly the same.
Final note is that I changed your inputs from type="radio" to type="checkbox". That way, you can collapse them instead of one being forced to be open all the time once you click one.
Here's a snippet where the first input uses the new style and the second one is the same as your original:
* {
margin: 0;
padding: 0;
font-family: Arial;
font-size: 14px;
}
.block {
float: right;
max-width: 360px;
width: 100%;
height: 100%;
background-color: white;
overflow: hidden;
margin: 0;
}
.block>div {
display: block;
position: relative;
background-color: #fff;
color: #767676;
border-bottom: 1px solid #e5e5e5;
border-left: 1px solid #e5e5e5;
}
#item-one + label + span {
display: block;
font-family: 'FontAwesome';
content: "\F0CA";
font-size: 16px;
width: 50px;
height: 50px;
font-weight: bold;
text-align: center;
position: absolute;
right: 0;
top: 0;
line-height: 50px;
margin: 0;
color: #767676;
border-right: 4px solid #E94B3B;
background: none;
/* For browsers that do not support gradients */
background: -webkit-linear-gradient(to right, rgba(0, 0, 0, 0) 50%, #E94B3B 50%);
/* Safari 5.1-6.0 */
background: -o-linear-gradient(to right, rgba(0, 0, 0, 0) 50%, #E94B3B 50%);
/* For Opera 11.6-12.0 */
background: -moz-linear-gradient(to right, rgba(0, 0, 0, 0) 50%, #E94B3B 50%);
/* For Firefox 3.6-15 */
background: linear-gradient(to right, rgba(0, 0, 0, 0) 50%, #E94B3B 50%);
/* Standard syntax */
background-size: 200% 100%;
transition: all 0.25s ease-in-out;
}
.block>div:nth-child(1):hover #item-one + label + span,
#item-one:checked + label + span {
background-position: 100% 0;
color: white;
}
.block>div:nth-child(2):before {
font-family: 'FontAwesome';
content: "\F0F6";
font-size: 16px;
width: 50px;
font-weight: bold;
text-align: center;
position: absolute;
right: 0;
top: 0;
line-height: 50px;
margin: 0;
color: #767676;
border-right: 4px solid #ffb61c;
background: none;
/* For browsers that do not support gradients */
background: -webkit-linear-gradient(to right, rgba(0, 0, 0, 0) 50%, #ffb61c 50%);
/* Safari 5.1-6.0 */
background: -o-linear-gradient(to right, rgba(0, 0, 0, 0) 50%, #ffb61c 50%);
/* For Opera 11.6-12.0 */
background: -moz-linear-gradient(to right, rgba(0, 0, 0, 0) 50%, #ffb61c 50%);
/* For Firefox 3.6-15 */
background: linear-gradient(to right, rgba(0, 0, 0, 0) 50%, #ffb61c 50%);
/* Standard syntax */
background-size: 200% 100%;
transition: all 0.25s ease-in-out;
}
.block>div:nth-child(2):hover:before {
background-position: 100% 0;
color: white;
}
.block>div>input+label {
cursor: pointer;
display: block;
line-height: 50px;
background-color: white;
transition: background-color 0.5s;
color: #767676;
padding-right: 60px;
text-align: right;
}
.block>div>input~div {
visibility: hidden;
max-height: 0;
padding: 0;
opacity: 0;
transition: all 0.5s;
}
.block>div>input:checked+label {
background-color: #f3f3f3;
transition: background-color 0.5s;
color: black;
}
.block>div>input:checked~div {
display: block;
opacity: 1;
visibility: visible;
height: auto;
max-height: 10000px;
padding: 0;
transition: all 0.5s;
}
.block a {
display: block;
line-height: 50px;
text-decoration: none;
color: black;
border-top: solid 1px #e5e5e5;
padding-right: 50px;
text-align: right;
}
.block a:hover {
background: #eeeeee;
}
#font-face {
font-family: 'FontAwesome';
src: url('../fonts/FontAwesome.otf') format('opentype');
}
<div class="block">
<div>
<input type="checkbox" name="item" id="item-one" hidden />
<label for="item-one">First</label>
<span></span>
<div>
<p>Menu 1.1</p>
<p>Menu 1.2</p>
<p>Menu 1.3</p>
</div>
</div>
<div>
<input type="checkbox" name="item" id="item-two" hidden />
<label for="item-two">second</label>
<div>
<p>Menu 2.1</p>
<p>Menu 2.2</p>
<p>Menu 2.3</p>
</div>
</div>
</div>

Answer 2

$('.t-blog-list-sidebar').find('li').click(function(e){
$('.t-blog-list-sidebar').find('li').removeClass('active');
// console.log(this, e);
$(this).addClass('active');
e.stopPropagation();
})
$("li.no-a").click(function(e){
$(this).toggleClass('rev');
$(this).children("ul").collapse('toggle');
e.stopPropagation();
} );
#import "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css";
#import "https://use.fontawesome.com/releases/v5.2.0/css/all.css";
.bg-grey{
background:#f5f5f5;
}.t-blog-list-sidebar ul:nth-child(2) li.no-a {
border: 1px solid #333;
}
section#t-page-title .t-sub-header {
margin-bottom: 30px;
}
#t-page-title .t-sub-header h2 {
font-weight: 400;
text-transform: uppercase;
}
.h-tab{
margin-top: 130px;
}
.h-tab .container span {
display: inline-block;
cursor: pointer;
padding: 28px 40px;
}
.h-tab .container a span h3 {
font-size: 27px;
text-transform: uppercase;
color: #fff;
}
.h-tab .container a span.active h3 {
font-weight: 500;
}
#t-page-title {
position: relative;
padding: 15px 0;
background-color: #F5F5F5;
border-bottom: 1px solid #EEE;
}
#t-page-title .breadcrumb {
position: absolute !important;
width: auto !important;
left: 15px !important;
margin: -5px 0 0 0 !important;
background-color: transparent !important;
padding: 0 !important;
font-size: 12px;
}
.h-tab .container span.active {
border-bottom: 7px solid #e87327;
box-shadow: 0px 0px 20px -2px #ffffff;
}
ul.t-ul-r {
float: right;
}
.t-recent-post {
width: 100%;
list-style-type: none;
}
.widget-sidebar li.t-recent-post .t-sub-header h3 i {
font-size: 32px;
padding-right: 5px;
}
.widget-sidebar li.t-recent-post .t-sub-header h3{
text-transform: uppercase;
}
.t-subbody ul.t-ul li:not(.no-a):hover {
cursor: pointer;
background: #e0e0e0;
}
.t-subbody ul.t-ul li {
line-height: 11px;
float: none;
padding-left: 21px;
padding: 4px;
color: #676666;
position: relative;
cursor: pointer;
}
.t-subbody .t-ul li:before {
content: "\f061";
font-family: 'Font Awesome 5 Free';
font-weight: 900;
font-style: normal;
padding-right: 2px;
font-size: 10px;
}
li> ul.t-ul {
padding-top: 13px;
transition: .5s;
}
#t-page-title {
margin-bottom: 16px;
}
.t-subbody .t-ul li.active:not(.no-a):after {
content: "\00a0";
width: 35px;
height: 35px;
background: #f5f5f5;
position: absolute;
transform: rotate(46deg);
right: -33px;
margin-top: -10px;
}
.t-subbody .t-ul li> ul li.active:not(.no-a):after {
right: -45px;
}
.t-subbody .t-ul li> ul li ul > li.active:not(.no-a):after {
right: -50px;
}
.t-subbody .t-ul li> ul li ul > li.active:not(.no-a):after {
right: -55px;
}
.t-subbody .t-ul li> ul li > ul li > ul li.active:not(.no-a):after {
right: -65px;
}
.t-subbody ul.t-ul li.no-a:after {
content: "\f107";
font-family: 'Font Awesome 5 Free';
font-weight: 900;
padding-right: 2px;
font-size: 18px;
position: absolute;
top:0;
font-style: normal;
right: 17px;
transition: .2s;
}
.t-subbody ul.t-ul li.no-a.rev:after {
transition: .2s;
transform: rotate(180deg);
}
.t-entry .entry-c {
background: #fff;
box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12);
position: relative;
padding: 24px;
border-radius: 2px;
margin: 20px 0;
}
li.t-recent-post p small {
display: block;
margin-top: 10px;
padding-bottom: 11px;
border-bottom: 1px solid #b9b9b9;
}
.t-blog-list-sidebar ul{
list-style:none;
padding-left:0px;
}
/* blog css end */
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<section class="section">
<div class="container ">
<div class="col-md-3 col-sm-3">
<div class="widget-sidebar">
<h2 class="title-widget-sidebar">TUTORIAL</h2>
<div class="t-blog-list-sidebar">
<ul>
<li class="t-recent-post">
<div class="t-sub-header">
<h3><i class="fab fa-java"></i> java</h3>
</div>
<div class="t-subbody">
<ul class="entry-meta clearfix t-ul">
<li class='active'> menu-1 </li>
<li> menu-2 </li>
<li class="no-a"> menu-3 start
<ul class="t-ul collapse">
<li>menu-3.1 </li>
<li class="no-a"> menu-3.2
<ul class="t-ul collapse">
<li class="no-a"> menu-3.2.1
<ul class="t-ul collapse">
<li> menu-3.2.1.1 </li>
<li> menu-3.2.1.2 </li>
</ul>
</li>
<li> menu-3.2.2 </li>
</ul>
</li>
<li> menu-3.3 </li>
</ul>
</li>
</ul>
</div>
<p><small><i class="fa fa-calendar" data-original-title="" title=""></i>15 November 2014</small> </p>
</li>
</ul>
<ul>
<li class="t-recent-post">
<div class="t-sub-header">
<h3><i class="fab fa-java"></i> java</h3>
</div>
<div class="t-subbody">
<ul class="entry-meta clearfix t-ul">
<li class='active'> menu-1 </li>
<li> menu-2 </li>
<li class="no-a"> menu-3 start
<ul class="t-ul collapse">
<li>menu-3.1 </li>
<li class="no-a"> menu-3.2
<ul class="t-ul collapse">
<li class="no-a"> menu-3.2.1
<ul class="t-ul collapse">
<li> menu-3.2.1.1 </li>
<li> menu-3.2.1.2 </li>
</ul>
</li>
<li> menu-3.2.2 </li>
</ul>
</li>
<li> menu-3.3 </li>
</ul>
</li>
</ul>
</div>
<p><small><i class="fa fa-calendar" data-original-title="" title=""></i>15 November 2014</small> </p>
</li>
</ul>
</div>
</div>
</div>
<div class="col-md-9 col-sm-9 small-thumbs bg-grey">
<section id="t-page-title">
<div class="t-sub-header">
<h2><i class="fab fa-java"></i> java</h2>
</div>
<div class="container clearfix">
<div class="row">
<div class="col-md-12 col-xs-12 col-sm-12">
<ol class="breadcrumb">
<li>Tutorial </li>
<li class="active">java</li>
</ol>
</div>
</div>
</div>
</section>
<div class="clearfix t-entry">
<!-- card start -->
<div class="entry-c">
<div class="entry-title">
<h2>Android market in India</h2>
</div>
<div class="entry-content">
<p> </p>
<p class="MsoNormal"><span lang="EN-IN">India, as all know, is a land of diversity. A home to myriad cultures, this land has been binding them together,since decades. Year by year, time to time, as the country lurked somewhere on the map on technological growth, now is the time when it has emerged from hibernation. India today is a ripe market for all technological predators. From television to mobile phone; from laptops to phablets; Indians now have climbed the technological ladder, each time a rung higher.</span> </p>
<p></p>
</div>
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-12">
<ul class="entry-meta clearfix t-ul">
<li><i class="icon-thumbs-up"></i> 12 </li>
<li><i class="icon-comments"></i> 24 </li>
</ul>
</div>
<div class="col-md-6 col-sm-6 col-xs-12">
<ul class="entry-meta clearfix t-ul-r">
<li><i class="icon-calendar3"></i> 3:05 pm on Saturday 15 November 2014 </li>
</ul>
</div>
</div>
</div>
<div class="entry-c">
<div class="entry-title">
<h2>Android market in India</h2>
</div>
<div class="entry-content">
<p> </p>
<p class="MsoNormal"><span lang="EN-IN">India, as all know, is a land of diversity. A home to myriad cultures, this land has been binding them together,since decades. Year by year, time to time, as the country lurked somewhere on the map on technological growth, now is the time when it has emerged from hibernation. India today is a ripe market for all technological predators. From television to mobile phone; from laptops to phablets; Indians now have climbed the technological ladder, each time a rung higher.</span> </p>
<p></p>
</div>
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-12">
<ul class="entry-meta clearfix t-ul">
<li><i class="icon-thumbs-up"></i> 12 </li>
<li><i class="icon-comments"></i> 24 </li>
</ul>
</div>
<div class="col-md-6 col-sm-6 col-xs-12">
<ul class="entry-meta clearfix t-ul-r">
<li><i class="icon-calendar3"></i> 3:05 pm on Saturday 15 November 2014 </li>
</ul>
</div>
</div>
</div>
<div class="entry-c">
<div class="entry-title">
<h2>Android market in India</h2>
</div>
<div class="entry-content">
<p> </p>
<p class="MsoNormal"><span lang="EN-IN">India, as all know, is a land of diversity. A home to myriad cultures, this land has been binding them together,since decades. Year by year, time to time, as the country lurked somewhere on the map on technological growth, now is the time when it has emerged from hibernation. India today is a ripe market for all technological predators. From television to mobile phone; from laptops to phablets; Indians now have climbed the technological ladder, each time a rung higher.</span> </p>
<p></p>
</div>
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-12">
<ul class="entry-meta clearfix t-ul">
<li><i class="icon-thumbs-up"></i> 12 </li>
<li><i class="icon-comments"></i> 24 </li>
</ul>
</div>
<div class="col-md-6 col-sm-6 col-xs-12">
<ul class="entry-meta clearfix t-ul-r">
<li><i class="icon-calendar3"></i> 3:05 pm on Saturday 15 November 2014 </li>
</ul>
</div>
</div>
</div>
<div class="entry-c">
<div class="entry-title">
<h2>Android market in India</h2>
</div>
<div class="entry-content">
<p> </p>
<p class="MsoNormal"><span lang="EN-IN">India, as all know, is a land of diversity. A home to myriad cultures, this land has been binding them together,since decades. Year by year, time to time, as the country lurked somewhere on the map on technological growth, now is the time when it has emerged from hibernation. India today is a ripe market for all technological predators. From television to mobile phone; from laptops to phablets; Indians now have climbed the technological ladder, each time a rung higher.</span> </p>
<p></p>
</div>
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-12">
<ul class="entry-meta clearfix t-ul">
<li><i class="icon-thumbs-up"></i> 12 </li>
<li><i class="icon-comments"></i> 24 </li>
</ul>
</div>
<div class="col-md-6 col-sm-6 col-xs-12">
<ul class="entry-meta clearfix t-ul-r">
<li><i class="icon-calendar3"></i> 3:05 pm on Saturday 15 November 2014 </li>
</ul>
</div>
</div>
</div>
<!-- card start end-->
</div>
</div>
</div>
</section>