J
jcandamo
I have a CSS that is giving me a hard time in IE 7, works in Chrome
and Firefox 3. I'm not a CSS expert, any help will be greatly
appreciated. The problem occurs when hovering over the second level,
it dissapears instead of triggering the rollover event
My general CSS has:
/* 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 has:
..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;}
My HTML has:
<!--#include virtual="/css/grlmenu.txt"-->
<div class="menu" align="center" style="margin-left:15px; margin-
top:0px">
<ul>
<li><a class="hide" href="P.html">P</a>
<!--[if IE]>
<a href="P.html">P
<table class="IEmenu"><tr><td>
<![endif]-->
<ul>
<li><a href="Kr.html" title="K">K</a></li>
<li><a href="C.html" title="C">C</a></li>
<li><a href="O.html" title="O<">O</a></li>
<li><a class="hide" href="N.html" title="N">N</a>
</ul>
<!--[if IE]>
</td></tr></table>
</a>
<![endif]-->
and Firefox 3. I'm not a CSS expert, any help will be greatly
appreciated. The problem occurs when hovering over the second level,
it dissapears instead of triggering the rollover event
My general CSS has:
/* 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 has:
..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;}
My HTML has:
<!--#include virtual="/css/grlmenu.txt"-->
<div class="menu" align="center" style="margin-left:15px; margin-
top:0px">
<ul>
<li><a class="hide" href="P.html">P</a>
<!--[if IE]>
<a href="P.html">P
<table class="IEmenu"><tr><td>
<![endif]-->
<ul>
<li><a href="Kr.html" title="K">K</a></li>
<li><a href="C.html" title="C">C</a></li>
<li><a href="O.html" title="O<">O</a></li>
<li><a class="hide" href="N.html" title="N">N</a>
</ul>
<!--[if IE]>
</td></tr></table>
</a>
<![endif]-->