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

• • Reply
  ahmedbarbary

  Member

  32 Points

  303 Posts

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

  Jun 11, 2020 12:48 AM|ahmedbarbary|LINK

  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 .

  

• • Reply
  shaili shah

  Member

  13 Points

  56 Posts

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

  Jun 16, 2020 05:02 AM|shaili shah|LINK

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

  I hope this will help you.

  Thanks!

  ASP.NET consulting companies india
  https://www.ifourtechnolab.com/asp-dot-net-enterprise-content-management