Javascript CSS-带时间的菜单（帮助）

我有这个菜单，我想显示类别和语言时，悬停是积极的，他们去太多。。点击它，另一个会随着时间向下显示，所以它会显示得很漂亮。当他们点击它时，我想显示得更少。。我不知道怎么做请有人帮帮我这是菜单代码

HTML代码

<div id="menu">
<div id="top-menu" style="position:absolute;left:0px;top:0px;width:100%;height:24px;text-align:center;z-index:0;"></div>
<div  style="position:relative;top:34px;width:100%;height:36px;text-align:center;z-index:1;"> 

<div id="content">
<div id="mbmcpebul_wrapper" style="text-align:center;padding-left:215px;">
  <ul id="mbmcpebul_table" class="mbmcpebul_menulist css_menu">
  <li><div class="buttonbg gradient_button"><a href="Home" target="_self">Home</a></div></li>
  <li><div class="buttonbg gradient_button"><a href="Categories" target="_self">Categories</a></div>
    <ul class="gradient_menu">
    <li class="gradient_menuitem  first"><a href="Action" target="_self">Action</a></li>
    <li class="gradient_menuitem"><a href="Adventure" target="_self" title="">Adventure</a></li>
    <li class="gradient_menuitem"><a href="Animation" target="_self" title="">Animation</a></li>
    <li class="gradient_menuitem"><a href="Comedy" target="_self" title="">Comedy</a></li>
    <li class="gradient_menuitem"><a href="Crime" target="_self" title="">Crime</a></li>
    <li class="gradient_menuitem"><a href="Drama" target="_self" title="">Drama</a></li>
    <li class="gradient_menuitem"><a href="Family" target="_self" title="">Family</a></li>
    <li class="gradient_menuitem"><a href="Fantasy" target="_self" title="">Fantasy</a></li>
    <li class="gradient_menuitem"><a href="Horror" target="_self" title="">Horror</a></li>
    <li class="gradient_menuitem"><a href="More.." target="_self" title="">More..</a></li>
    <li class="gradient_menuitem"><a href="Romance" target="_self" title="">Romance</a></li>
    <li class="gradient_menuitem"><a href="Sci-Fi"  target="_self" title="">Sci-Fi</a></li>
    <li class="gradient_menuitem last"><a href="Thriller" target="_self" title="">Thriller</a></li>
    </ul></li>
  <li><div class="buttonbg gradient_button"><a href="Browse" target="_self">Language</a></div>
    <ul class="gradient_menu">
    <li class="gradient_menuitem first"><a href="Arabic" target="_self" title="">Arabic</a></li>
    <li class="gradient_menuitem"><a href="Brazilian" target="_self" title="">Brazilian</a></li>
    <li class="gradient_menuitem"><a href="Dutch" target="_self" title="">Dutch</a></li>
    <li class="gradient_menuitem"><a href="English" target="_self" title="">English</a></li>
    <li class="gradient_menuitem"><a href="French" target="_self" title="">French</a></li>
    <li class="gradient_menuitem"><a href="German" target="_self" title="">German</a></li>
    <li class="gradient_menuitem"><a href="Greek" target="_self" title="">Greek</a></li>
    <li class="gradient_menuitem"><a href="Indonesian" target="_self" title="">Indonesian</a></li>
    <li class="gradient_menuitem"><a href="Malay" target="_self" title="">Malay</a></li>
    <li class="gradient_menuitem"><a href="More.." target="_self" title="">More..</a></li>
    <li class="gradient_menuitem"><a href="Norwegian" target="_self" title="">Norwegian</a></li>
    <li class="gradient_menuitem"><a href="Romanian" target="_self" title="">Romanian</a></li>
    <li class="gradient_menuitem"><a href="Spanish" target="_self" title="">Spanish</a></li>
    <li class="gradient_menuitem"><a href="Swedish" target="_self" title="">Swedish</a></li>
    <li class="gradient_menuitem"><a href="Thai" target="_self" title="">Thai</a></li>
    <li class="gradient_menuitem"><a href="Turkish" target="_self" title="">Turkish</a></li>
    <li class="gradient_menuitem last"><a href="Vietnamese" target="_self" title="">Vietnamese</a></li>
    </ul></li>
  <li><div class="buttonbg gradient_button"><a href="Contact/Request" target="_self">Request</a></div>
    <ul class="gradient_menu">
    <li class="gradient_menuitem first"><a href="Contact/Request-Movie" target="_self" title="">Movie</a></li>
    <li class="gradient_menuitem last"><a href="Contact/Request-Other" target="_self" title="">Other</a></li>
    </ul></li>
  <li><div class="buttonbg gradient_button"><a href="Help-us" target="_self">Help us</a></div></li>
  </ul>
</div>
<br>
</div>
</div>

---

专业提示：不要张贴代码墙，尽量提供可读的示例。并在以下页面上提供一个工作示例：，帮助您解决问题和指出问题会更容易。是的，但是JSFIDLE没有显示为浏览--我用JSFIDLE发布了一个，在我进入web后，它将不会显示相同的内容…您是否将所有CSS文件都包括在小提琴中？“是的，任何东西..它使菜单在悬停时变大了--这就是为什么我不想放在那里的原因最好是这样

#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 > ul {
  opacity: 1;
}

#mbmcpebul_table.css_menu li:hover > 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 > 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 > a span.img_4x5, #mbmcpebul_table li.subexpanded > 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%); 
}