Javascript 子菜单边框调用onmouseout事件

我创建了一个带有标签的简单菜单和子菜单（不允许使用ul元素）。要访问子菜单，用户将鼠标悬停在菜单项上。我使用onmouseover和onmouseout事件来显示或隐藏子菜单，具体取决于选择的项目。 管道（|）用于分隔每个子菜单项，这就是导致我出现问题的原因

当用户将鼠标悬停在管道字符上方时，子菜单div调用onmouseout事件，这不是我想要的。因此，我在管道角色周围添加了填充和一个减边距，以便管道角色和其他元素之间没有间隙

这适用于包括IE8在内的所有浏览器。但是在IE7中（我还没有测试IE6），当我触摸管道字符span元素的左边框或右边框的顶部时，子菜单div调用onmouseout事件

    <div id="subMenu" onmouseout="hideSubMenu()" >
        <div id="opinionSubMenu" onmouseover="showOpinionSubMenu()"> 
            <a id="Blogs" href="HTMLNew.htm">BLOGS</a>
            <span class="SubMenuDelimiter">|</span>
            <a id="Comments" href="HTMLNew.htm">COMMENTS</a>
            <span class="SubMenuDelimiter">|</span>
            <a id="Views" href="HTMLNew.htm">VIEWS</a>                 
        </div>
        <div id="learningSubMenu" onmouseover="showLearningSubMenu()">
            <a id="Articles" href="HTMLNew.htm">ARTICLES</a>
            <span class="SubMenuDelimiter">|</span>
            <a id="CoursesCases" href="HTMLNew.htm">COURSES & CASES</a>
            <span class="SubMenuDelimiter">|</span>
            <a id="PracticeImpact" href="HTMLNew.htm">PRACTICE IMPACT</a>                           
        </div>            
    </div>

---

这也许是一个更好的评论，但我还没有这个特权-/

我的第一个想法是尝试z索引。如果这不起作用，那么用左边或右边的边框来代替呢

如果没有别的，我会使用背景图像。见鬼，不管怎样，你都可以得到好看得多的管子

---

哈哈，我刚刚想到了一个非常糟糕的解决办法。用法：伪类后加内容：“|”；IE 7及以下版本不支持：之后，但我们不关心他们，对吗？哈哈。

为什么你不能使用ul和li元素？我不知道为什么我不能使用这些元素。首席设计师让我不要使用它们。也许它在mac电脑上不太好用？？？这些元素是用来制作列表和菜单的，这是制作菜单的标准方法。我会和你的首席设计师谈谈。蹩脚的首席设计师…我已经将div改为ul和li，这样我可以向首席设计师展示，我回到第1格，在那里我悬停在li和onmouseout事件之间的一个部分

#subMenu{
padding:10px 0px;
background-color:#F58F2D;
font-weight:normal;
text-decoration:none;        
font-family:Lucida Sans Unicode;
font-size:14px;    
float:left;
width:100%;
display:none;}

#Blogs, #Comments, #Views, #Articles
{        
     padding:10px 5px;
     background:none repeat scroll 0 0 transparent;
     color:#000000;
     font-weight:normal;
     text-decoration:none;
     border:solid 1px black;}

#Blogs:hover, #Comments:hover, #Views:hover, #Articles:hover{
color:#ffffff;
text-decoration:none;}

.SubMenuDelimiter{
padding:10px 5px;    
margin:10px -5px;}