제가 레이아웃에는 잼병이라서요.

css를 공부해보셔야 할 것같네요.

아무 레이아웃이나 개발자도구로 해서 보시면 쉽게 확인해 보실 수 있습니다.

지금 말씀하신 형태를 하나의 예시로 들어보면

<li>
<a>메뉴텍스트</a>
</li>

이런구조입니다.

그런데 왜 메뉴텍스트를 터치해야만 a 태그가 동작을 할까요?

그건 li의 class에 padding 이 적용되어 있고 a 에는 padding이 없기 때문입니다.

잘못된 다른 메뉴 터치를 막기 위해 해당 메뉴를 정확히 구분해서 터치를 인식하기 위함이겠죠?


그런데 지금 반대로 원하신다면 전체영역을 터치될 확율이 높아질 수 있습니다.

방법은 li 쪽의 padding을 없애고 a 쪽에 paddig을 주면 텍스트주변 여백이 메뉴 구분하는 곳까지 확대됩니다.

감사합니다. style.css 에서 손봐야 하나요?

@charset "utf-8";
/* °øÅë CSS*/
body { padding:0px; margin:0px; line-height:normal; font-size:12px; color:#555; border:none; }
ul,ol,li,dl,dd,p { padding:0px; margin:0px; list-style:none; }
a { color:#555; text-decoration:none; }
img { border:0px;  }

a {
  text-decoration:none;
-webkit-transition: all .2s ease-in-out;-moz-transition: all .2s ease-in-out;-ms-transition: all .2s ease-in-out;-o-transition: all .2s ease-in-out;transition: all .2s ease-in-out;
}
* {box-sizing:border-box;}
input, select {height:30px; line-height:30px;}

.bd_hd {padding:0;}


/* 이미지설정 */
.aside_navi .login_info_box .login_info > li > a > i,
.aside_navi .header_menu_box .header_menu > li > a > i,
.aside_navi .header_menu_box .right_menu > li > a > i {background-image:url('../images/sp_ico_2x.png'); background-size:320px 320px; background-repeat:no-repeat;}

/* 사이드메뉴 */
.mm-menu.mm-front {
    z-index: 1;
box-shadow:none;
}
.mm-menu.mm-front.mm-opened {
box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
}
.aside_navi {display:none; margin:0px; padding:0px;}
.aside_navi .login_info_box {position:relative; width:100%; height:40px; padding:0; background:#364277;}
.aside_navi .login_info_box .login_info > li {float:left; width:50%; text-align:center;}
.aside_navi .login_info_box .login_info > li > a {display:inline-block; width:100%; font-size:13px; line-height:40px; color:#fff;}
.aside_navi .login_info_box .login_info > li > a > i {display:inline-block; width:40px; height:40px; vertical-align:middle;}
.aside_navi .login_info_box .login_info > li > a.login i {background-position:0 -280px;}
.aside_navi .login_info_box .login_info > li > a.logout i {background-position:-40px -280px;}
.aside_navi .login_info_box .login_info > li > a.signup i {background-position:-80px -280px;}
.aside_navi .login_info_box .login_info > li > a.member i {background-position:-80px -280px;}

.aside_navi .header_menu_box {position:relative; left:0; padding:0 0 40px 0; width:100%; background:#fff;}
.aside_navi .header_menu_box .header_menu > li,
.aside_navi .header_menu_box .right_menu > li {width:100%; border-bottom:solid 1px #ddd;}
.aside_navi .header_menu_box .header_menu > li > a,
.aside_navi .header_menu_box .right_menu > li > a {width:100%; font-size:13px; line-height:39px;}
.aside_navi .header_menu_box .header_menu > li > a > i,
.aside_navi .header_menu_box .right_menu > li > a > i {display:inline-block; width:40px; height:40px; vertical-align:middle; background-position:-160px -280px;}
.aside_navi .header_menu_box .header_menu > li > a.menu_1 > i {background-position:-120px -280px;}


/* 헤더 */
.header_wrap {position:relative; width:100%;}
.header_wrap .header {position:relative; width:100%; height:40px; line-height:40px; text-align:center; background:#364277;}
.header_wrap .header .menu_btn {position:absolute; top:0; left:0; display:inline-block; width:40px; height:40px; line-height:36px;}
.header_wrap .header .menu_btn > i.css_bar {position:relative; display:inline-block; margin-top:11px; background:#fff;}
.header_wrap .header .menu_btn > i.css_bar,
.header_wrap .header .menu_btn > i.css_bar:before,
.header_wrap .header .menu_btn > i.css_bar:after {width:18px; height:3px;}
.header_wrap .header .menu_btn > i.css_bar:before,
.header_wrap .header .menu_btn > i.css_bar:after {position:absolute; top:50%; left:0; display:block; content:""; background: #fff;}
.header_wrap .header .menu_btn > i.css_bar:before {margin-top:-9px;}
.header_wrap .header .menu_btn > i.css_bar:after {margin-top:5px;}
.header_wrap .header .header_logo {position:relative; display:inline-block; padding:10px 0; font-size:18px; color:#fff; line-height:20px; font-weight:bold;}
.header_wrap .header .header_logo img {height:20px;}

이렇게 되어있습니다. 말씀대주신데로

a { color:#555; text-decoration:none; }

이부분에 padding:0을 넣어야 하나요? 이렇게 하니 왼쪽여백이 늘어나면서 메뉴영역 터치는 그대로 입니다..

layout.html 은 아래와 같습니다.

  <div class="header_menu_box" cond="$header_menu->list">
      <ul class="header_menu">
      {@ $count = 1 }
      <!--@foreach($header_menu->list as $key => $val)-->
        <!--@if($val['selected'])-->
          {@ $header_menu_1st = $val}
        <!--@end-->
        <li class="list<!--@if($val['selected'])--> list_on<!--@end-->" cond="$val['href']">
          <a class="link menu_{$count}" href="{$val['href']}" <!--@if($val['open_window']=="Y")--> target="_blank"<!--@end-->>
           <i></i>{$val['text']}<!--// <span class="list2_icon" cond="$val['list']">▲</span> -->
          </a>
        </li>
        <!--// 2차메뉴 -->
        <li class="list list2<!--@if($val2['selected'])--> list_on<!--@end-->" loop="$val['list']=>$key2,$val2" cond="$val2['link']" style="padding-left: 15px;">
          <a class="link" href="{$val2['href']}" <!--@if($val2['open_window']=="Y")--> target="_blank"<!--@end-->>{$val2['text']}</a>
        </li>
      {@ $count++ }
      <!--@end-->
      </ul>
    </div>
  </div>