title: Long dropdown menu causes scrolling on the page
body: <p>I have a dynamic menu with the CSS below. The full code is on Fiddle <a href="http://jsfiddle.net/kabircse/9drons8g/" rel="nofollow">here</a>.</p>
  
  <pre><code>#
  cssmenu ul, #cssmenu li, #cssmenu span, #cssmenu a {
      margin: 0;
      padding: 0;
      position: relative;
  }#
  cssmenu {
      line - height: 1;
      border - radius: 5 px 5 px 0 0; - moz - border - radius: 5 px 5 px 0 0; - webkit - border - radius: 5 px 5 px 0 0;
  
      width: auto;
  }#
  cssmenu: after, #cssmenu ul: after {
      content: '';
      display: block;
      clear: both;
  }#
  cssmenu a {
      background: #141414;
    background: -moz-linear-gradient(top, # 333333 0 % ,
      #141414 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, # 333333), color - stop(100 % , #141414));
    background: -webkit-linear-gradient(top, # 333333 0 % , #141414 100%);
    background: -o-linear-gradient(top, # 333333 0 % , #141414 100%);
    background: -ms-linear-gradient(top, # 333333 0 % , #141414 100%);
    background: linear-gradient(to bottom, # 333333 0 % , #141414 100%);
    color: # ffffff; display: block; font - family: Helvetica, Arial, Verdana, sans - serif; padding: 19 px 20 px; text - decoration: none;
  }#
  cssmenu ul {
      list - style: none;
  }#
  cssmenu &gt; ul &gt; li {
      display: inline - block;
      float: left;
      margin: 0;
  }#
  cssmenu.align - center {
      text - align: center;
  }#
  cssmenu.align - center &gt; ul &gt; li {
      float: none;
  }#
  cssmenu.align - center ul ul {
      text - align: left;
  }#
  cssmenu.align - right &gt; ul {
      float: right;
  }#
  cssmenu.align - right ul ul {
      text - align: right;
  }#
  cssmenu &gt; ul &gt; li &gt; a {
      color: #ffffff;
      font - size: 12 px;
  }#
  cssmenu &gt; ul &gt; li: hover: after {
          content: '';
          display: block;
          width: 0;
          height: 0;
          position: absolute;
          left: 50 % ;
          bottom: 0;
          border - left: 10 px solid transparent;
          border - right: 10 px solid transparent;
          border - bottom: 10 px solid #0fa1e0;
    margin-left: -10px;
  }
  # cssmenu &gt; ul &gt; li: first - child &gt; a {
              border - radius: 5 px 0 0 0; - moz - border - radius: 5 px 0 0 0; - webkit - border - radius: 5 px 0 0 0;
          }#
          cssmenu.align - right &gt; ul &gt; li: first - child &gt; a,
          #cssmenu.align - center &gt; ul &gt; li: first - child &gt; a {
              border - radius: 0; - moz - border - radius: 0; - webkit - border - radius: 0;
          }#
          cssmenu.align - right &gt; ul &gt; li: last - child &gt; a {
              border - radius: 0 5 px 0 0; - moz - border - radius: 0 5 px 0 0; - webkit - border - radius: 0 5 px 0 0;
          }#
          cssmenu &gt; ul &gt; li.active &gt; a,
          #cssmenu &gt; ul &gt; li: hover &gt; a {
              color: #ffffff;
              box - shadow: inset 0 0 3 px #000000;
    -moz-box-shadow: inset 0 0 3px # 000000; - webkit - box - shadow: inset 0 0 3 px #000000;
    background: # 070707;
              background: -moz - linear - gradient(top, #262626 0%, # 070707 100 % );
              background: -webkit - gradient(linear, left top, left bottom, color - stop(0 % , #262626), color-stop(100%, # 070707));
              background: -webkit - linear - gradient(top, #262626 0%, # 070707 100 % );
              background: -o - linear - gradient(top, #262626 0%, # 070707 100 % );
              background: -ms - linear - gradient(top, #262626 0%, # 070707 100 % );
              background: linear - gradient(to bottom, #262626 0%, # 070707 100 % );
          }#
          cssmenu.has - sub {
              z - index: 1;
          }#
          cssmenu.has - sub: hover &gt; ul {
              display: block;
          }#
          cssmenu.has - sub ul {
              display: none;
              position: absolute;
              min - width: 200 px;
              top: 100 % ;
              left: 0;
          }#
          cssmenu.align - right.has - sub ul {
              left: auto;
              right: 0;
          }#
          cssmenu.has - sub ul li { * margin - bottom: -1 px;
          }#
          cssmenu.has - sub ul li a {
              background: #0fa1e0;
    border-bottom: 1px dotted # 31 b7f1;
              font - size: 11 px;
              filter: none;
              display: block;
              line - height: 120 % ;
              padding: 10 px;
              color: #ffffff;
          }#
          cssmenu.has - sub ul li: hover a {
                  background: #0c7fb0;
  }
  # cssmenu ul ul li: hover &gt; a {
                      color: #ffffff;
                  }#
                  cssmenu.has - sub.has - sub: hover &gt; ul {
                      display: block;
                  }#
                  cssmenu.has - sub.has - sub ul {
                      display: none;
                      position: absolute;
                      left: 100 % ;
                      top: 0;
                  }#
                  cssmenu.align - right.has - sub.has - sub ul,
                  #cssmenu.align - right ul ul ul {
                      left: auto;
                      right: 100 % ;
                  }#
                  cssmenu.has - sub.has - sub ul li a {
                      background: #0c7fb0;
    border-bottom: 1px dotted # 31 b7f1;
                  }#
                  cssmenu.has - sub.has - sub ul li a: hover {
                          background: #0a6d98;
  }
  # cssmenu ul ul li.last &gt; a,
                          #cssmenu ul ul li: last - child &gt; a,
                          #cssmenu ul ul ul li.last &gt; a,
                          #cssmenu ul ul ul li: last - child &gt; a,
                          #cssmenu.has - sub ul li: last - child &gt; a,
                          #cssmenu.has - sub ul li.last &gt; a {
                              border - bottom: 0;
                          }
  </code></pre>
  
  <p>My problem is that when there are large product categories, the menu list becomes very long and causes problems with scrolling on the page.</p>
  
  <p>I have tried to solve the problem (Fiddle <a href="http://jsfiddle.net/kabircse/rw75p5q7/" rel="nofollow">here</a>) but it is not working. Can you please help?</p>