Edit in JSFiddle

Result
HTML
CSS
JavaScript

<div id="jq-slideup">
<div class="header">
</div>
<div class="top-menu style4">
    <ul class="top-menu-main" style="cursor: pointer;">
      <li class="first" style="position: relative; float: left; list-style: none;">
        <ul class="top-submenu" style="bottom: 38px; min-width: 100%; position: absolute; padding: 0px; margin: 0px; white-space: nowrap; width: 177px; display: none;">
          <li class="first" style="list-style: none;">Submenu item 1</li>
          <li class="" style="list-style: none;">Submenu item 2</li>
          <li class="" style="list-style: none;">Submenu item 3</li>
          <li class="" style="list-style: none;">Submenu item 4</li>
          <li class="last" style="list-style: none;">Item 5</li>
        </ul>
        <a href="#" class="menu-item-text" style="display: block;">Menu item 1</a>
      </li>
      <li class="" style="position: relative; float: left; list-style: none;">
        <ul class="top-submenu" style="bottom: 38px; min-width: 100%; position: absolute; padding: 0px; margin: 0px; white-space: nowrap; width: 360px; display: none;">
          <li class="first text-html" style="list-style: none;">
            <h1>Title H1</h1>
            <p>Now, as the business of standing mast-heads, ashore or afloat, is a very ancient and interesting one, let us in some measure expatiate here.</p>
            <p>I take it, that the earliest standers of mast-heads were the old Egyptians; because, in all my researches, I find none prior to them.</p>
            <p>For though their progenitors, the builders of Babel, must doubtless, by their tower</p>
          </li>
        </ul>
        <a href="#" class="menu-item-text" style="display: block;">Html content</a>
      </li>
      <li class="" style="position: relative; float: left; list-style: none;">
        <ul class="top-submenu" style="bottom: 38px; min-width: 100%; position: absolute; padding: 0px; margin: 0px; white-space: nowrap; width: 120px; display: none;">
          <li class="first" style="list-style: none;">Item A.1</li>
          <li class="last" style="list-style: none;">Item A.2</li>
        </ul>
        <a href="#" class="menu-item-text" style="display: block;">Short A</a>
      </li>
      <li class="" style="position: relative; float: left; list-style: none;">
        <a href="#" class="menu-item-text" style="display: block;">Simple 1</a>
      </li>
      <li class="last" style="position: relative; float: left; list-style: none;">
        <a href="#" class="menu-item-text" style="display: block;">Simple 2</a>
      </li>
    </ul>    
  </div>
     <div class="content">
         <div class="main">
          <div class="clearfix">
            <div class="col-1-3">
              <ul class="s-way s-menu">
                <li rel="1" class="selected">Standard use with ease  - 标准 + ease (easeInOutCubic)</li>
                <li rel="2" class="">Standard use with ease  - 标准 + ease (easeOutBounce)</li>
                <li rel="3" class="">Standard use with ease  - 标准 + ease (easeOutBack)</li>
                <li rel="4" class="">No ease, no animations queue 没有 EASE， 没有动画队列</li>
              </ul>
            </div>
          </div>
        </div>
     </div>
</div>

body {font-family: 'Marcellus SC', serif; font-size:120%;}
p {word-wrap: break-word;}

/* =Clearfix
-------------------------------------------------------------- */
.clearfix:after{
	clear:both;
	content:"\0020";
	display:block;
	height:0;
	max-height:0;
	overflow:hidden;
	visibility:hidden;
}

.clearfix{
	display:inline-block;
}

*html .clearfix{
	height:1%;
}

.clearfix{
	display:block;
}

.clear {
	clear:both;
}


#jq-slideup ul.top-menu-main > li {
  margin: 0 10px;
  display: block;
}

#jq-slideup .top-menu {
  font-family: "Arial Narrow", Georgia, Tahoma, arial;
  text-transform: uppercase;
  font-size: 14px;
  font-weight: bold;
  background: transparent;
  height: 37px;
  border-bottom: 1px solid #333;
}

#jq-slideup .header {
  height: 300px; 
  background: #ccc;
  -moz-box-shadow: 0 0 8px #ccc;
  -webkit-box-shadow: 0 0 8px #ccc;
  box-shadow: 0 -5px 10px #ccc;
}

#jq-slideup .content {
}

