좌측에 세로로 길게 정렬된 메뉴를 상단 가로로 길게 배치하고 싶은데요

스타일 수정만으로 배치를 바꿀 수 있나요?

<div id="wrapper">

    <style>

 /* 중간 레이아웃 */
 #wrapper {z-index:5;margin:0 auto; width:100%; zoom:1; background:url('../images/main_bgbg.gif') left top repeat-y; border-left:1px solid #d5d5d5;}
 #wrapper:after {display:block;visibility:hidden;clear:both;content:""}
    #index_menu {float:left; position:absolute; width:160px; height:100%;}
    #index_menu ul{margin:0; padding:0; width:160px;}
    #index_menu ul li{display:inline-block; float:left; height:48px}
    .inmenu01{ width:160px; height:48px; }
    .inmenu02{ width:160px; height:48px; }

    /*2차 서브메뉴*/
    #sub_menu {float:left; position:relative; left:160px; width:111px; height:100%; background-color:#9fa2a7; border-right:1px solid #d6d6d6;}
    #sub_menu ul{margin:0; padding:0; width:111px; }
    #sub_menu ul li{display:inline-block; width:111px; height:48px; }
    </style>

    <div id="index_menu">
        <ul>
            <li class="inmenu01">
                <a href="/bbs/content.php?co_id=111" style="text-decoration:none;">
                        <div class="submenu<?=$updown1?>">메뉴1</div></a></li>

            <li class="inmenu02">

                <a href="/bbs/content.php?co_id=219" style="text-decoration:none;">

                        <div class="submenu<?=$updown2?>">메뉴2</div></a></li>

                      이렇게 총 11개 메인메뉴 있음...

            </ul>

   </div>

<!--서브 2차메뉴 시작-->
<?
$conNum = substr($_GET['co_id'],0,1);
$borNum = substr($_GET['bo_table'],0,1);

if ($conNum == "1") {
?>
    <div id="sub_menu">
        <ul>
            <li><a href="/bbs/content.php?co_id=111" style="text-decoration:none;">

              <div class="submenus2<?=$_GET['co_id'] == "111" ? "_up" : ""?>"/>1서브메뉴1</div></a> 

             </li>
            <li><a href="/bbs/content.php?co_id=112" style="text-decoration:none;">

               <div class="submenus<?=$_GET['co_id'] == "112" ? "_up" : ""?>"/>1서브메뉴2</div></a>

            </li>
            <li><a href="/bbs/content.php?co_id=113" style="text-decoration:none;">

               <div class="submenus<?=$_GET['co_id'] == "113" ? "_up" : ""?>"/>1서브메뉴3</div></a>

            </li>

                   이렇게 첫번째 서브메뉴 7개

     </ul>

   </div>

<?
} else if ($conNum == "2") {
?>
    <div id="sub_menu">
       <ul>
          <li><a href="/bbs/content.php?co_id=219" style="text-decoration:none;">

             <div class="submenus2<?=$_GET['co_id'] == "219" ? "_up" : ""?>"/>2서브메뉴1</div></a>

          </li>
           <li><a href="/bbs/content.php?co_id=220" style="text-decoration:none;">

             <div style="padding: 8px 0 12px 9px; height:27px" class="submenus<?=$_GET['co_id'] == "220" ? "_up" : ""?>"/>2서브메뉴2</div></a></li>

이렇게 주르륵 있는데.. 제가 원래 웹디(html,css)정도 알고 이렇게 php기반의 홈페이지는 처음 다뤄봐서 잘못 건드렸다가 큰일날까봐 걱정되서 여쭤봅니다..ㅜ