위 스샷처럼 메뉴 사이에 띄어쓰기 한것처럼 공간이 생깁니다.
그냥 html안에 img 태그로 넣을때는 <a href=""></a>와 다음<a href=""></a>태그 사이에 엔터없이 쭉 이어서 써서
해결했었는데요
지금 위 스샷에 있는 메뉴는 XE를 사용한 메뉴라서 어떻게 해결해야할지 모르겟네요..

/* gnb */
#gnb { position:absolute; width:100%; height:40px; top:70px; z-index:90}
#gnb * {  margin:0; padding:0; list-style:none; border:0; background:none; font-style:normal; font-family:Gulim, Arial, Tahoma}
#gnb a span { font:12px Arial, Gulim, Tahoma}
#gnb .ul1 { width:100%; text-align:center;}
#gnb .li1 { display:inline-block; position:relative;}
#gnb .a1 { display:block; overflow:hidden}
#gnb .a1:hover,
#gnb .a1:focus { position:relative; z-index:9999}
#gnb .a1 span { display:block; padding:10px; text-align:center}
#gnb .li2 { display:inline-block; list-style:none; margin:0; padding:0}
#gnb .ul2 { display:none; position:absolute; left:0; top:35px !important; top:35px}
#gnb .ul2 a { display:block; overflow:hidden; background-color:#000; color:#fff}
#gnb .ul2 a:hover,
#gnb .ul2 a:focus { color:#95d3f0}
#gnb .ul2 a span { display:block; padding:7px 10px}
/* //gnb */




<div id="gnb">
<ul class="ul1">
    <list">!--@foreach($gnb->list as $val)--><!--@if($val["link"])-->
    <li class="li1">
     <a href="{$val['href']}" class="a1"<!--@if($val["open_window"]=="Y")--> onclick="window.open(this.href); return false;"<>!--@else--><span>{$val["link"]}</span><!--@end--></a>
        <!--@if($val["list"])-->
        <ul class="ul2">
            <!--@foreach($val["list"] as $v)--><!--@if($v["link"])-->
            <li class="li2">
             <a href="{$v['href']}" class="a2"<!--@if($v["open_window"]=="Y")--> onclick="window.open(this.href); return false;"<>!--@else-->{$v["link"]}<!--@end--></span></a>
            </li>
            <