Navi Probleme bei IE

Web-D

Hallo,

ich habe mit meiner Navi beim IE (11) Probleme.
Immer wenn ich auf einem Hauptlink klicke springt das Untermenü kurz auf. Bei den anderen Browsern ist das nicht.

Kurze Erklärung:
Ich habe ein Menü mit Untermenüs (Drop-Down Menü).
Wenn ich auf einen einfachen Links klicke - (Beispiel Impressum) - springen die Untermenüs mit auf.

Das scheint an den Code zu liegen. Denke ich. Denn immer wenn ich den lösche passiert das nicht.

Code

[COLOR=black][FONT=Verdana][size=12][COLOR=#222222][FONT=Calibri]Transition : opacity 0.2s linear, visibility 0.2s linear; [/FONT][/COLOR][/SIZE][/FONT][/COLOR]

Da ich diesen aber brauche - denke ich - um den Unterlink aufzuhalten, damit ich nicht ins leere klicke, wenn ich auf das Untermenü möchteweiß ich nicht wie ich das anders lösen kann.

Hätte jemand eine andere Lösung (auch nur für IE)?

Hier der CSS

Code

[size=12][COLOR=#000000][FONT=Calibri]#nav{[/FONT][/COLOR][/SIZE]
[size=12][COLOR=#000000][FONT=Calibri]position:relative;[/FONT][/COLOR][/SIZE]
[size=12][COLOR=#000000][FONT=Calibri]width:900px;[/FONT][/COLOR][/SIZE]
[size=12][COLOR=#000000][FONT=Calibri]margin:auto;[/FONT][/COLOR][/SIZE]
[size=12][COLOR=#000000][FONT=Calibri]}[/FONT][/COLOR][/SIZE]
[size=12][COLOR=#000000][FONT=Calibri]ul#navi{[/FONT][/COLOR][/SIZE]
[size=12][COLOR=#000000][FONT=Calibri]margin:auto;[/FONT][/COLOR][/SIZE]
[size=12][COLOR=#000000][FONT=Calibri]position:relative;[/FONT][/COLOR][/SIZE]
[size=12][COLOR=#000000][FONT=Calibri]float:left;[/FONT][/COLOR][/SIZE]
[size=12][COLOR=#000000][FONT=Calibri]}[/FONT][/COLOR][/SIZE]
[size=12][COLOR=#000000][FONT=Calibri]ul#navi li{[/FONT][/COLOR][/SIZE]
[size=12][COLOR=#000000][FONT=Calibri]display:inline;[/FONT][/COLOR][/SIZE]
[size=12][COLOR=#000000][FONT=Calibri]font-family:'PT Sans', sans-serif;[/FONT][/COLOR][/SIZE]
[size=12][COLOR=#000000][FONT=Calibri]font-size :0.9em;[/FONT][/COLOR][/SIZE]
[size=12][COLOR=#000000][FONT=Calibri]text-align:left;[/FONT][/COLOR][/SIZE]
[size=12][COLOR=#000000][FONT=Calibri]letter-spacing:0.2em;[/FONT][/COLOR][/SIZE]
[size=12][COLOR=#000000][FONT=Calibri]float:left;[/FONT][/COLOR][/SIZE]
[size=12][COLOR=#000000][FONT=Calibri]position:relative;[/FONT][/COLOR][/SIZE]
[size=12][COLOR=#000000][FONT=Calibri]}[/FONT][/COLOR][/SIZE]
[size=12][COLOR=#000000][FONT=Calibri]ul#navi lia.seite{[/FONT][/COLOR][/SIZE]
[size=12][COLOR=#000000][FONT=Calibri]color:#FFFFB9;[/FONT][/COLOR][/SIZE]
[size=12][COLOR=#000000][FONT=Calibri]}[/FONT][/COLOR][/SIZE]
[size=12][COLOR=#000000][FONT=Calibri]ul#navi lia{[/FONT][/COLOR][/SIZE]
[size=12][COLOR=#000000][FONT=Calibri]padding:30px30px 15px 30px;[/FONT][/COLOR][/SIZE]
[size=12][COLOR=#000000][FONT=Calibri]color:#EFEFEF;[/FONT][/COLOR][/SIZE]
[size=12][COLOR=#000000][FONT=Calibri]text-decoration:none;[/FONT][/COLOR][/SIZE]
[size=12][COLOR=#000000][FONT=Calibri]display:inline-block;[/FONT][/COLOR][/SIZE]
[size=12][COLOR=#000000][FONT=Calibri]transition:color0.2s linear, background 0.2s linear;[/FONT][/COLOR][/SIZE]
[size=12][COLOR=#000000][FONT=Calibri]}[/FONT][/COLOR][/SIZE]
[size=12][COLOR=#000000][FONT=Calibri]ul#navi lia:hover, .seite a:hover{[/FONT][/COLOR][/SIZE]
[size=12][COLOR=#000000][FONT=Calibri]background:#3F3F3F;[/FONT][/COLOR][/SIZE]
[size=12][COLOR=#000000][FONT=Calibri]opacity:.8;[/FONT][/COLOR][/SIZE]
[size=12][COLOR=#000000][FONT=Calibri]color:#66cc00;[/FONT][/COLOR][/SIZE]
[size=12][COLOR=#000000][FONT=Calibri]}[/FONT][/COLOR][/SIZE]
[size=12][COLOR=#000000][FONT=Calibri]ul#navili:hover > a{[/FONT][/COLOR][/SIZE]
[size=12][COLOR=#000000][FONT=Calibri]}[/FONT][/COLOR][/SIZE]
[size=12][COLOR=#000000][FONT=Calibri]ul#navili:hover > ul{[/FONT][/COLOR][/SIZE]
[size=12][COLOR=#000000][FONT=Calibri]visibility:visible;[/FONT][/COLOR][/SIZE]
[size=12][COLOR=#000000][FONT=Calibri]opacity:1;[/FONT][/COLOR][/SIZE]
[size=12][COLOR=#000000][FONT=Calibri]}[/FONT][/COLOR][/SIZE]
[size=12][COLOR=#000000][FONT=Calibri]ul#navi ul,ul#navi ul li ul{[/FONT][/COLOR][/SIZE]
[size=12][COLOR=#000000][FONT=Calibri]list-style:none;[/FONT][/COLOR][/SIZE]
[size=12][COLOR=#000000][FONT=Calibri]visibility:hidden;[/FONT][/COLOR][/SIZE]
[size=12][COLOR=#000000][FONT=Calibri]opacity:.8;[/FONT][/COLOR][/SIZE]
[size=12][COLOR=#000000][FONT=Calibri]position:absolute;[/FONT][/COLOR][/SIZE]
[size=12][COLOR=#000000][FONT=Calibri]z-index:99999;[/FONT][/COLOR][/SIZE]
[size=12][COLOR=#000000][FONT=Calibri]width:200px;[/FONT][/COLOR][/SIZE]
[size=12][COLOR=#000000][FONT=Calibri]background:#2F2F2F url(../grafik/header.png);[/FONT][/COLOR][/SIZE]
[size=12][COLOR=#000000][FONT=Calibri]transition:opacity0.2s linear, visibility 0.2s linear;[/FONT][/COLOR][/SIZE]
[size=12][COLOR=#000000][FONT=Calibri]}[/FONT][/COLOR][/SIZE]
[size=12][COLOR=#000000][FONT=Calibri]ul#navi ul{[/FONT][/COLOR][/SIZE]
[size=12][COLOR=#000000][FONT=Calibri]top: 60px;[/FONT][/COLOR][/SIZE]
[size=12][COLOR=#000000][FONT=Calibri]left: 0;[/FONT][/COLOR][/SIZE]
[size=12][COLOR=#000000][FONT=Calibri]}[/FONT][/COLOR][/SIZE]
[size=12][COLOR=#000000][FONT=Calibri]ul#navi ulli ul{[/FONT][/COLOR][/SIZE]
[size=12][COLOR=#000000][FONT=Calibri]top: 0;[/FONT][/COLOR][/SIZE]
[size=12][COLOR=#000000][FONT=Calibri]left:181px;[/FONT][/COLOR][/SIZE]
[size=12][COLOR=#000000][FONT=Calibri]}[/FONT][/COLOR][/SIZE]
[size=12][COLOR=#000000][FONT=Calibri]ul#navi ulli{[/FONT][/COLOR][/SIZE]
[size=12][COLOR=#000000][FONT=Calibri]clear:both;[/FONT][/COLOR][/SIZE]
[size=12][COLOR=#000000][FONT=Calibri]width:100%;[/FONT][/COLOR][/SIZE]
[size=12][COLOR=#000000][FONT=Calibri]border:none;[/FONT][/COLOR][/SIZE]
[size=12][COLOR=#000000][FONT=Calibri]border-bottom:1pxsolid #c9c9c9;[/FONT][/COLOR][/SIZE]
[size=12][COLOR=#000000][FONT=Calibri]}[/FONT][/COLOR][/SIZE]
[size=12][COLOR=#000000][FONT=Calibri]ul#navi ulli a{[/FONT][/COLOR][/SIZE]
[size=12][COLOR=#000000][FONT=Calibri]background:none;[/FONT][/COLOR][/SIZE]
[size=12][COLOR=#000000][FONT=Calibri]padding:15px20px;[/FONT][/COLOR][/SIZE]
[size=12][COLOR=#000000][FONT=Calibri]color:#EFEFEF;[/FONT][/COLOR][/SIZE]
[size=12][COLOR=#000000][FONT=Calibri]text-decoration:none;[/FONT][/COLOR][/SIZE]
[size=12][COLOR=#000000][FONT=Calibri]display:inline-block;[/FONT][/COLOR][/SIZE]
[size=12][COLOR=#000000][FONT=Calibri]border:none;[/FONT][/COLOR][/SIZE]
[size=12][COLOR=#000000][FONT=Calibri]float:left;[/FONT][/COLOR][/SIZE]
[size=12][COLOR=#000000][FONT=Calibri]clear:both;[/FONT][/COLOR][/SIZE]
[size=12][COLOR=#000000][FONT=Calibri]width:160px;[/FONT][/COLOR][/SIZE]
[size=12][COLOR=#000000][FONT=Calibri]}[/FONT][/COLOR][/SIZE]

Alles anzeigen

HTML

<navid="nav">
<ulid="navi">
<li><aclass="seite"href="index.php">Startseite</a></li>
 
<li><a href="#">Leistungen</a>
<ul>
<li><ahref="webdesign.php">&raquo;&nbsp;Webdesign</a></li>
<li><ahref="fotodesign.php">&raquo;&nbsp;Fotodesign</a></li>
<li><ahref="fotoservice.php">&raquo;&nbsp;Fotoservice</a></li>
<li><ahref="cms.php">&raquo;&nbsp;CMS</a></li>
</ul>
</li>
 
<li><ahref="#">Service</a>
<ul>
<li><ahref="webspeicher.php">&raquo;&nbsp;Hosting(Server)</a></li>
<li><ahref="https://webbox17.server-home.org/user" title="Kundenlogin"target="_blank">&raquo;&nbsp;Kundenlogin</a></li>
<li><ahref="faq.php">&raquo;&nbsp;Hilfe /FAQ</a></li>
</ul>
</li>
 
<li><ahref="kontakt.php">Kontakt</a></li>
<li><ahref="impressum.php">Impressum</a></li>
 
</ul>
</nav>

Alles anzeigen

Hier noch der Link zur Seite.

Liebe Grüße
Andre

djheke

Wundert mich, daß sie überhaupt funktioniert. Oder ist es ein Kopierfehler?

HTML

<!doctype html>
<html>
<head>
<title>navi</title>
<meta charset="UTF-8">
<style>
* {
 margin:0;
 padding:0;
}


nav {
 width:900px;
 margin:0 auto; 
}


nav ul {
 list-style:none;
 text-align:center;
 background:#000;
}


nav li {
 display:inline-block;
 position:relative;
}


nav ul ul {
 position:absolute;
 left:-9999em;
 text-align:left;
}


nav li li {
 width:200px;
}
nav a {
 padding:10px;
 color:#fff;
 text-decoration:none;
 display:block;
}


nav a:hover{
 background:#3F3F3F;
 color:#66cc00;
}


nav li:hover ul {
top: auto;
left: 0;
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="index.php">Startseite</a></li>
 <li><a href="#">Leistungen</a>
<ul>
<li><a href="webdesign.php">Webdesign</a></li>
<li><a href="fotodesign.php">Fotodesign</a></li>
<li><a href="fotoservice.php">Fotoservice</a></li>
<li><a href="cms.php">CMS</a></li>
</ul>
</li>
<li><a href="#">Service</a>
<ul>
<li><a href="webspeicher.php">Hosting(Server)</a></li>
<li><a href="https://webbox17.server-home.org/user" title="Kundenlogin"target="_blank">Kundenlogin</a></li>
<li><a href="faq.php">Hilfe /FAQ</a></li>
</ul>
</li>
<li><a href="kontakt.php">Kontakt</a></li>
<li><a href="impressum.php">Impressum</a></li>
</ul>
</nav>
</body>
</html>

Alles anzeigen

Web-D

Hallo,

Zitat von djheke

Wundert mich,daß sie überhaupt funktioniert. Oder ist es ein Kopierfehler?

Ja scheint so, was du hier kopiert hast geht auch nicht. Ich hatte doch den richtigen Code schon. Vielleicht nochmal die CSS als Link.
Aber du darfst die css nicht vergessen.

Und das ist der HTML Code für die Navi

HTML

<nav id="nav">
<ul id="navi">
<li><a class="seite" href="index.php">Startseite</a></li>
<li><a href="#">Leistungen</a>
<ul>
<li><a href="webdesign.php">&raquo;&nbsp;Webdesign</a></li>
<li><a href="fotodesign.php">&raquo;&nbsp;Fotodesign</a></li>
<li><a href="fotoservice.php">&raquo;&nbsp;Fotoservice</a></li>
<li><a href="cms.php">&raquo;&nbsp;CMS</a></li>
</ul>
</li>
<li><a href="#">Service</a>
<ul>
<li><a href="webspeicher.php">&raquo;&nbsp;Hosting (Server)</a></li>
<li><a href="https://webbox17.server-home.org/user" title="Kundenlogin" target="_blank">&raquo;&nbsp;Kundenlogin</a></li>
<li><a href="faq.php">&raquo;&nbsp;Hilfe / FAQ</a></li>
</ul>
</li>
<li><a href="kontakt.php">Kontakt</a></li>
<li><a href="impressum.php">Impressum</a></li>
</ul>
</nav>

Alles anzeigen

Liebe Grüße
Andre

djheke

Kopiere doch mein Code. ist nur etwas abgespeckt und funktioniert.

Tags