水平菜单样式“溢出”在子菜单上

Question

我有一个水平菜单和另一个水平子菜单。我遇到的问题是造型。我想使它这样，当一个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>