title: Javascript CSS - Menu with time (Help)
body: <p>I have this menu and I want to display Categories and Language when the hover is active and they go too More.. and click it to display the other down with time so it will display beautiful..when they will click it I want to display Less.. and the less will be at the end of the dropdon meny I dont know how to do it please someone help me..here is the menu code </p>
  
  <p>HTML CODE</p>
  
  <pre><code>&lt;div id="menu"&gt;
  &lt;div id="top-menu" style="position:absolute;left:0px;top:0px;width:100%;height:24px;text-align:center;z-index:0;"&gt;&lt;/div&gt;
  &lt;div  style="position:relative;top:34px;width:100%;height:36px;text-align:center;z-index:1;"&gt; 
  
  &lt;div id="content"&gt;
  &lt;div id="mbmcpebul_wrapper" style="text-align:center;padding-left:215px;"&gt;
    &lt;ul id="mbmcpebul_table" class="mbmcpebul_menulist css_menu"&gt;
    &lt;li&gt;&lt;div class="buttonbg gradient_button"&gt;&lt;a href="Home" target="_self"&gt;Home&lt;/a&gt;&lt;/div&gt;&lt;/li&gt;
    &lt;li&gt;&lt;div class="buttonbg gradient_button"&gt;&lt;a href="Categories" target="_self"&gt;Categories&lt;/a&gt;&lt;/div&gt;
      &lt;ul class="gradient_menu"&gt;
      &lt;li class="gradient_menuitem  first"&gt;&lt;a href="Action" target="_self"&gt;Action&lt;/a&gt;&lt;/li&gt;
      &lt;li class="gradient_menuitem"&gt;&lt;a href="Adventure" target="_self" title=""&gt;Adventure&lt;/a&gt;&lt;/li&gt;
      &lt;li class="gradient_menuitem"&gt;&lt;a href="Animation" target="_self" title=""&gt;Animation&lt;/a&gt;&lt;/li&gt;
      &lt;li class="gradient_menuitem"&gt;&lt;a href="Comedy" target="_self" title=""&gt;Comedy&lt;/a&gt;&lt;/li&gt;
      &lt;li class="gradient_menuitem"&gt;&lt;a href="Crime" target="_self" title=""&gt;Crime&lt;/a&gt;&lt;/li&gt;
      &lt;li class="gradient_menuitem"&gt;&lt;a href="Drama" target="_self" title=""&gt;Drama&lt;/a&gt;&lt;/li&gt;
      &lt;li class="gradient_menuitem"&gt;&lt;a href="Family" target="_self" title=""&gt;Family&lt;/a&gt;&lt;/li&gt;
      &lt;li class="gradient_menuitem"&gt;&lt;a href="Fantasy" target="_self" title=""&gt;Fantasy&lt;/a&gt;&lt;/li&gt;
      &lt;li class="gradient_menuitem"&gt;&lt;a href="Horror" target="_self" title=""&gt;Horror&lt;/a&gt;&lt;/li&gt;
      &lt;li class="gradient_menuitem"&gt;&lt;a href="More.." target="_self" title=""&gt;More..&lt;/a&gt;&lt;/li&gt;
      &lt;li class="gradient_menuitem"&gt;&lt;a href="Romance" target="_self" title=""&gt;Romance&lt;/a&gt;&lt;/li&gt;
      &lt;li class="gradient_menuitem"&gt;&lt;a href="Sci-Fi"  target="_self" title=""&gt;Sci-Fi&lt;/a&gt;&lt;/li&gt;
      &lt;li class="gradient_menuitem last"&gt;&lt;a href="Thriller" target="_self" title=""&gt;Thriller&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;&lt;/li&gt;
    &lt;li&gt;&lt;div class="buttonbg gradient_button"&gt;&lt;a href="Browse" target="_self"&gt;Language&lt;/a&gt;&lt;/div&gt;
      &lt;ul class="gradient_menu"&gt;
      &lt;li class="gradient_menuitem first"&gt;&lt;a href="Arabic" target="_self" title=""&gt;Arabic&lt;/a&gt;&lt;/li&gt;
      &lt;li class="gradient_menuitem"&gt;&lt;a href="Brazilian" target="_self" title=""&gt;Brazilian&lt;/a&gt;&lt;/li&gt;
      &lt;li class="gradient_menuitem"&gt;&lt;a href="Dutch" target="_self" title=""&gt;Dutch&lt;/a&gt;&lt;/li&gt;
      &lt;li class="gradient_menuitem"&gt;&lt;a href="English" target="_self" title=""&gt;English&lt;/a&gt;&lt;/li&gt;
      &lt;li class="gradient_menuitem"&gt;&lt;a href="French" target="_self" title=""&gt;French&lt;/a&gt;&lt;/li&gt;
      &lt;li class="gradient_menuitem"&gt;&lt;a href="German" target="_self" title=""&gt;German&lt;/a&gt;&lt;/li&gt;
      &lt;li class="gradient_menuitem"&gt;&lt;a href="Greek" target="_self" title=""&gt;Greek&lt;/a&gt;&lt;/li&gt;
      &lt;li class="gradient_menuitem"&gt;&lt;a href="Indonesian" target="_self" title=""&gt;Indonesian&lt;/a&gt;&lt;/li&gt;
      &lt;li class="gradient_menuitem"&gt;&lt;a href="Malay" target="_self" title=""&gt;Malay&lt;/a&gt;&lt;/li&gt;
      &lt;li class="gradient_menuitem"&gt;&lt;a href="More.." target="_self" title=""&gt;More..&lt;/a&gt;&lt;/li&gt;
      &lt;li class="gradient_menuitem"&gt;&lt;a href="Norwegian" target="_self" title=""&gt;Norwegian&lt;/a&gt;&lt;/li&gt;
      &lt;li class="gradient_menuitem"&gt;&lt;a href="Romanian" target="_self" title=""&gt;Romanian&lt;/a&gt;&lt;/li&gt;
      &lt;li class="gradient_menuitem"&gt;&lt;a href="Spanish" target="_self" title=""&gt;Spanish&lt;/a&gt;&lt;/li&gt;
      &lt;li class="gradient_menuitem"&gt;&lt;a href="Swedish" target="_self" title=""&gt;Swedish&lt;/a&gt;&lt;/li&gt;
      &lt;li class="gradient_menuitem"&gt;&lt;a href="Thai" target="_self" title=""&gt;Thai&lt;/a&gt;&lt;/li&gt;
      &lt;li class="gradient_menuitem"&gt;&lt;a href="Turkish" target="_self" title=""&gt;Turkish&lt;/a&gt;&lt;/li&gt;
      &lt;li class="gradient_menuitem last"&gt;&lt;a href="Vietnamese" target="_self" title=""&gt;Vietnamese&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;&lt;/li&gt;
    &lt;li&gt;&lt;div class="buttonbg gradient_button"&gt;&lt;a href="Contact/Request" target="_self"&gt;Request&lt;/a&gt;&lt;/div&gt;
      &lt;ul class="gradient_menu"&gt;
      &lt;li class="gradient_menuitem first"&gt;&lt;a href="Contact/Request-Movie" target="_self" title=""&gt;Movie&lt;/a&gt;&lt;/li&gt;
      &lt;li class="gradient_menuitem last"&gt;&lt;a href="Contact/Request-Other" target="_self" title=""&gt;Other&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;&lt;/li&gt;
    &lt;li&gt;&lt;div class="buttonbg gradient_button"&gt;&lt;a href="Help-us" target="_self"&gt;Help us&lt;/a&gt;&lt;/div&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  &lt;br&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS CODE </p>
  
  <pre><code>#mbmcpebul_table {
    display: inline-block;
    width:100%;
    margin:0 auto;
    height:50px;
  }
  
  #mbmcpebul_table li a {
    line-height: 19px;
    font-size: 17px;
    font-family: Arial,sans-serif;
    text-decoration: none;
    color: #2C6EE8;
    font-style: normal;
    font-weight: bold;
    padding: 8px 1px 1px 1px;
    display: block;
    cursor: pointer;
    white-space: nowrap;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    text-shadow:none;
  }
  
  #mbmcpebul_table li div.buttonbg {
    height: 35px;
    width: 150px;
    line-height: 0;
    background-color: transparent;
    border-style: solid;
    border-color: #E4E4E4;
    border-width: 0;
    border-radius: 5px;
    box-shadow: none;
    text-align: center;
    cursor: pointer;
  }
  
  #mbmcpebul_table li:hover div.buttonbg a, #mbmcpebul_table li.expanded a.topitem, #mbmcpebul_table li.active a.topitem,
  #mbmcpebul_table li.itemhot a.topitem, #mbmcpebul_table li a:hover {
    color: #FFFFFF;
    font-style: normal;
    font-weight: bold;
    text-decoration: none;
  }
  
  
  #mbmcpebul_table li.expanded div.buttonbg, #mbmcpebul_table li.active div.buttonbg, #mbmcpebul_table li.itemhot div.buttonbg, #mbmcpebul_table li:hover div.buttonbg {
    background-color: transparent;
    box-shadow: none;
  }
  
  #mbmcpebul_table li.expanded div.buttonbg, #mbmcpebul_table li.active div.buttonbg, #mbmcpebul_table li.itemhot div.buttonbg, #mbmcpebul_table li:hover div.buttonbg {
    border-color: #3278BE;
    text-align:center;
  }
  #mbmcpebul_table ul li.subexpanded a.subexpanded, #mbmcpebul_table ul li.subitemhot a.subitemhot, #mbmcpebul_table ul li a {
  text-align:center;
  }
  #mbmcpebul_table ul li a {
    border-top: 1px #2C6EE8 solid;
    border-bottom: 1px #2C6EE8 solid;
    border-right: 2px #2C6EE8 solid;
    border-left: 2px #2C6EE8 solid;
    color: #2C6EE8;
    font-family: Arial,sans-serif;
    font-size: 14px;
    line-height: 9px;
    text-decoration: none;
    display: block;
    width:117.2px;
  }
  #mbmcpebul_table .first {
    border-top: 1px #2C6EE8 solid;
  }
  #mbmcpebul_table .last {
    border-bottom: 1px #2C6EE8 solid;
  }
  #mbmcpebul_table div .active {
    background-image: -moz-linear-gradient(top, #3F93D9 0%, #014188 100%); 
    background-image: -webkit-linear-gradient(top, red 0%, #014188 100%); 
    background-image: linear-gradient(top, #3F93D9 0%, #014188 100%); 
  }
  #mbmcpebul_table ul li.subexpanded a.subexpanded, #mbmcpebul_table ul li.subitemhot a.subitemhot, #mbmcpebul_table ul li a:hover {
    color: #FFFFFF;
    font-family: Arial,sans-serif;
    font-size: 15px;
    text-align:center;
  }
  
  #mbmcpebul_table ul li:hover, #mbmcpebul_table ul li.subexpanded, #mbmcpebul_table ul li.subitemhot {
    border-color: transparent;
    background-color: transparent;
    box-shadow: none;
  }
  
  
  #mbmcpebul_table ul li a {
    padding: 7px 15px 7px 13px;
    text-align: center;
  }
  
  #mbmcpebul_table ul li.separator {
    padding: 7px;
    cursor: default;
    background: none;
    box-shadow: none;
    border-width: 0;
  }
  
  #mbmcpebul_table ul li.separator div {
    border-top: 1px solid #FFFFFF;
    font-size: 0px;
  }
  
  #mbmcpebul_table ul li {
    border-style: solid;
    border-color: transparent;
    border-width: 0;
    height: auto;
    width: auto;
    text-align: left;
    line-height: 0;
    font-size: 0;
    cursor: pointer;
    float: none;
    margin: 0 0 0px 0;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    background-color: transparent;
    display: block;
    left:-40;
  }
  
  
  #mbmcpebul_table ul {
    box-shadow: 1px 1px 5px -1px #333333;
  }
  
  #mbmcpebul_table a img {
    border: none;
  }
  
  #mbmcpebul_table li {
    list-style: none;
    float: left;
    margin: 0px 15px 15px 0px;
    padding: 0;
    float: left;
    display: inline-block;
  }
  
  #mbmcpebul_table.css_menu li {
    position: relative;
  }
  
  #mbmcpebul_table.css_menu ul li:hover &gt; ul {
    opacity: 1;
  }
  
  #mbmcpebul_table.css_menu li:hover &gt; ul {
    top: 100%;
    left: 0;
    right: auto;
    opacity: 1;
    transform: scale(1,1);
    -webkit-transform: scale(1,1);
    -moz-transform: scale(1,1);
    -ms-transform: scale(1,1);
  }
  
  #mbmcpebul_table.css_menu ul li:hover &gt; ul {
    top: -1px;
    left: 100%;
    right: auto;
  }
  
  #mbmcpebul_table.css_menu ul {
    transition-duration: 0.3s;
    -webkit-transition-duration: 0.3s;
    -moz-transition-duration: 0.3s;
    -ms-transition-duration: 0.3s;
    transition-property:transform,opacity;
    -webkit-transition-property:-webkit-transform,opacity;
    -moz-transition-property:-moz-transform,opacity;
    -ms-transition-property:-ms-transform,opacity;
    opacity: 0;
    transform-origin: 0 0;
    transform: scale(0.1, 0.1);
    -webkit-transform-origin: 0 0;
    -webkit-transform: scale(0.1, 0.1);
    -moz-transform-origin: 0 0;
    -moz-transform: scale(0.1, 0.1);
    -ms-transform-origin: 0 0;
    -ms-transform: scale(0.1, 0.1);
  }
  
  #mbmcpebul_table ul {
    position: absolute;
    top:-99999px;
    z-index: 4000;
  }
  
  #mbmcpebul_table ul ul {
    position: absolute;
    z-index: 5000;
  }
  
  #mbmcpebul_table .submenu_arrow {
    margin-left: px;
  }
  
  
  #mbmcpebul_table li:hover &gt; a span.img_4x5, #mbmcpebul_table li.subexpanded &gt; a span.img_4x5 { 
    background-position: 0 -5px; 
  } 
  
  #mbmcpebul_table div.gradient_button { 
    background-image: -moz-linear-gradient(top, #FEFEFE 0%, #D9D9D9 100%); 
    background-image: -webkit-linear-gradient(top, #FEFEFE 0%, #D9D9D9 100%); 
    background-image: linear-gradient(top, #FEFEFE 0%, #D9D9D9 100%); 
  } 
  
  #mbmcpebul_table li:hover div.gradient_button, #mbmcpebul_table li.expanded div.gradient_button, #mbmcpebul_table li.active div.gradient_button, #mbmcpebul_table li.itemhot div.gradient_button { 
    background-image: -moz-linear-gradient(top, #3F93D9 0%, #014188 100%); 
    background-image: -webkit-linear-gradient(top, #3F93D9 0%, #014188 100%); 
    background-image: linear-gradient(top, #3F93D9 0%, #014188 100%); 
  } 
  
  #mbmcpebul_table ul.gradient_menu { 
    background-image: -moz-linear-gradient(top, #FFFFFF 0%, #ECECEC 100%); 
    background-image: -webkit-linear-gradient(top, #FFFFFF 0%, #ECECEC 100%); 
    background-image: linear-gradient(top, #FFFFFF 0%, #ECECEC 100%); 
  
  } 
  
  
  #mbmcpebul_table ul li.gradient_menuitem:hover, #mbmcpebul_table ul li.gradient_menuitem.subexpanded, #mbmcpebul_table ul li.gradient_menuitem.subitemhot { 
    background-image: -moz-linear-gradient(top, #3F93D9 0%, #003C82 100%); 
    background-image: -webkit-linear-gradient(top, #3F93D9 0%, #003C82 100%); 
    background-image: linear-gradient(top, #3F93D9 0%, #003C82 100%); 
  } 
  </code></pre>