메뉴에 마우스를 올리면 2차 메뉴가 세로로 나열되는데(지금  xe 홈페이지 처럼)

이 2차메뉴를 가로로 나열되도록 만드려고 합니다.

저와같은 질문을 많은 사람들이 했는데, 대부분 답변들이 없거나 다른 수정에 대한 이야기를 하는 것 같습니다.

 

2차메뉴(서브메뉴)를 가로로 나타나게 하려면 어떻게 해야 하나요?

다시 한번 더 재질문을 해봅니다.... '')

 

-----------------------------------------------------------------------------

수년전 질문 및 댓글들을 보면서 수정을 해도..... 안됩니다.... '')

 

xe 공식 홈페이지 레이아웃을 가져다가 쓰고 있습니다.

중간에 float에 none을 left로 바꿔보기도 하고....

이것저것  설명대로 해보아도....

지금 이 xe 홈페이지 서브메뉴들처럼...... 마우스 오버시 서브 메뉴가 세로로 나타나네요.

 

어떻게 하면 서브메뉴가 가로로 나타나게 할 수 있을까요?

 

 

 

@charset "utf-8";
/* Layout */
hr{display:none}
form, fieldset{border:0;margin:0;padding:-20}
body{margin:0;padding:0}
.user_layout{width:960px;margin:0 auto}
.header:after{content:"";display:block;clear:both}
.header{zoom:1;background:#FEFFB7;padding:0}
.header .gnb{float:right}

.gnb ul{list-style:none;margin:0;padding:0;zoom:1}

.gnb ul:after{content:"";display:block;clear:both}

.gnb ul ul{display:none;position:absolute;left:0;top:38px;padding:5px 0;background:#FFFFFF;border:1px solid #444;border-top:0}

.gnb li{float:left;list-style:none;background:url(./images/default/bgGnbVr.gif) no-repeat left center;padding-left:2px;position:relative;white-space:nowrap}

.gnb li.first{padding:0;background:none}

.gnb li li{float:left;background:none;padding:0;left:0}

.gnb li a{float:left;padding:13px 15px 0 15px;height:25px;color:#187200;white-space:nowrap;text-decoration:none}

.gnb li a:hover,
.gnb li a:active,

.gnb li a:focus{color:#0000FF}

.gnb li.active a{font-weight:bold;color:#0000FF;background:url(./images/default/bgGnbOn.gif) no-repeat center bottom}

.gnb li li a{float:left;display:inline;padding:5px 15px !important;background:none !important;height:auto;font-weight:normal !important}
.gnb li li.active a{font-weight:bold !important}
.body{margin:20px 0;zoom:1;background:#FFF}
.body:after{content:"";display:block;clear:both}
.lnb{float:left;width:200px;background:#FFF}
.account{}
.content{float:right;width:740px;background:#FFF}
.footer{background:#ddd}