μπέρδεμα με μενού στο css (IE sucks)

[_hopelesscase_]

Κάνω το σάιτ μιας φίλης στον ελεύθερο χρόνο.... Θέλω να το κάνω όπως μου το έχει ζητήσει.

Προσπαθώ να φτιάξω ένα πτυσσόμενο μενού, πήρα έναν κώδικα που βρήκα κάπου.

 

Μιλώ για το μενού που βρίσκεται στα δεξιά της σελίδας

Το "μαθήματα" και "φωτογραφικό υλικό" ανοίγουν δεύτερο μενού από κάτω.

 

Πρόβλημα πρώτο

Στον Firefox φαίνεται "κανονικά" (ό,τι κι αν σημαίνει αυτό, μετά από διάφορους συμβιβασμούς που κατάπια)

Στον Internet Explorer 7, αν ανοίξεις το "μαθήματα" και περάσεις το ποντίκι πάνω από τις κατηγορίες που εμφανίζονται, σε κάποιες από αυτές (π.χ. "διδασκαλείο") εμφανίζεται ένα άσπρο παραλληλόγραμμο στο πλάι.

Το ίδιο αν ανοίξεις και το "φωτογραφικό υλικό".

 

Δεν έχω ιδέα τι μπορεί ν α είναι αυτό το άσπρο, σαν να χάνεται προσωπινά το background.

 

Πρόβλημα δεύτερο

Στον Internet Explorer 6 (α ρε αριστούργημα) δεν ανοίγουν καν τα πτυσσόμενα μενού. Ήξερα για το πρόβλημα με το a:hover αλλά δεν είδα προκοπή ό,τι χακ και να δοκίμασα.

Στον ΙΕ5.5 απαξιώ να κοιτάξω τι συμβαίνει.

 

Ας μιλήσουν οι σοφοί του χώρου, θα ήμουν ευγνώμων:-):-):-):-)

 

Ο κώδικας για το CSS εδώ

 

(Ο κώδικας αφορούσε αρχικά ένα πιο σύνθετο μενού με 3 επίπεδα, πολλά απ' τα ταγκς δεν χρησιμοποιήθηκαν τελικά αλλά δεν έχω κάνει το ξεκαθάρισμα τι είναι απαραίτητο και τι όχι)

>/*---------------------SUBMENU-------------------------*/
#menu2 {list-style-type:none; padding:0; margin:0; width:250px; z-index:100; height:300px; background-color:#222;}
#menu2 ul {list-style-type:none; padding:0; margin:0;}
#menu2 li {float:left; background:#222;}

#menu2 li.sub a{background:#222; color:#ec008c;}
#menu2 li.sub a:hover {background:#222; color:#6772ff; }
#menu2 li.sub, #menu2 li.sub a {display:block; font-size:13px; width:190px; text-decoration:none; cursor:pointer; font-weight:bold;}

#menu2 li.realsub a {background:#222; color:#6772ff; padding-right:20px; width:180px;}
#menu2 li.realsub a:hover  {background:#222; color:#ff66ff; padding-right:20px; padding-left:20px; width:200px; font-size:100%;}
#menu2 table {border-collapse:collapse; padding:0; margin:0;}


#menu2 ul,
#menu2 :hover ul ul,
#menu2 :hover ul :hover ul ul {position:absolute; left:-9999px;}

#menu2 :hover {color:#6772ff; z-index:500;}

#menu2 :hover > a {color:#6772ff; z-index:500;}

#menu2 :hover ul {position:static; height:auto; background:#fff;}
#menu2 :hover ul :hover ul, 
#menu2 :hover ul :hover ul :hover ul {display:block; position:absolute; top:0; height:auto; z-index:500; }

#menu2 :hover ul li, #menu :hover ul li a {background:#222; color:#6772ff;  text-align:right;   }

#menu2 :hover ul :hover {background:#222; position:relative; z-index:100; }



#menu2 :hover ul :hover ul li, 
#menu2 :hover ul :hover ul li a
{background:#fff;}
#menu2 :hover ul :hover ul :hover ul li {background:#fff; z-index:500;}

#menu2 :hover ul :hover ul :hover {z-index:500; background:#fff; }

#menu2 :hover ul :hover ul :hover ul li, 
#menu2 :hover ul :hover ul :hover ul li a {background:#fff;}

#menu2 :hover ul :hover ul :hover ul :hover {background:#fff; }
#menu2 :hover ul :hover ul :hover ul :hover a {color:#6772ff;}