title: Responsive horizontal scroll menu with css and jquery
body: <p>I am having a problem with scrollable navigation menubar. I did some work on it and figured out some, but the main part i am unable to do. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var hidWidth;
  var scrollBarWidths = 40;
  
  var widthOfList = function() {
    var itemsWidth = 0;
    $('.item').each(function() {
      var itemWidth = $(this).outerWidth();
      itemsWidth += itemWidth;
    });
    //alert(itemsWidth);
    return itemsWidth;
  };
  
  var widthOfHidden = function() {
    return (($('.cssmenu').outerWidth()) - widthOfList() - getLeftPosi()) - scrollBarWidths;
  };
  
  var getLeftPosi = function() {
    //return $('.item:first-child').position().left;
    return $('.list').position().left;
  };
  
  var reAdjust = function() {
    if (($('.cssmenu').outerWidth()) &lt; widthOfList()) {
      $('.scroller-right').show();
    } else {
      $('.scroller-right').hide();
      /*
              var leftPos = $('.item:first-child').position().left;
           $('.item').animate({left:"-="+leftPos+"px"},'slow');
              */
    }
  
    if (getLeftPosi() &lt; 0) {
      $('.scroller-left').show();
    } else {
      $('.item').animate({
        left: "-=" + getLeftPosi() + "px"
      }, 'slow');
      $('.scroller-left').hide();
    }
  }
  
  reAdjust();
  
  $(window).on('resize', function(e) {
    reAdjust();
  });
  
  $('.scroller-right').click(function() {
  
    $('.scroller-left').fadeIn('slow');
    $('.scroller-right').fadeOut('slow');
  
    $('.list').animate({
      left: "+=" + widthOfHidden() + "px"
    }, 'slow', function() {
      //reAdjust();
    });
  });
  
  $('.scroller-left').click(function() {
    //var leftPos = $('.item:first-child').position().left;
    //$('.item').animate({left:"-="+getLeftPosi()+"px"},'slow');
    //$('.scroller-left').hide();
  
    $('.scroller-right').fadeIn('slow');
    $('.scroller-left').fadeOut('slow');
  
    $('.list').animate({
      left: "-=" + getLeftPosi() + "px"
    }, 'slow', function() {
  
    });
  
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@import url(http://fonts.googleapis.com/css?family=Open+Sans:700);
  #cssmenu,
  #cssmenu ul,
  #cssmenu ul li,
  #cssmenu ul li a,
  #cssmenu #menu-button {
    margin: 0;
    padding: 0;
    border: 0;
    list-style: none;
    line-height: 1;
    display: block;
    position: relative;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
  
  #cssmenu:after,
  #cssmenu&gt;ul:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
  }
  
  #cssmenu #menu-button {
    display: none;
  }
  
  #cssmenu {
    font-family: Montserrat, sans-serif;
    background: #0090c0;
  }
  
  #cssmenu&gt;ul&gt;li {
    float: left;
  }
  
  #cssmenu.align-center&gt;ul {
    font-size: 0;
    text-align: center;
  }
  
  #cssmenu.align-center&gt;ul&gt;li {
    display: inline-block;
    float: none;
  }
  
  #cssmenu.align-center ul ul {
    text-align: left;
  }
  
  #cssmenu.align-right&gt;ul&gt;li {
    float: right;
  }
  
  #cssmenu&gt;ul&gt;li&gt;a {
    padding: 17px;
    font-size: 12px;
    letter-spacing: 1px;
    text-decoration: none;
    color: #dddddd;
    font-weight: 700;
    text-transform: uppercase;
  }
  
  #cssmenu&gt;ul&gt;li:hover&gt;a {
    color: #ffffff;
    /* Main menu border- */
  }
  
  #cssmenu&gt;ul&gt;li.has-sub&gt;a {
    padding-right: 30px;
  }
  
  #cssmenu&gt;ul&gt;li.has-sub&gt;a:after {
    position: absolute;
    top: 22px;
    right: 11px;
    width: 8px;
    height: 2px;
    display: block;
    background: #dddddd;
    content: '';
    /* Main menu plus sign */
  }
  
  #cssmenu&gt;ul&gt;li.has-sub&gt;a:before {
    position: absolute;
    top: 19px;
    right: 14px;
    display: block;
    width: 2px;
    height: 8px;
    background: #dddddd;
    content: '';
    /* Main menu plus sign */
    -webkit-transition: all .25s ease;
    -moz-transition: all .25s ease;
    -ms-transition: all .25s ease;
    -o-transition: all .25s ease;
    transition: all .25s ease;
  }
  
  #cssmenu&gt;ul&gt;li.has-sub:hover&gt;a:before {
    top: 23px;
    height: 0;
  }
  
  #cssmenu ul ul {
    position: absolute;
    left: -9999px;
  }
  
  #cssmenu.align-right ul ul {
    text-align: right;
  }
  
  #cssmenu ul ul li {
    height: 0;
    -webkit-transition: all .25s ease;
    -moz-transition: all .25s ease;
    -ms-transition: all .25s ease;
    -o-transition: all .25s ease;
    transition: all .25s ease;
  }
  
  #cssmenu li:hover&gt;ul {
    left: auto;
  }
  
  #cssmenu.align-right li:hover&gt;ul {
    left: auto;
    right: 0;
  }
  
  #cssmenu li:hover&gt;ul&gt;li {
    height: 35px;
  }
  
  #cssmenu ul ul ul {
    margin-left: 100%;
    top: 0;
  }
  
  #cssmenu.align-right ul ul ul {
    margin-left: 0;
    margin-right: 100%;
  }
  
  #cssmenu ul ul li a {
    border-bottom: 1px solid rgba(150, 150, 150, 0.15);
    padding: 11px 15px;
    width: 170px;
    font-size: 12px;
    text-decoration: none;
    color: #dddddd;
    font-weight: 400;
    background: #ff6030;
  }
  
  #cssmenu ul ul li:last-child&gt;a,
  #cssmenu ul ul li.last-item&gt;a {
    border-bottom: 0;
  }
  
  #cssmenu ul ul li:hover&gt;a,
  #cssmenu ul ul li a:hover {
    color: #ffffff;
    background-color: #c04830;
  }
  
  #cssmenu ul ul li.has-sub&gt;a:after {
    position: absolute;
    top: 16px;
    right: 11px;
    width: 8px;
    height: 2px;
    display: block;
    background: #dddddd;
    content: '';
  }
  
  #cssmenu.align-right ul ul li.has-sub&gt;a:after {
    right: auto;
    left: 11px;
  }
  
  #cssmenu ul ul li.has-sub&gt;a:before {
    position: absolute;
    top: 13px;
    right: 14px;
    display: block;
    width: 2px;
    height: 8px;
    background: #dddddd;
    content: '';
    -webkit-transition: all .25s ease;
    -moz-transition: all .25s ease;
    -ms-transition: all .25s ease;
    -o-transition: all .25s ease;
    transition: all .25s ease;
  }
  
  #cssmenu.align-right ul ul li.has-sub&gt;a:before {
    right: auto;
    left: 14px;
  }
  
  #cssmenu ul ul&gt;li.has-sub:hover&gt;a:before {
    top: 17px;
    height: 0;
  }
  
  .scroller {
    color: #333333;
    width: 40px;
    text-align: center;
    cursor: pointer;
    display: none;
    padding: 5px;
    margin-top: 20px;
  }
  
  .scroller-right {
    float: right;
  }
  
  .scroller-left {
    float: left;
  }
  
  .list {
    position: absolute;
    left: 0px;
    top: 0px;
    min-width: 3000px;
    margin-left: 12px;
    margin-top: 0px;
  }
  
  .item {
    padding: 10px;
    /*float:left;*/
    display: table-cell;
    margin: 1px;
    position: relative;
    text-align: center;
    cursor: grab;
    cursor: -webkit-grab;
    color: #efefef;
    border: 1px dotted #111;
    vertical-align: middle;
  }
  
  @media all and (max-width: 768px),
  only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px),
  only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px),
  only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px),
  only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px),
  only screen and (min-resolution: 192dpi) and (max-width: 1024px),
  only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
    #cssmenu {
      width: 100%;
    }
    #cssmenu ul {
      width: 100%;
      display: none;
    }
    #cssmenu.align-center&gt;ul {
      text-align: left;
    }
    #cssmenu ul li {
      width: 100%;
      border-top: 1px solid rgba(120, 120, 120, 0.2);
    }
    #cssmenu ul ul li,
    #cssmenu li:hover&gt;ul&gt;li {
      height: auto;
    }
    #cssmenu ul li a,
    #cssmenu ul ul li a {
      width: 100%;
      border-bottom: 0;
    }
    #cssmenu&gt;ul&gt;li {
      float: none;
    }
    #cssmenu ul ul li a {
      padding-left: 25px;
    }
    #cssmenu ul ul ul li a {
      padding-left: 35px;
    }
    #cssmenu ul ul li a {
      color: #dddddd;
      background: none;
    }
    #cssmenu ul ul li:hover&gt;a,
    #cssmenu ul ul li.active&gt;a {
      color: #ffffff;
    }
    #cssmenu ul ul,
    #cssmenu ul ul ul,
    #cssmenu.align-right ul ul {
      position: relative;
      left: 0;
      width: 100%;
      margin: 0;
      text-align: left;
    }
    #cssmenu&gt;ul&gt;li.has-sub&gt;a:after,
    #cssmenu&gt;ul&gt;li.has-sub&gt;a:before,
    #cssmenu ul ul&gt;li.has-sub&gt;a:after,
    #cssmenu ul ul&gt;li.has-sub&gt;a:before {
      display: none;
    }
    #cssmenu #menu-button {
      display: block;
      padding: 17px;
      color: #dddddd;
      cursor: pointer;
      font-size: 12px;
      text-transform: uppercase;
      font-weight: 700;
    }
    #cssmenu #menu-button:after {
      position: absolute;
      top: 22px;
      right: 17px;
      display: block;
      height: 4px;
      width: 20px;
      border-top: 2px solid #dddddd;
      border-bottom: 2px solid #dddddd;
      content: '';
    }
    #cssmenu #menu-button:before {
      position: absolute;
      top: 16px;
      right: 17px;
      display: block;
      height: 2px;
      width: 20px;
      background: #dddddd;
      content: '';
    }
    #cssmenu #menu-button.menu-opened:after {
      top: 23px;
      border: 0;
      height: 2px;
      width: 15px;
      background: #ffffff;
      -webkit-transform: rotate(45deg);
      -moz-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
      -o-transform: rotate(45deg);
      transform: rotate(45deg);
    }
    #cssmenu #menu-button.menu-opened:before {
      top: 23px;
      background: #ffffff;
      width: 15px;
      -webkit-transform: rotate(-45deg);
      -moz-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
      -o-transform: rotate(-45deg);
      transform: rotate(-45deg);
    }
    #cssmenu .submenu-button {
      position: absolute;
      z-index: 99;
      right: 0;
      top: 0;
      display: block;
      border-left: 1px solid rgba(120, 120, 120, 0.2);
      height: 46px;
      width: 46px;
      cursor: pointer;
    }
    #cssmenu .submenu-button.submenu-opened {
      background: #262626;
    }
    #cssmenu ul ul .submenu-button {
      height: 34px;
      width: 34px;
    }
    #cssmenu .submenu-button:after {
      position: absolute;
      top: 22px;
      right: 19px;
      width: 8px;
      height: 2px;
      display: block;
      background: #dddddd;
      content: '';
    }
    #cssmenu ul ul .submenu-button:after {
      top: 15px;
      right: 13px;
    }
    #cssmenu .submenu-button.submenu-opened:after {
      background: #ffffff;
    }
    #cssmenu .submenu-button:before {
      position: absolute;
      top: 19px;
      right: 22px;
      display: block;
      width: 2px;
      height: 8px;
      background: #dddddd;
      content: '';
    }
    #cssmenu ul ul .submenu-button:before {
      top: 12px;
      right: 16px;
    }
    #cssmenu .submenu-button.submenu-opened:before {
      display: none;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div id="cssmenu"&gt;
    &lt;div id="menu-button"&gt;Menu&lt;/div&gt;
    &lt;ul class="list"&gt;
      &lt;li name="item"&gt;&lt;a href="Blank.aspx" target="frmScr"&gt;&lt;i class="fa fa-fw fa-
            home"&gt;&lt;/i&gt;Home&lt;/a&gt;&lt;/li&gt;
      &lt;li name="item"&gt;
        &lt;a href="QuickOrderEntry.aspx" target="frmScr"&gt;Quick Order&lt;/a&gt;&lt;/li&gt;
      &lt;li name="item"&gt;
        &lt;a href="SpreadOrder.aspx" target="frmScr"&gt;Spread Order&lt;/a&gt;&lt;/li&gt;
      &lt;li name="item"&gt;
        &lt;a href="SwitchOpenMF.aspx" target="frmScr"&gt;Switch Order&lt;/a&gt;&lt;/li&gt;
      &lt;li name="item"&gt;
        &lt;a href="SpreadViewOrders.aspx" target="frmScr"&gt;View Spread Orders&lt;/a&gt;&lt;/li&gt;
      &lt;li name="item"&gt;
        &lt;a href="ViewOrder.aspx" target="frmScr"&gt;View Order&lt;/a&gt;&lt;/li&gt;
      &lt;li name="item" class="has-sub"&gt;&lt;span class="submenu-button"&gt;&lt;/span&gt;
        &lt;a href="Blank.aspx" rel="SSI0000001" target="frmScr"&gt;Systematic Investment&lt;/a&gt;
        &lt;ul id="SSI0000001"&gt;
          &lt;li class="has-sub"&gt;&lt;span class="submenu-button"&gt;&lt;/span&gt;&lt;a href="Blank.aspx" target="frmScr"&gt;SIP&lt;/a&gt;
            &lt;ul&gt;
              &lt;li&gt;&lt;a href="frmSIPRegistration.aspx" target="frmScr"&gt;SIP Registration&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="frmrptCancelSIP.aspx" target="frmScr"&gt;SIP Cancellation&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;
                &lt;a href="frmrptSIPRegistrationView.aspx" target="frmScr"&gt;SIP Registration 
           Report&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="frmrptBrokerSIPReport.aspx" target="frmScr"&gt;SIP 
           Installment due Report&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="frmSIPCancellationReport.aspx" target="frmScr"&gt;SIP Cancellation Report&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="BulkFileUpload.aspx?TransType=IMP_SIP&amp;amp;FileType=IMP_SIP_REG" target="frmScr"&gt;SIP Registration Upload&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="BulkFileUpload.aspx?TransType=IMP_SIP&amp;amp;FileType=IMP_SIP_CAN" target="frmScr"&gt;SIP Cancellation Upload&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="BulkFileUpload.aspx?TransType=IMP_SHIFT&amp;amp;FileType=IMP_SIP_TO_XSP" target="frmScr"&gt;Shift SIP To XSIP Upload&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="SIPExceptionsReport.aspx" target="frmScr"&gt;SIP Exception Report&lt;/a&gt;
              &lt;/li&gt;
            &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li class="has-sub"&gt;&lt;span class="submenu-button"&gt;&lt;/span&gt;&lt;a href="Blank.aspx" target="frmScr"&gt;Mandate&lt;/a&gt;
            &lt;ul&gt;
              &lt;li&gt;&lt;a href="frmMandateRegistrationForm.aspx" target="frmScr"&gt;Mandate 
          Registration&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="frmMandateUploadByMember.aspx" target="frmScr"&gt;Mandate Registration Upload&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="frmMandateSearchByMember.aspx" target="frmScr"&gt;Mandate Search&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="frmMandateDownloadForMember.aspx" target="frmScr"&gt;Mandate 
            Download&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li class="has-sub"&gt;&lt;span class="submenu-button"&gt;
             &lt;/span&gt;&lt;a href="Blank.aspx" target="frmScr"&gt;X-SIP / I-SIP&lt;/a&gt;
            &lt;ul&gt;
              &lt;li&gt;&lt;a href="frmXSIPRegistrationMaster.aspx" target="frmScr"&gt;X-SIP / I-SIP 
             Registration&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="BulkFileUpload.aspx?
            TransType=IMP_XSIP&amp;amp;FileType=IMP_XSIP_REG" target="frmScr"&gt;X-SIP / I-SIP 
            Registration Upload&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="frmRptXSIPRegistrationView.aspx" target="frmScr"&gt;X-SIP / I-SIP Registration Report&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="frmRptXSIPInstallmentDueReport.aspx" target="frmScr"&gt;X-SIP / I-SIP 
            Installment due Report&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="frmrptXSIPBrokerageReportForMembers.aspx" target="frmScr"&gt;Brokerage 
            Report&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="frmrptCancelXSIP.aspx" target="frmScr"&gt;X-SIP / I-
             SIP Cancellation&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="BulkFileUpload.aspx?
         TransType=IMP_XSIP&amp;amp;FileType=IMP_XSIP_CAN" target="frmScr"&gt;X-SIP / I-SIP 
         Cancellation Upload&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="frmXSIPCancellationReport.aspx" target="frmScr"&gt;X-SIP / I-SIP Cancellation Report&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li class="has-sub"&gt;&lt;span class="submenu-button"&gt;&lt;/span&gt;&lt;a href="Blank.aspx" target="frmScr"&gt;SWP&lt;/a&gt;
            &lt;ul&gt;
              &lt;li&gt;&lt;a href="SWPRegistrationMaster.aspx" target="frmScr"&gt;SWP Registration Master&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="BulkFileUpload.aspx?TransType=IMP_SWP&amp;amp;FileType=IMP_SWP_REG" target="frmScr"&gt;SWP Registration Upload&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="BulkFileUpload.aspx?TransType=IMP_SWP&amp;amp;FileType=IMP_SWP_CAN" target="frmScr"&gt;SWP Cancellation Upload&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="SWPCancellationRegn.aspx" target="frmScr"&gt;SWP Cancellation&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li class="has-sub"&gt;&lt;span class="submenu-button"&gt;&lt;/span&gt;&lt;a href="Blank.aspx" target="frmScr"&gt;STP&lt;/a&gt;
            &lt;ul&gt;
              &lt;li&gt;&lt;a href="STPRegistrationMaster.aspx" target="frmScr"&gt;STP Registration Master&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="BulkFileUpload.aspx?
             TransType=IMP_STP&amp;amp;FileType=IMP_STP_REG" target="frmScr"&gt;STP Registration 
             Upload&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="BulkFileUpload.aspx?
            TransType=IMP_STP&amp;amp;FileType=IMP_STP_CAN" target="frmScr"&gt;STP 
            Cancellation 
             Upload&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="STPCancellationRegn.aspx" target="frmScr"&gt;STP 
             Cancellation&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li name="item" class="has-sub"&gt;
        &lt;span class="submenu-button"&gt;&lt;/span&gt;
        &lt;a href="Blank.aspx" rel="SGB0000001" target="frmScr"&gt;SGB&lt;/a&gt;
        &lt;ul id="SGB0000001"&gt;
          &lt;li&gt;&lt;a href="SGBManualEntry.aspx" target="frmScr"&gt;SGB Manual Entry&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="SGBView.aspx" target="frmScr"&gt;SGB View&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="SGBUpload.aspx" target="frmScr"&gt;SGB Upload&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li name="item" class="has-
              sub"&gt;&lt;span class="submenu-button"&gt;&lt;/span&gt;
        &lt;a href="Blank.aspx" rel="MADM000001" target="frmScr"&gt;Admin&lt;/a&gt;
        &lt;ul id="MADM000001"&gt;
          &lt;li class="has-sub"&gt;&lt;span class="submenu-button"&gt;&lt;/span&gt;&lt;a href="Blank.aspx" target="frmScr"&gt;Member M 
              Masters&lt;/a&gt;
            &lt;ul&gt;
              &lt;li&gt;&lt;a href="MemberBranches.aspx" target="frmScr"&gt;Member 
              Branches&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li class="has-sub"&gt;&lt;span class="submenu-button"&gt;
              &lt;/span&gt;&lt;a href="Blank.aspx" target="frmScr"&gt;User Master&lt;/a&gt;
            &lt;ul&gt;
              &lt;li&gt;&lt;a href="UserMasterDetails.aspx" target="frmScr"&gt;User Master Manual&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="UserMasterUpload.aspx" target="frmScr"&gt;User Master Upload&lt;/a&gt;
              &lt;/li&gt;
            &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li class="has-sub"&gt;&lt;span class="submenu-button"&gt;&lt;/span&gt;&lt;a href="Blank.aspx" target="frmScr"&gt;Client Details&lt;/a&gt;
            &lt;ul&gt;
              &lt;li&gt;&lt;a href="ClientMasterDetails.aspx" target="frmScr"&gt;Client Master&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="FATCA.aspx" target="frmScr"&gt;FATCA Manual Entry&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="CKYC.aspx" target="frmScr"&gt;CKYC&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li class="has-sub"&gt;
            &lt;span class="submenu-button"&gt;&lt;/span&gt;&lt;a href="Blank.aspx" target="frmScr"&gt;Admin Reports&lt;/a&gt;
            &lt;ul&gt;
              &lt;li&gt;&lt;a href="frmrptBrokerSIPReport.aspx" target="frmScr"&gt;SIP Installment due 
              Report&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="UserMasterReport.aspx" target="frmScr"&gt;User 
              Master Report&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="ClientMasterReport.aspx" target="frmScr"&gt;Client Master Report&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="frmClientStatusReport.aspx" target="frmScr"&gt;Client Status&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;
                &lt;a href="RptBranchLoginInfo.aspx" target="frmScr"&gt;Branch/Login Info&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="RptMemberAMCList.aspx" target="frmScr"&gt;Member AMC List&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="frmViewBannedClients.aspx" target="frmScr"&gt;View Banned 
             Clients&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li class="has-sub"&gt;&lt;span class="submenu-button"&gt;
             &lt;/span&gt;&lt;a href="Blank.aspx" target="frmScr"&gt;Limits&lt;/a&gt;
            &lt;ul&gt;
              &lt;li&gt;&lt;a href="BranchDeposits.aspx" target="frmScr"&gt;Branch Deposits&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="DealerDeposits.aspx" target="frmScr"&gt;Dealer Deposits&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="ClientDeposits.aspx" target="frmScr"&gt;Client Deposits&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="ClientPaymentRejections.aspx" target="frmScr"&gt;Payment 
             Rejections&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="UploadFATCAFile.aspx" target="frmScr"&gt;FATCA 
             Upload&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="AOFDownload.aspx" target="frmScr"&gt;AOF 
             Download&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="ImageUpload.aspx" target="frmScr"&gt;Image 
             Upload&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="MemberBankDetails.aspx" target="frmScr"&gt;Member 
             Bank Details&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="PANUpload.aspx" target="frmScr"&gt;PAN 
             Upload&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li name="item" class="has-sub"&gt;&lt;span class="submenu-button"&gt;&lt;/span&gt;
        &lt;a href="Blank.aspx" rel="MMR0000001" target="frmScr"&gt;Member Reports&lt;/a&gt;
        &lt;ul id="MMR0000001"&gt;
          &lt;li&gt;&lt;a href="ProvORDReport.aspx" target="frmScr"&gt;Provisional Orders&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="RptProvisionalOrderReportNew.aspx" target="frmScr"&gt;New Provisional  
              Orders &lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="OCNReport.aspx" target="frmScr"&gt;Bulk OCN 
              Generation&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="CustodianProvOrderReport.aspx" target="frmScr"&gt;Custodian Provision Orders&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="OrderLogReport.aspx" target="frmScr"&gt;Order Log&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="OrderDetailsSearch.aspx" target="frmScr"&gt;Order Status&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="RptOrderStatusReportNew.aspx" target="frmScr"&gt;New Order Status&lt;/a&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li name="item" class="has-sub"&gt;&lt;span class="submenu-button"&gt;
               &lt;/span&gt;
        &lt;a href="Blank.aspx" rel="UTI0000001" target="frmScr"&gt;Utilities&lt;/a&gt;
        &lt;ul id="UTI0000001"&gt;
          &lt;li class="has-sub"&gt;&lt;span class="submenu-button"&gt;&lt;/span&gt;&lt;a href="Blank.aspx" target="frmScr"&gt;Member 
               Related&lt;/a&gt;
            &lt;ul&gt;
              &lt;li&gt;&lt;a href="QuickOrderEntry.aspx" target="frmScr"&gt;Quick 
               Order&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="PlaceOrderRedemption.aspx" target="frmScr"&gt;Minimum Qty Redemption Order Entry&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="ViewOrder.aspx" target="frmScr"&gt;View Orders&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="BulkFileUpload.aspx?TransType=IMP_MASTER" target="frmScr"&gt;Bulk Upload 
               New&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="FileUpload.aspx" target="frmScr"&gt;Bulk Upload&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="UploadClientDealerMap.aspx" target="frmScr"&gt;Upload 
                Client Mapping &amp;amp; Balances&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="ManualFileUpload.aspx" target="frmScr"&gt;Upload Client Deposits&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="frmUpdateClientDealerMapping.aspx" target="frmScr"&gt;Upload Client 
                Dealer Mapping&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="frmUploadOrderCancellation.aspx" target="frmScr"&gt;Upload Order Cancellation&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="DealerDeposits.aspx" target="frmScr"&gt;Dealer Deposits&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="frmUploadMemberFundsForGateway.aspx" target="frmScr"&gt;Upload Member 
                 Funds Gateway&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="ChangePassword.aspx" target="frmScr"&gt;Change Password&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li name="item"&gt;&lt;a href="LogOut.aspx" target="_top"&gt;&lt;i class="fa fa-sign-out"&gt;&lt;/i&gt;Log 
                 Out&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Link: <a href="https://www.bootply.com/RDP650rMxv" rel="nofollow noreferrer">https://www.bootply.com/RDP650rMxv</a></p>
  
  <p>I need a scrollable navigation menu with chevron left and right over it and if the extreme corner menu has sub menus it is exceeding the screen resolution.</p>