레이아웃

<div class="gnb">
                <ul>
                  <li loop="$main_menu->list=>$key1,$val1" class="active"|cond="$val1['selected']"><a href="{$val1['href']}" target="_blank"|cond="$val1['open_window']=='Y'">{$val1['link']}</a>
                    <ul cond="$val1['list']">
                      <li loop="$val1['list']=>$key2,$val2" class="active"|cond="$val2['selected']"><a href="{$val2['href']}" target="_blank"|cond="$val2['open_window']=='Y'">{$val2['link']}</a></li>
                    </ul>
                  </li>
                </ul>
              </div>

................................................................................................................................................................

CSS

.gnb{position:absolute;top:0;left:5px;height:0;white-space:nowrap;margin-bottom:0}
.gnb ul{list-style:none;margin:0;padding:0;zoom:1}
.gnb ul:after{content:"";display:block;clear:both}
.gnb ul ul{list-style:none;margin:0;padding:0;zoom:1}
.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;list-style:none;margin-top:40px;padding:0;position:absolute;}
.gnb li a{float:left;padding:13px 19px 6px 19px;height:25px; font-weight:bold;color:#fff;white-space:nowrap;text-decoration:none}
.gnb li a:hover{font-weight:bold;color:#dcffb7}
.gnb li a:active,
.gnb li a:focus{font-weight:bold;color:#dcffb7}
.gnb li.active a{font-weight:bold;color:#fff000;}
.gnb li li a{float:none;left:1px;display:inline;padding:5px 15px 5px 15px;list-style:none;border:0;border-right:1px solid #d0d0d0;font-weight:bold;color:#555;text-decoration:none;}
.gnb li li.active a{font-weight:bold !important}

위 css 빨간색 부분이 2차 메뉴 간의 간격을 조절하는 소스가 아닌가요?

저 값으로 적용이 안되고, 2차 모든 메뉴가 왼쪽 앞쪽에 겹쳐 있는 상태입니다.

어떻게 하면 2차 메뉴가 가로로 일정한 간격으로 배열이 될까요?

몇일째 헤매고 있는데 아시는분 부탁드립니다...