#jq-slideup .content .main {padding-top: 20px;}
#jq-slideup .donate {
  padding: 5px;
  background: #cfcfcf;
  color: #333;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  
}
#jq-slideup .donate form {margin-bottom: 5px;}
#jq-slideup .donate > div {
  padding: 10px;
  position: relative; float: left; width : 370px;
  font-style: italic;
  line-height: 15px;
  font-size: 11px;
}
#jq-slideup .s-menu {margin: 0; padding: 0; margin-top: 20px;}
#jq-slideup .s-menu li {list-style-type: none; width: 100px; padding: 5px; margin: 2px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  cursor: pointer;
  background: #efefef;
  width: 100%;
}
#jq-slideup .s-menu li:hover {background: #cfcfcf; color: #000;}
.s-menu li.selected {background: #fff; color: #000;}

#jq-slideup .s-menu li {padding: 12px; margin-bottom: 5px;}
#jq-slideup .col-1-3 {width: 45%; margin-right: 2%; position: relative; float: left;}

#jq-slideup div.button {
  cursor: pointer;
  font-family: georgia, tahoma, arial;
  font-size: 20px;
  font-weight: bold;
  line-height: 20px;
  text-align: center;
  margin: 10px;
  padding: 0;
  border: 1px solid rgba(75,65,125,0.5);
  border-radius: 10px 10px 10px 10px;
  background: rgba(75,65,125,0.25);
  box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
  -o-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
  -webkit-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
  -moz-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
}
#jq-slideup div.button span {display: block; margin: 20px 20px;}
#jq-slideup div.button:hover {background: rgba(10,40,70,0.85);}

#jq-slideup div.button.small {font-size: 14px; line-height: 16px; font-weight: normal;}
#jq-slideup div.button.small span {display: block; margin: 10px 20px;}
#jq-slideup div.button a {color: #fff;}
#jq-slideup .col-1-3.last {float: right;}
#jq-slideup .callout {
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  border-radius: 15px;
  background: #000 url(images/stripe-bg.png);
  margin-top: 20px;
}

#jq-slideup span.default {
  background: rgba(200,200,200,0.2);
  border: 1px solid rgba(150,150,150,0.2);
  border-radius: 5px;
  padding: 2px 10px;
}

#jq-slideup .options-item {padding-left: 20px; padding-bottom: 20px;}

.style2 ul.top-menu-main {
  margin: auto;
  width: 800px;
}

.style2 ul.top-menu-main > li {
  background: #fff;
  border-right: 1px solid #afafaf;
  margin: 0;
}

.style2 ul.top-menu-main > li.last {
  border-right: none;
}
.style2 ul.top-menu-main > li:hover .menu-item-text {color: #cfcfcf; text-shadow: 0 1px 0 #0C131C;}
.style2 ul.top-menu-main > li:hover{
  background: #333;
  color: #fff;
  -moz-box-shadow: 0 0 8px #333;
  -webkit-box-shadow: 0 0 8px #333;
  box-shadow: 0 0 8px #333;
}

.style2 ul.top-menu-main > li > a {
  color: #333;
  text-decoration: none;
}
.style2 ul.top-menu-main > li > a:hover {
  color: #fff;
}

.style2 ul.top-menu-main > li > a { 
  padding: 10px 20px;
}

.style2 ul.top-submenu {
  -moz-box-shadow: 0 0 8px #333;
  -webkit-box-shadow: 0 0 8px #333;
  box-shadow: 0 0 8px #333;
}

.style2 ul.top-submenu > li {
  margin: 0px;
  padding: 10px 30px;
  background: #333;
  color: #fff;
  white-space: nowrap;
  

}

.style2 ul.top-submenu > li.hover {
  background: #cfcfcf;
  color: #333;
}
.style3.top-menu {background: #123456;}
.style3 ul.top-menu-main {
  margin: auto;
  width: 800px;
  font-family: Georgia, Tahoma, Arial;
  font-size: 10px;
  line-height: 18px;
}

.style3 ul.top-menu-main > li {
  background: #123456;
  border-right: 1px solid #afafaf;
  color: #fff;
  margin: 0;
}

.style3 ul.top-menu-main > li.last {
  border-right: none;
}
.style3 ul.top-menu-main > li:hover .menu-item-text {color: #cfcfcf; text-shadow: 0 1px 0 #0C131C;}
.style3 ul.top-menu-main > li:hover{
  background: #012345;
  color: #fff;
  -moz-box-shadow: 0 0 8px #012345;
  -webkit-box-shadow: 0 0 8px #012345;
  box-shadow: 0 0 8px #012345;
}

.style3 ul.top-menu-main > li > a {
  color: #fff;
  text-decoration: none;
}
.style3 ul.top-menu-main > li > a:hover {
  color: #fff;
}

.style3 ul.top-menu-main > li > a { 
  padding: 10px 20px;
}

.style3 ul.top-submenu {
  -moz-box-shadow: 0 0 8px #012345;
  -webkit-box-shadow: 0 0 8px #012345;
  box-shadow: 0 0 8px #012345;
    -webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;

}

.style3 ul.top-submenu > li {
  margin: 0px;
  padding: 10px 30px;
  background: #012345;
  color: #fff;
  white-space: nowrap;
  

}
.style3 ul.top-submenu > li.first {
  -webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}

.style3 ul.top-submenu > li.hover {
  background: #000;
  color: #fff;
}
#jq-slideup .style4.top-menu {background: #000; margin-top: -38px; float: left;}
#jq-slideup .style4 ul.top-menu-main {
  margin: auto;
  width: 600px;
  font-family: Georgia, Tahoma, Arial;
  font-size: 10px;
  line-height: 18px;
}

#jq-slideup .style4 ul.top-menu-main > li {
  background: #000;
  border-right: 1px solid #afafaf;
  color: #fff;
  margin: 0;
}

#jq-slideup .style4 ul.top-menu-main > li.last {
  border-right: none;
}
#jq-slideup .style4 ul.top-menu-main > li:hover .menu-item-text {color: #cfcfcf; text-shadow: 0 1px 0 #0C131C;}
#jq-slideup .style4 ul.top-menu-main > li:hover{
  background: #333;
  color: #fff;
  -moz-box-shadow: 0 0 8px #333;
  -webkit-box-shadow: 0 0 8px #333;
  box-shadow: 0 0 8px #333;
}

