Kleines Problem mit CSS Navi

[FleyerShaver]

So ich habe mich noch Mal ein einer kleinen CSS Navi probiert.
So soll sie aussehen mit hover(im FF funktioniert es)


Im IE sieht die Ansicht aber leider so aus ohne hover:


Hier ist mein HTML-Code für das Menü:

<ul id="nav" class="nav" style="z-index:49;">
<li><a href="index.php">Startseite</a></li>
<li><a href="#">Mein Profil</a>
       <div id="sublinks">
<a href="profile.php?lookup=1" id="links"><img src="http://www.html.de/images/fam/image_edit.png" alt="">Profil ansehen</a>
<a href="edit_profile.php" id="links"><img src="http://www.html.de/images/fam/image_edit.png" alt="">Profil bearbeiten</a>
<a href="adv_profile.php" id="linkslast"><img src="http://www.html.de/images/fam/image_edit.png" alt="">Weitere Einstellungen</a>
   
</div>
</li>
<li><a href="adv_profile.php">Weitere Einstellungen</a></li>

<li>
<a href="infusions/interest_group_infusion/interest_group.php.php">Meine Gruppen</a>
</li>
<li>
<a href="useralben/index.php">Meine Fotoalben</a>
</li>
<li>
<a href="adv_profile.php">Freunde einladen</a>
</li>
</ul>

So sieht der dazugehörige CSS-Code aus:

#nav li div { 
    display:none;
}
#nav li:hover div { 
    display:block;
    width:180px;
}
#nav img {
border-width:0px;
}
#sublinks { z-index:50;
            position:absolute;
            margin:auto;
            top:27px;
            height:30px;
            width:180px;
}
#sublinks a#links {
    background:url(images/header_sub_mitte.gif) no-repeat;
}
#sublinks a:hover#links { 
    background:url(images/header_sub_mitte_hover.gif) no-repeat; 
}
#sublinks a#linkslast { 
    background:url(images/header_sub_last.gif) no-repeat; 
}
#sublinks a:hover#linkslast { 
    background:url(images/header_sub_last_hover.gif) no-repeat; 
}

Und das ist für den IE im Header:

  <!--[if IE]>
    <style type="text/css" media="screen">
    body{
    background-color:#EFEFDF;
    color:#000000;
    width:978px;
    padding:13px 1px 13px 2px;
    margin:0 auto;
    behavior:url("csshover.htc");
    }
   </style>
  <![endif]-->

Leider sieht es im IE beschiessen aus, wie oben zu sehen. Wo kommt das her, was mache ich falsch?

 

[koslowski]

Hi,

du hast zwei Möglichkeiten:
The Suckerfish Menue mit JS für den IE.

oder hier ganz ohne JS aber mit CC für den IE.

 

[FleyerShaver]

Hi, danke schon Mal für die Links, ich werde mir das zweite Mal genauer anschauen.

Trotzdem noch eine Frage: Ich habe folgendes Menü mit meinem fast nachgebaut:
Drop-Down-Navigationsmenü mit CSS und (fast) ohne Javascript - Tutorial - Peter Kröner - Die Kunst des Machbaren

Wieso funktioniert das im IE richtig und meins nicht?

PS: Was muss ich an diesem Code ändern, damit er mit meinem funktioniert?

<script type="text/javascript"><!--//--><![CDATA[//><!--

startList = function() {
    if (document.all&&document.getElementById) {
        navRoot = document.getElementById("nav");
        for (i=0; i<navRoot.childNodes.length; i++) {
            node = navRoot.childNodes[i];
            if (node.nodeName=="LI") {
                node.onmouseover=function() {
                    this.className+=" over";
                }
                node.onmouseout=function() {
                    this.className=this.className.replace(" over", "");
                }
            }
        }
    }
}
window.onload=startList;

//--><!]]></script>

 

[koslowski]

Hi,

meine JS-Kenntnisse beschränken sich auf copy/past deshalb mach ich das einfach mal:

/*  =========================================================
Suckerfish Dropdown - JavaScript für IE6 
Quelle: http://htmldog.com/articles/suckerfish/dropdowns/
Datei: suckerfish.js
Autor: Patrick Griffiths (aka HTML Dog)
========================================================== */
sfHover = function() {
   var sfEls = document.getElementById("navibereich").getElementsByTagName("LI");
   for (var i=0; i<sfEls.length; i++) {
      sfEls[i].onmouseover=function() {
         this.className+=" sfhover";
      }
      sfEls[i].onmouseout=function() {
    this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
      }
   }
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

Bei navibereich gehört dann dein Name für das Menü rein.

Eingebunden wird das mit CC im <head>:

<!--[if lt IE 7]>
          <script src="suckerfish.js" type="text/javascript"
          language="JavaScript"></script>
          <![endif]-->

Hoff das hilft dir.;-)

koslowski