我创建了一个简单的菜单和带有标签的子菜单(不允许使用ul元素)。要访问子菜单,用户将鼠标悬停在菜单项上。我使用onmouseover和onmouseout事件来显示或隐藏子菜单,具体取决于选择的项目。 管道(|)用于分隔每个子菜单项,这就是导致我出现问题的原因。
当用户将鼠标悬停在竖线字符上方时,subMenu 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>
这是我的CSS课程
#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;}
答案 0 :(得分:0)
作为评论可能会更好,但我还没有这个特权。 : - /
我的第一个想法是尝试z-index。如果这不起作用,那么使用border-left或right呢?
如果没有别的,我会使用背景图片。哎呀,无论如何,你可以看到更好看的管道!
哈哈,我只想到了一个绝对可怕的解决方案。使用:带有内容的伪类:“|”; IE 7及以下版本不支持:之后,但我们无论如何都不关心它们吧?大声笑。