how to add hovering sub menu in this sidebar css?

[PoetTiger]

sidebar1 {

height: 100%;
overflow: hidden;
z-index: 3;

}

sidebar1 .list-group {

position: relative;
min-height: 100%;

}

sidebar1 i {

margin-right: 6px;

}

sidebar1 .list-group-item {

position: absolute;
border-radius: 0;
background-color: #333;
color: #ccc;
border-left: 0;
border-right: 0;
border-color: #2c2c2c;
white-space: nowrap;

}

sidebar1 .list-group {

display: block;

}

sidebar1 .list-group-item:not(.collapsed) {

background-color: #222;

}

sidebar1 .list-group .list-group-item[aria-expanded="true"]::after {

content: " \f0d7";
font-family: FontAwesome;
display: inline;
text-align: right;

}

sidebar1 .list-group .list-group-item[aria-expanded="true"] {

background-color: #222;

}

sidebar1 .list-group .list-group-item[aria-expanded="true"]::after {

content: " \f0da";
font-family: FontAwesome;
display: inline;
text-align: right;

}

sidebar1 .list-group .collapse .list-group-item,

sidebar1 .list-group .collapsing .list-group-item {

padding-left: 20px;

}

sidebar1 .list-group .collapse>.collapse .list-group-item,

sidebar1 .list-group .collapse>.collapsing .list-group-item {

padding-left: 30px;

}

sidebar1 .list-group .collapse>.collapse>.collapse .list-group-item {

padding-left: 40px;

}

@media (max-width:0px) {

sidebar1 {

    min-width: 35px;
    max-width: 40px;
    overflow-y: auto;
    overflow-x: visible;
    transition: all 0.5s ease;
    transform: translateX(-45px);
    position: fixed;
}
#sidebar1.show {
    transform: translateX(0);
}
#sidebar1::-webkit-scrollbar {
    width: 0px;
}
#sidebar1,
#sidebar1 .list-group {
    min-width: 35px;
    overflow: visible;
}
#sidebar1 .list-group .collapse.show,
#sidebar1 .list-group .collapsing {
    position: relative;
    z-index: 1;
    width: 190px;
    top: 0;
}
#sidebar1 .list-group>.list-group-item {
    text-align: center;
    padding: .75rem .5rem;
    display: none;
}
#sidebar1 .list-group>.list-group-item {
    display: block
}
#sidebar1 .list-group>.list-group-item[aria-expanded="true"]::after,
#sidebar1 .list-group>.list-group-item[aria-expanded="false"]::after {
    display: none;
}

}

.collapse.show { visibility: visible; }

.collapsing { visibility: visible; height: 0; -webkit-transition-property: height, visibility; transition-property: height, visibility; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; }

.collapsing.width { -webkit-transition-property: width, visibility; transition-property: width, visibility; width: 0; height: 100%; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; }

[csswizardry]

https://stackoverflow.com/questions/ask