弹出菜单被position:relative的元素遮挡

打算制作一个CSS弹出式导航菜单, 结果鼠标无法选中弹出菜单中的某些项. 实际上这些项都被下面的元素遮挡了. 如图:

从content元素以下开始弹出菜单都是被挡在后面的, 最终发现问题出在content元素的position上面, 使用了relative, 取消relative的话就正常.

http://css-discuss.incutio.com/?page=OverlappingAndZIndex 这里提到:

Positioned elements paint on top of everything else if they don't have negative z-index.

但是如果将content的z-index设置为负值, 那么content内部的所有元素就会被隐藏, 这样就必须将content以下的所有元素的z-index都设置为负值才行.

所以似乎唯一的办法就是将content的relative取消. 但其实弹出的ul元素是absolute定位的, 只需要ul能够在最上面即可. 所以将弹出菜单的ul都加上z-index:100; 也可以解决问题.

采用哪一种方法应该考虑最少改动原则, 如果先设置了content, 就修改弹出菜单样式, 如果先制作了菜单, 就修改content样式.