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

Question

我有一个带有另一个水平子菜单的水平菜单。我遇到的问题是造型。我试图这样做，以便当一个mainmenu元素被激活并显示相应的子菜单时，然后主菜单元素着色出血以覆盖两个菜单之间的空白区域，如下图所示：

只是为了澄清上面的图片是一个粗略的图像处理近似我正在寻找的东西。

我在CMS Made Simple中这样做，所以这只是代码的近似值：

 <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>