현재 메인메뉴에 마우스 오버시 나타나는 2차메뉴가 세로로 나타나는데 이것을 메인메뉴 하단으로 가로로 나타나게 하려고 하는데 쉽진 않네요.

display: inline-block; 혹은 float: left; 를 넣어야 한다는 것을 검색으로 어느정도 알아냈는데

맞다고 생각되는 부분에 넣어도 반영이 잘 안됩니다.

하단에 소스중 어느부분에 반영해야 할지 알려주시면 정말 감사하겠습니다.

/* nav */
#gnb    {text-align: center; font-size: 0;}
#gnb.fixed    {position: fixed; top: 0; width: 100%; z-index: 190; -webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;}
#gnb a    {display: block; font-size: 12px;}
#gnb button    {display: block;}
#gnb li    {display: inline-block; position: relative;}
#gnb.narrow_space li,
#gnb.narrow_space>ul>li>ul,
.gnb_dummy.narrow_space>ul>li a    {width: 100px;} 

#gnb li.bt_img    {position: relative; width: 50px; height: 33px;}
#gnb li.bt_img a,
#gnb li.bt_img button    {padding: 0; height: 33px; width: 50px; text-indent: -9999px;}
#gnb li.bt_img a.bt_home    {background: url(../images/icn_home.png) no-repeat center center;}

#gnb.no_line>ul>li    {border-left: none; margin-left: 1px;}
#gnb.no_line>ul>li:last-child    {border-right: none; margin-right: 1px;}

.bt_show_gnb    {position: relative; z-index: 20; cursor: pointer;}
.bt_show_gnb span    {display: block; position: absolute; left: 13px; width: 23px; height: 3px; background-color: #FFF; opacity: 0.8; z-index: 10; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .3s; -moz-transition: .3s; -o-transition: .3s; transition: .3s;}
.bt_show_gnb span:nth-child(1)    {top: 9px;}
.bt_show_gnb span:nth-child(2),
.bt_show_gnb span:nth-child(3)    {top: 15px;}
.bt_show_gnb span:nth-child(4)    {top: 21px;}

.bt_show_gnb.open span:nth-child(1) {width: 0%; left: 50%;}
.bt_show_gnb.open span:nth-child(2) {-webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg)}
.bt_show_gnb.open span:nth-child(3) {-webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg);}
.bt_show_gnb.open span:nth-child(4) {width: 0%; left: 50%;}

#gnb>ul>li    {vertical-align: top;}

#gnb>ul>li>a    {height: 35px; line-height: 35px; color: #FFF; -webkit-text-shadow: 0 0 1px rgba(0, 0, 0, 0.2); -moz-text-shadow: 0 0 1px rgba(0, 0, 0, 0.2); text-shadow: 0 0 1px rgba(0, 0, 0, 0.2);-webkit-backface-visibility: hidden;}
#gnb>ul>li>ul    {display: none; position: absolute; top: 100%; left: -1px; background-color: #FFF; border-top: none !important; text-align: left;}
#gnb>ul>li>ul>li.active>a,
#gnb>ul>li>ul>li>ul>li.active>a    {font-weight: bold;}
#gnb>ul>li>ul>li a    {padding: 5px 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
#gnb>ul>li>ul>li>a.has_child    {background-image: url(../images/icn_menu_arrow.png); background-repeat: no-repeat; background-position: right 7px center;}
#gnb>ul>li>ul li:last-child    {border-bottom: none;}
#gnb>ul>li>ul>li>ul    {display: none; position: absolute; left: 100%; top: -1px; background-color: #FFF;}
#gnb>ul>li>ul>li:hover>ul    {display: block;}

.gnb_dummy    {display: none; position: absolute; width: 100%; text-align: center; background-color: #FFF; z-index: 200;}
.gnb_dummy.fixed    {position: fixed;}
.gnb_dummy>div    {display: inline-block; vertical-align: top;}
.gnb_dummy>div>ul    {padding: 5px 0; border-top: none !important; text-align: left;}
.gnb_dummy>div>ul>li a    {display: block; padding: 5px 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin-left: 1px;}
.gnb_dummy>div>ul>li a:hover    {text-decoration: underline;}
.gnb_dummy>div>ul>li>ul>li>a    {font-size: 11px;}
.gnb_dummy>div>ul>li.active>a,
.gnb_dummy>div>ul>li>ul>li.active>a    {font-weight: bold;}