I am a web designer and am facing an issue with left menu. I want left menu to appear in topbar with the horizontal menu and when scroll down the web, the menu’ heading “categories” appear and show all the menus when hover but here it’s not collapsing when scroll down and has occupied all the horizontal space vertically and web view is gone far down.

Can someone help me with its CSS?

I want them to appear only when someone hovers over them this is the css code given below:

    ` .menu-wrapper {                       position: relative;                     }  .all_categories {           margin-bottom: 0;          /*margin-top:-40px;|*/          /*&.hidden-arrow{ .menuleftText{     &:after{         @include font-awesome(\f106,18px); } } }*/ } .all_categories .menuleftTitle a {               border: 1px solid;               padding: 9px 15px;               min-height: 40px;               position: relative;               cursor: pointer;              text-transform: uppercase;              text-align: right;              display: block;       }       .all_categories .menuleftTitle a:after {             display: inline-block;            font-family: FontAwesome;            font-style: normal;             font-weight: normal;            line-height: 1;            -webkit-font-smoothing: antialiased;            -moz-osx-font-smoothing: grayscale;            content: "\f0c9";           font-size: 14px;    }      .all_categories .menuleftTitle a span {                float: left;     }     .menuleft {           position: absolute;            top: 39px;            left: 0;            width: 100%;            z-index: 99;     }    .menuleft .mega-menu {         border: 1px solid #cdcdcd;    }    .menuleft .vnav {          border: none;     }      .cms-index-index .all_categories {          margin-bottom: 0;          /*margin-top:-40px;*/        }         .cms-index-index .menuleft {               position: static;        }         .cms-index-index .menu-custom-left .menuleft {                 position: absolute;          }         .cms-index-index .em-area-18 .vertical-menu-wrapper,        .cms-index-index .em-area-02 .vertical-menu-wrapper {             display: none;       }      /*.em-area-02 #vertical-menu{ display:none}*/     .em-col-left .vertical-menu-wrapper {            margin-top: -60px;            margin-bottom: 20px;      }         .em-col-left .menuleft {           position: static;   } 

` and this is the html code in block:

<div class="vertical-menu-wrapper menu-wrapper hidden-xs"> <div class="all_categories"> <div class="menuleftText-title"> <div class="menuleftTitle"><span><a href="#">Categories</a></span></div> </div> </div> {{widget type="megamenupro/megamenupro" menu="3"}}</div> 

this coding gives a display like the following picture:

any help is appreciated.