Я создал простое меню и подменю с тегами (нельзя использовать элементы ul). Для доступа к подменю пользователь наводит указатель мыши на элемент меню. Я использую события onmouseover и onmouseout, чтобы показать или скрыть подменю в зависимости от того, какой элемент выбран.
Трубка (|) используется для разделения каждого элемента подменю, и это вызывает у меня проблемы.
Когда пользователь наводит указатель мыши над символом канала, div subMenu вызывает событие onmouseout, а это не то, что мне нужно. Поэтому я добавил отступ вокруг символа канала и минус, чтобы не было пробелов между символом канала и другими элементами.
Это работает для всех браузеров, включая IE8. Но в IE7 (я еще не тестировал IE6) div подменю вызывает событие onmouseout, когда я касаюсь верхнего бита левой или правой границы элемента span символа pipe.
<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;}