IE7 unwanted behaviour CSS

[beary]

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 "transparen t". 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 &rsaquo;</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}
 

[Stang02GT]

One thing you have to understand is that each of these browsers render things different then the other. Firefox handles things one way and IE will handle that same thing totally different.

Unfortunately i am unable to provide you with links to resources that can help you, most of with involve the word "hack" and my work blocks all sites containing words like that.

But if you do a google search on CSS IE7 fixes there are loads of articles and information on the issue.

here is one idea that you can attach a different style sheet for IE

http://css-tricks.com/how-to-create-...ly-stylesheet/

[beary]

One thing you have to understand is that each of these browsers render things different then the other. Firefox handles things one way and IE will handle that same thing totally different.

Unfortunately i am unable to provide you with links to resources that can help you, most of with involve the word "hack" and my work blocks all sites containing words like that.

But if you do a google search on CSS IE7 fixes there are loads of articles and information on the issue.

here is one idea that you can attach a different style sheet for IE

http://css-tricks.com/how-to-create-...ly-stylesheet/

Thankyou Stang02GT for your response, I'll look into it.