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

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

my CSS as below :

nav:hover .forAnimate{
  opacity: 1;
  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 .

New design desired change html and css


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.

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.