Hello,
I'm a little out of my depth with this one. There's a top dropdown nav menu which is just a bunch of ul and li etc. The style sheet (below) works perfectly with FF and Safari, but IE7 two things are wrong. (The menu is from Stu Nicholl's site.) I'm on Windows XP.
1) The dropdown part is "transparent". Is this some sort of z-index problem?
2) IE7 will only dropdown to the 1st sublevel, but no more. If you move the mouse below that to the next link in the set, the menu disappears.
Is anyone able to point me in the right direction please?
Html snippet
-
<ul id="nav">
-
<li class="top"><a href="index2.php" class="top_link"><span>Home</span></a></li>
-
<li class="top"><a href="calendar/mysqlcalindex.php" class="top_link"><span>Calendar</span></a></li>
-
<li class="top"><a href="javascript: void(0)" id="classes" class="top_link"><span class="down">Classes</span></a>
-
<ul class="sub">
-
<li><a href="classnew.php">New</a></li>
-
<li><a href="classview.php">View or Edit</a></li>
-
<li><a href="javascript: void(0)" class="fly">Usernames to Parents ›</a>
-
<ul>
-
<li>
-
...etc
-
CSS code
-
#nav,
-
#nav ul {padding:0 0 5px 0; margin:0; list-style:none; font: 10px verdana, sans-serif; border:1px solid #3a93d2; background:#3a93d2; position:relative; z-index:200;}
-
#nav {height:25px; padding:0;}
-
-
#nav li {float:left;}
-
#nav li li {float:none;}
-
/* a hack for IE5.x and IE6 */
-
* html #nav li li {float:left;}
-
-
#nav li a {display:block; float:left; color:#d8d8d8; margin:0 10px; height:25px; line-height:25px; text-decoration:none; white-space:nowrap;font-weight:bold}
-
#nav li li a {height:20px; line-height:20px; float:none;}
-
-
#nav li:hover {position:relative; z-index:300; color:#fff}
-
#nav li:hover ul {left:0; top:22px;background:white;}
-
/* another hack for IE5.5 and IE6 */
-
* html #nav li:hover ul {left:10px;background:white;}
-
-
#nav ul {position:absolute; left:-9999px; top:-9999px;}
-
/* yet another hack for IE5.x and IE6 */
-
* html #nav ul {width:1px;}
-
-
/* it could have been this simple if all browsers understood */
-
/* show next level */
-
#nav li:hover li:hover > ul {left:-15%; margin-left:100%; top:-1px;color:black;background:white;font-weight:bold}
-
/* keep further levels hidden */
-
#nav li:hover > ul ul {position:absolute; left:-9999px; top:-9999px; width:auto;color:black;background:white;font-weight:bold}
-
/* show path followed */
-
#nav li:hover > a {text-decoration:none; font-weight:bold;color:white;background:#3a93d2}
-
-
-
/* but IE5.x and IE6 need this lot to style the flyouts and path followed */
-
/* show next level */
-
#nav li:hover li:hover ul,
-
#nav li:hover li:hover li:hover ul,
-
#nav li:hover li:hover li:hover li:hover ul,
-
#nav li:hover li:hover li:hover li:hover li:hover ul
-
{left:-15%; margin-left:100%; top:-1px;color:black;background:white;font-weight:bold}
-
-
/* keep further levels hidden */
-
#nav li:hover ul ul,
-
#nav li:hover li:hover ul ul,
-
#nav li:hover li:hover li:hover ul ul,
-
#nav li:hover li:hover li:hover li:hover ul ul
-
{position:absolute; left:-9999px; top:-9999px;color:black;background:white;font-weight:bold}
-
-
/* show path followed */
-
#nav li:hover a,
-
#nav li:hover li:hover a,
-
#nav li:hover li:hover li:hover a,
-
#nav li:hover li:hover li:hover li:hover a,
-
#nav li:hover li:hover li:hover li:hover li:hover a,
-
#nav li:hover li:hover li:hover li:hover li:hover li:hover a
-
{text-decoration:none; font-weight:bold;color:white;background:#3a93d2}
-
-
/* hide futher possible paths */
-
#nav li:hover li a,
-
#nav li:hover li:hover li a,
-
#nav li:hover li:hover li:hover li a,
-
#nav li:hover li:hover li:hover li:hover li a,
-
#nav li:hover li:hover li:hover li:hover li:hover li a
-
{text-decoration:none; color:black;background:white;font-weight:bold}
-
