Hi, I'm having an issue with my css menu. It does not work properly in
IE7, it works fine in Firefox and Chrome. I'm not a css expert, and
I'm having a hard time debugging this one. Any help from css pros will
be greatly appreciated. The problem occurs when I roll over the menu
drop down (second level), it dissapears instead of triggering the
rollover action.
In my HTML my menu is:
<div class="menu" align="center" style="margin-left:15px; margin-
top:0px">
<ul>
<li><a class="hide" href="xxx.html"> Hello </a>
<!--[if IE]>
<a href="xxx.html">Hello
<table class="IEmenu"><tr><td>
<![endif]-->
<ul>
<li><a href="A.html" title="K9 Konnect">A</a></li>
<li><a href="B.html" title="K9 Kiosk<">B</a></li>
<li><a class="hide" href="C.html" title="Add-ons">C</a></
li>
</ul>
<!--[if IE]>
</td></tr></table>
</a>
<![endif]-->
In my general CSS I have:
/* 1st level for all browsers */
.menu {
font-family: arial, sans-serif;
width:106px;
height:33px;
position:absolute;
font-size:11px;
top:160px;
width:749px;
}
.menu ul li a, .menu ul li a:visited {display:block; text-
decoration:none; color:#FFCC00; width:104px; height:21px; text-
align:center; border:1px solid #CCCCCC; border-width:1px 1px 0 0;
background:#333333; line-height:19px; font-size:11px; font-
weight:normal; }
.menu ul {padding:0; margin:0; list-style-type: none; }
.menu ul li {float:left; margin-right:1px; position:relative;}
.menu ul li ul {display: none;}
/* not Internet Explorer */
.menu ul li:hover a {color:#FFFFFF; background:#000000;}
.menu ul li:hover ul {display:block; position:absolute; top:22px; left:
0px; width:105px;}
/* 2nd level pull-out static */
.menu ul li:hover ul li a.hide {background:#333333; color:#FFCC00;}
/* 2nd level pulled */
.menu ul li:hover ul li:hover a.hide {width:150px; background:#000000;
color:#FFFFFF;}
.menu ul li:hover ul li ul {display: none;}
/* 2nd level static */
.menu ul li:hover ul li a {display:block; background:#333333;
color:#FFCC00; width:150px;}
.menu ul li:hover ul li a:hover {background:#000000; color:#FFFFFF;} /
* HERE hover 2nd level*/
.menu ul li:hover ul li:hover ul {display:block; position:absolute;
left:151px; top:0; color:#000000;}
/* 3rd level */
.menu ul li:hover ul li:hover ul li a {display:block; width:200px;
background:#333333; color:#FFCC00;}
.menu ul li:hover ul li:hover ul li a:hover {background:#000000;
color:#FFFFFF;}
my IE CSS I have:
.menu ul li a.hide, .menu ul li a:visited.hide {display:none;}
.menu ul li a:hover ul li a.hide {display:none; color:#00FF00;
background:#00FF00;}
/* 1st level hover */
.menu ul li a:hover {color:#FFFFFF; background:#000000;}
.menu ul li a:hover ul {display:block; position:absolute; top:21px;
left:0px; width:105px;}
/* 2nd level pull-out static */
.menu ul li a:hover ul li a.sub {background:#333333; color:#FFCC00;}
/* 2nd level static HERE */
.menu ul li a:hover ul li a {display:block; background:#333333;
color:#FFCC00; width:150px; height:20px; top:0px;}
.menu ul li a:hover ul li a ul {visibility:hidden; }
/* 2nd level hover */
.menu ul li a:hover ul li a:hover {background:#000000; color:#FFFFFF;}
.menu ul li a:hover ul li a:hover ul {visibility:visible;
position:absolute; left:150px; top:0; color:#000;}
/* 3rd level static */
.menu ul li a:hover ul li a:hover ul li a {display:block; width:200px;
background:#333333; color:#FFCC00;}
.menu ul li a:hover ul li a:hover ul li a:hover {background:#000000;
color:#FFFFFF;}
table.IEmenu {border-collapse:collapse; border:0; margin:0; padding:0;
top:0;}
--~--~---------~--~----~------------~-------~--~----~
--
You received this because you are subscribed to the "Design the Web with CSS"
at Google groups.
To post: [email protected]
To unsubscribe: [email protected]
-~----------~----~----~----~------~----~------~--~---
