<script type="text/javascript">
function showLayer(layerID) {
document.all[layerID].style.visibility = "visible";
}
function hideLayer(layerID) {
document.all[layerID].style.visibility = "hidden";
}
</script>


<div id="menu1" style="width:100px;position:absolute; left:140px; top:12px; visibility : hidden;border:1px solid #000;"><a href="" target="new">메뉴1</a><br />
<a href="" target="new">메뉴2</a><br />
<a href="" target="new">메뉴3</a><br />
<a href="" target="new">메뉴4</a></div>

 

<ul>
    <li style="list-style:none;width:100px;height:30px;background-color:#ccc;margin:0px;padding:0px;color:#000;text-align:center;font-size:15px;"><a href="" onmouseout="javascript:hideLayer('menu1');" onmouseover="javascript:showLayer('menu1');">전체카테고리</a></li>
</ul>

 

해당부분 코드는 이렇게 짜 보았는데요..

문제점이 전체카테고리에 마우스를 hover시키면 서브 메뉴가 오른쪽에 나오고

out시키면 서브메뉴가 오른쪽에서 안보이고 이 부분까지는 잘되오나...

 

거리감? 넓이라고 해야되나요?

전체카테고리라면 전이라는 글자에 마우스를 놓고 오른쪽으로 진행시 서브 메뉴창이 

오픈되지 않는 그런 현상이 있습니다.

 

아무래도 글자 영역에만 주어져서 그런 듯 한데..

어떤식으로 적용을 시켜야 편하게 사용이 가능할까요?