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

  • Question

  • User696604810 posted

    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 .

    New design desired change html and css

    Thursday, June 11, 2020 12:48 AM

All replies

  • User-1151440187 posted

    Try border-style: groove; or border-bottom : 0.5px solid #d1b792;

    I hope this will help you.

    Thanks!

    Tuesday, June 16, 2020 5:02 AM