#jq-slideup .style4 ul.top-menu-main > li > a {
  color: #fff;
  text-decoration: none;
}
#jq-slideup .style4 ul.top-menu-main > li > a:hover {
  color: #fff;
}

#jq-slideup .style4 ul.top-menu-main > li > a { 
  padding: 10px 20px;
}

#jq-slideup .style4 ul.top-submenu {
  -moz-box-shadow: 0 0 8px #333;
  -webkit-box-shadow: 0 0 8px #333;
  box-shadow: 0 0 8px #333;
}

#jq-slideup .style4 ul.top-submenu > li {
  margin: 0px;
  padding: 10px 30px;
  background: #333;
  color: #fff;
  display: block;

}
#jq-slideup .style4 ul.top-submenu > li:hover {
  background: #cfcfcf;
  color: #333;
}

#jq-slideup .style4 ul.top-submenu > li.text-html {
  text-transform: none;
  line-height: normal;
}
#jq-slideup .style4 ul.top-submenu > li.text-html p {
  padding: 0px;
  margin: 0px;
}
#jq-slideup .style4 ul.top-submenu > li.text-html:hover {
  cursor: text;
  background: #333;
  color: #fff;
}

#jq-slideup .style4 ul.top-submenu > li.text-html {
  width: 300px;
  white-space: pre;
  z-index: 100;
}

.top-menu-main li {z-index: 100;}
#jq-slideup .style4 ul.top-submenu > li.text-html h1 {color: #fff; margin: 0px;}
.style5.top-menu {
  background: transparent;
  margin: auto;
  width: 950px;
  margin-top: -35px;
  
}
.style5 ul.top-menu-main {
  margin: auto;
  width: 800px;
  font-family: Georgia, Tahoma, Arial;
  font-size: 10px;
  line-height: 18px;
}

.style5 ul.top-menu-main > li {
  background: #000;
  border-right: 1px solid #afafaf;
  color: #fff;
  margin: 0;
}

