<style type="text/css">
#topmenu {margin:0px auto; width:100%;text-align:center;position:fixed;top:0px;}
.topmenu_div { background-color:#dfdfdf;display:none;padding:0px;margin:0px;border-bottom: 0px solid #bebebe;}
.close_bottom { position:absolute;right:10px;top:10px;cursor:pointer;padding:0px; }

#topmenu_bottom_div{width:115px;margin:-1px auto; z-index:1000;text-align:center;overflow:hidden;border: 1px solid #bebebe;background-color:#dfdfdf;}
.topmenu_bottom {float:left;padding:5px 10px;cursor:pointer;}
</style>

<div id="topmenu">

 <div id="topmenu_div1" class="topmenu_div">
  시간표 </div>

 <div id="topmenu_div2" class="topmenu_div">
  메뉴2<br>메뉴2<br>메뉴2
 </div>

 <div id="topmenu_bottom_div">
  <div id="topmenu_1" class="topmenu_bottom">12반</div>
  <div id="topmenu_2" class="topmenu_bottom">13반</div>
 </div>
</div>

<div>
<? for($n = '1' ; $n <= '50'; $n++ ){?>
<?=$n?><br>
<?}?>

</div>

<script type="text/javascript">
$(document).ready(function(){

 $("#topmenu_1").click(function () {

  if($("#topmenu_div1").hasClass("div_show") == true) {
   $("#topmenu_div1").slideUp("fast");
   $("#topmenu_div1").removeClass("div_show");
  } else if($("#topmenu_div1").hasClass("div_show") == false) {
   $("#topmenu_div2").slideUp("fast");
   $("#topmenu_div1").addClass("div_show");
   $("#topmenu_div1").slideDown("fast");
   $("#topmenu_div2").removeClass("div_show");
  }

 });

 $("#topmenu_2").click(function () {

  if($("#topmenu_div2").hasClass("div_show") == true) {
   $("#topmenu_div2").slideUp("fast");
   $("#topmenu_div2").removeClass("div_show");
  } else if($("#topmenu_div2").hasClass("div_show") == false) {
   $("#topmenu_div2").addClass("div_show");
   $("#topmenu_div2").slideDown("fast");
   $("#topmenu_div1").slideUp("fast");
   $("#topmenu_div1").removeClass("div_show");
  }

 });

});
</script>