가로 메뉴 스타일 "누출"하위 메뉴

Question

다른 수평 하위 메뉴가있는 가로 메뉴가 있습니다. 내가 가진 문제는 스타일링에 있습니다.

: I는 MAINMENU 요소가 활성화되고, 대응하는 하위 메뉴가 표시 될 때 다음의 종류의 착색 MAINMENU 요소는 다음 이미지로 두 메뉴 간의 공백을 덮 출혈 있도록 만들려고하고

위의 그림을 명확히하기 위해 내가 찾고있는 대략적인 근사값을 이미지로 처리했습니다. 내가 CMS에서이 일을하고

때문에이 코드의 근사치는 단순 제작 :

는 막연한 생각을 내가 만든 어떤 코드를 제공하지 않은 때문에

<nav id="mainmenu"> 
     <ul> 
      <li>Main Menu 1</li> 
     </ul> 
</nav> 

<nav id="submenu"> 
     <ul> 
      <li>Submenu 1</li> 
     </ul> 
</nav> 

Answer 1

: http://jsfiddle.net/FLnke/

<nav id="mainmenu"> 
    <ul> 
     <li onmouseover="javascript:opensub()" onmouseout="javascript:closesub()" >Main Menu 1 | 
      <div id="submenu"></br> 
    <ul> 
     <li>Submenu 1</li> 
     <li>Submenu 2</li> 
    </ul> 
</div> 
     </li> 
     <li>Main Menu 2</li> 
    </ul>