.style5 ul.top-menu-main > li.last {
  border-right: none;
}
.style5 ul.top-menu-main > li:hover .menu-item-text {color: #cfcfcf; text-shadow: 0 1px 0 #0C131C;}
.style5 ul.top-menu-main > li:hover{
  background: #333 transparent;
  color: #fff;
  -moz-box-shadow: 0 0 8px #333;
  -webkit-box-shadow: 0 0 8px #333;
  box-shadow: 0 0 8px #333;
}

.style5 ul.top-menu-main > li > a {
  color: #fff;
  text-decoration: none;
}
.style5 ul.top-menu-main > li > a:hover {
  color: #fff;
}

.style5 ul.top-menu-main > li > a { 
  padding: 10px 20px;
}

.style5 ul.top-submenu {
  -moz-box-shadow: 0 0 8px #333;
  -webkit-box-shadow: 0 0 8px #333;
  box-shadow: 0 0 8px #333;
}

.style5 ul.top-submenu > li {
  margin: 0px;
  padding: 10px 30px;
  background: #333 transparent;
  color: #fff;
  white-space: nowrap;
  

}

.style5 ul.top-submenu > li.hover {
  background: #000;
  color: #fff;
}

/* Pretty printing styles. Used with prettify.js. */

/* SPAN elements with the classes below are added by prettyprint. */
.pln { color: #000 }  /* plain text */

@media screen {
  .str { color: #080 }  /* string content */
  .kwd { color: #008 }  /* a keyword */
  .com { color: #800 }  /* a comment */
  .typ { color: #606 }  /* a type name */
  .lit { color: #066 }  /* a literal value */
  /* punctuation, lisp open bracket, lisp close bracket */
  .pun, .opn, .clo { color: #660 }
  .tag { color: #008 }  /* a markup tag name */
  .atn { color: #606 }  /* a markup attribute name */
  .atv { color: #080 }  /* a markup attribute value */
  .dec, .var { color: #606 }  /* a declaration; a variable name */
  .fun { color: red }  /* a function name */
}

/* Use higher contrast and text-weight for printable form. */
@media print, projection {
  .str { color: #060 }
  .kwd { color: #006; font-weight: bold }
  .com { color: #600; font-style: italic }
  .typ { color: #404; font-weight: bold }
  .lit { color: #044 }
  .pun, .opn, .clo { color: #440 }
  .tag { color: #006; font-weight: bold }
  .atn { color: #404 }
  .atv { color: #060 }
}

/* Put a border around prettyprinted code snippets. */
pre.prettyprint { padding: 2px; border: 1px solid #888 }

/* Specify class=linenums on a pre to get line numbering */
ol.linenums { margin-top: 0; margin-bottom: 0 } /* IE indents via margin-left */
li.L0,
li.L1,
li.L2,
li.L3,
li.L5,
li.L6,
li.L7,
li.L8 { list-style-type: none }
/* Alternate shading for lines */
li.L1,
li.L3,
li.L5,
li.L7,
li.L9 { background: #eee }

/* jQuery SlideUp menu v1.0 - http://adis.ro/jquery/slideup/
 * Open source under the BSD License. 
 * Copyright  2011 Adi Ban
 * All rights reserved (please read the full terms on the original website) */
(function($){$.fn.slideupmenu=function(b){var c=jQuery.extend({slideUpSpeed:500,slideDownSpeed:500,ease:"easeInOutCubic",stopQueue:true},b);var d=this;$(this).find('li').unbind('click mouseenter mouseleave');$(this).find('ul.top-menu-main').css({'cursor':'pointer'});$(this).find('ul.top-menu-main > li').css({'position':'relative','float':'left','list-style':'none'});$(this).find('ul.top-menu-main > li > a').css({'display':'block'});$(this).find('ul.top-submenu').css({'display':'none'}).css({'bottom':$('ul.top-menu-main > li').height()+'px','display':'none','min-width':'100%','position':'absolute','padding':'0px','margin':'0px','white-space':'nowrap'});$(this).find('ul.top-submenu > li').css({'list-style':'none'});$(this).find('ul.top-submenu').css({'display':'none'}).css({'bottom':$('ul.top-menu-main > li').height()+'px'});$(this).find('ul.top-submenu > li').hover(function(){$(this).addClass('hover')},function(){$(this).removeClass('hover')});$(this).find('ul.top-menu-main > li').hover(function(){var a=$(this).find('ul').css('width',$(this).find('ul').width()+'px');if(c.stopQueue)a=a.stop(true,true);a.slideDown(c.slideUpSpeed,c.ease)},function(){var a=$(this).find('ul');if(c.stopQueue)a=a.stop(true,true);a.slideUp(c.slideDownSpeed,c.ease)})}})(jQuery);


(function($){
    var opts = {slideUpSpeed:500, slideDownSpeed: 200};
    $(document).ready(function(){
      $('ul.s-menu li').click(function(){
        $(this).parent().find('li').removeClass('selected');
        $(this).addClass('selected');
      });
      $('ul.s-style li').click(function(){
        $('.top-menu').removeClass().addClass('top-menu').addClass('style'+$(this).attr('rel'));
        $(".top-menu").slideupmenu(opts);  
      });
      $('ul.s-way li[rel="1"]').live('click', function() {
        opts = {slideUpSpeed:500, slideDownSpeed: 200};
        $(".top-menu").slideupmenu(opts);  
      });
      $('ul.s-way li[rel="2"]').live('click', function() {
        opts = {slideUpSpeed: 500, slideDownSpeed: 500, ease: "easeOutBounce", stopQueue: true};
        $(".top-menu").slideupmenu(opts);  
      });
      $('ul.s-way li[rel="3"]').live('click', function() {
        opts = {slideUpSpeed: 1000, slideDownSpeed: 100, ease: "easeOutBack", stopQueue: true};
        $(".top-menu").slideupmenu(opts);  
      });
      $('ul.s-way li[rel="4"]').live('click', function() {
        opts = {slideUpSpeed: 500, slideDownSpeed: 500, ease:false, stopQueue: false};
        $(".top-menu").slideupmenu(opts);  
      });
      $(".top-menu").slideupmenu(opts);  
    });
})(jQuery);