javascript - 子菜单上方的水平菜单样式 "spill"

Question

我有一个水平菜单和另一个水平子菜单。我的问题是造型。我试图做到这一点，以便在激活主菜单元素并显示相应的子菜单时，主菜单元素会着色，以覆盖两个菜单之间的空白区域，如下图所示:

只是为了澄清上面的图片是我正在搜索的粗略图像处理近似值。

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