How to modify left side menu hover on design html and CSS?

[ahmedsaazizba]

I work on angular 7 I need to modify design for menu on stackbliz as below ;

https://stackblitz.com/edit/create-1arrvm?file=app%2Fapp.component.html

my CSS as below :

nav:hover .forAnimate{
  opacity: 1;
}
.wrapper{
  background:#f1f1f1;
  width: 100%;
  border-top: 1px solid #d1b792;
  border-bottom: 1px solid #d1b792;

}

.accordion {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
}

.active, .accordion:hover {
    background-color: #ccc;
}

.accordion:after {
    content: '\002B';
    color: #777;
    font-weight: bold;
    float: right;
    margin-left: 5px;
}

.active:after {
    content: "\2212";
}

my picture below show me desired modification :

1- change hover to be suitable to selected cell .

2-make border between each category small border thin .

3- remove small space - between each selected cell menu .

[PaulOB]

Hi,

I know nothing about angular so you will have to work these styles into your system. I have used !important because your system seems to add angular attributes to all styles so I can’t over-ride them with specificity. You should be able to do this though and remove the !important declarations.

.page-sidebar .active:after {
  content: "" !important;
}
.page-sidebar .page-sidebar-menu > li > a {
  margin-top: -2px !important;
  border-bottom: 1px solid #ccc !important;
  transition: 0.5s ease;
}
.page-sidebar .page-sidebar-menu > li > a:hover,
.page-sidebar .page-sidebar-menu > li > a:hover button {
  background: #ccc !important;
}

As proof of concept here’s a screenshot with those rules added.