제가 만들 홈페이지의 메뉴 구성이 대략 이러한데요

웹빌드님이 배포해주신 모바일 레이아웃을 베이스로 하고 있구요.

아래를 참고하여 메뉴 형태를 조금 변경해보려고 합니다.

아래가 제가 수정해야 할 메뉴 부분 코드입니다.

a href 부분을 <span> 으로 수정하면 된다고 하는데, 여기서 막혀버렸습니다. ㅠㅠ (기초지식이 전무하여..)

<nav id="menu">
<ul>
<li loop="$main_menu->list=>$key1,$val1" cond="$val1['link']" class="ad1">
<a href="{$val1['href']}" target="_blank"|cond="$val1['open_window']=='Y'">{$val1['link']}</a>
<ul cond="$val1['list']">
<li loop="$val1['list']=>$key2,$val2" cond="$val2['link']" class="ad2">
<a href="{$val2['href']}" target="_blank"|cond="$val2['open_window']=='Y'">　{$val2['link']}</a>
<ul cond="$val2['list']">
<li loop="$val2['list']=>$key3,$val3" cond="$val3['link']" class="ad3">
<a href="{$val3['href']}" target="_blank"|cond="$val3['open_window']=='Y'">　　{$val3['link']}</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>

어떻게 수정하면 제가 원하는 메뉴형태를 만들 수 있을까요??

<li loop="$main_menu->list=>$key1,$val1" cond="$val1['link']" class="ad1">
<a href="{$val1['href']}" target="_blank"|cond="$val1['open_window']=='Y'">{$val1['link']}</a>

이 부분을

<li loop="$main_menu->list=>$key1,$val1" cond="$val1['link']" class="ad1">
<span>{$val1['link']}</span>

이렇게 수정하니 하위 메뉴가 없는 다른 메뉴의 링크가 사라지고..

<li loop="$main_menu->list=>$key1,$val1" cond="$val1['link']" class="ad1">
<span><a href="{$val1['href']}" target="_blank"|cond="$val1['open_window']=='Y'">{$val1['link']}</a></span>

이렇게 수정하면

글씨 색도 바뀌고 하위메뉴가 없는 단일메뉴는 사각형 부분이 아닌 글자를 클릭해야만 링크가 작동합니다. ㅠㅠ

...뭣도 모르다보니 이것저것 해봤는데 답이 안나와서 이렇게 여쭈어봅니다.

아예 다른 식으로 접근해야 하는지.. 

고수님들 안내 부탁드리겠습니다 (_ _)