Sub-Navigation mit CSS, zweispaltig; Im IE klappt es wieder zu

lachender_engel · 12.05.2013

Hallo, Gemeinde.

Ich brauche Eure Hilfe bei der Umsetzung einer Navigation mit Subnavigation (eine Ebene).
Zu sehen ist das Ganze unter

Der Eintrag Navi 1 hat ein Submenü. Dieses ist zweispaltig. Es wird aufgeklappt, durch ein hover des Listelements der Navigation (hier Navi 1).
Soweit ok.

Mein Problem im IE 9 ist nun, dass das Menü wieder zuklappt bzw. ausgeblendet wird, wenn ich das Listelement Navi 1 wieder verlasse. Im Firefox und Chrome bleibt es stehen.

Das große G hat mir keine Lösung gebracht (oder ich suche falsch).
Hat hier jemand eine Idee, wie ich das Menü auch unter IE hinbekomme?

Den Quellcode unter der URL habe ich sehr übersichtlich aufgebaut, so dass ich auf ein extra posten des Codes hier verzichten kann, oder?!

Vielen Dank und schöne Grüße!

YourBrainEatsYou · 16.05.2013

AW: Sub-Navigation mit CSS, zweispaltig; Im IE klappt es wieder zu

Hallo lachender_engel

Ich habe dir eine Kleine Navigation erstellt, die auch im IE funktioniert. Du musst sie nur noch deinen Styling wünschen anpassen.

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Problem Navigation</title>
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/960_12_col.css" />
<style>
/*************************************************************************************************/
body{
	font-family:verdana, arial, sans-serif;
	font-size:62.5%;
	background:#eee;
	position:relative;
	height:100%;
	margin: 0;
	padding: 0;
}

h2{
	font-family:verdana, arial, sans-serif;
	font-style:italic;
	font-size:36px;
	position:relative;
	margin-left: 20px;
	width:950px;
	top: 20px;
}


#content{
	position:relative;
	margin:0 auto;
	width: 950px;
	top:80px;
	height:520px;
	background-color: #fff;
	border: 2px solid #eee;
	border-radius: 4px;
	
}

#vertical-navigation{
	list-style:none;
	margin:0;
	padding:0;
	font-size:1.2em;
	float:left;
	position:relative;
	
	
}
#vertical-navigation li{
	position:relative;
	display: block;
	float:left;
	padding: 0;
	
}

#vertical-navigation li a{
	float:left;
	display:block;
	padding:10px 20px;
	text-decoration:none;
	color:#666;
	text-transform: uppercase;

}


#vertical-navigation li:hover a, 
#vertical-navigation li a:hover{
	background-color:#ddd;
	color:white;
}

#vertical-navigation ul{
	display:none;
	
}

#vertical-navigation li:hover ul{
		display:block;
}

#vertical-navigation ul{
	float:left;
	position:absolute;
	list-style:none;
	margin:0;
	padding-left:0;
	width: 264px;
	top: 34px;
	border: 1px solid #eee;
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
	border-top: none;
}

#vertical-navigation ul li{
	float:left;
	clear:none;
	margin:0;
	padding:0;
	width: 114px;
	color:#999;
	padding-left: 18px;
	border-top: 1px solid #eee;
}

#vertical-navigation li:hover ul li a,
#vertical-navigation ul li a{
	line-height:200%;
	display:block;
	padding:0 6px 0 0;
	float:none;
	text-transform:lowercase;
	color:#999;
	background:none;
}
#vertical-navigation li:hover{
	background-color: #eee;
	display:block;
	color: #fff;
}

</style>

    </head>
    
    <body>
    
        <div id="content">
        <h2>Drop Down Menu mit CSS</h2>
        
        	<nav>
            	<ul id="vertical-navigation">
                	<li class=""><a href="#">Parent Item 1</a></li>
                    <li class=""><a href="#">Parent Item 2</a>
                    	<ul>
                        	<li class=""><a href="#">Child Item 1</a></li>
                            <li class=""><a href="#">Child Item 2</a></li>
                            <li class=""><a href="#">Child Item 3</a></li>
                            <li class=""><a href="#">Child Item 1</a></li>
                            <li class=""><a href="#">Child Item 2</a></li>
                            <li class=""><a href="#">Child Item 3</a></li>
                            <li class=""><a href="#">Child Item 1</a></li>
                            <li class=""><a href="#">Child Item 2</a></li>
                            <li class=""><a href="#">Child Item 3</a></li>
                      
                        </ul>
                    </li>
                    <li class=""><a href="#">Parent Item 3</a>
                    	<ul>
                        	<li class=""><a href="#">Child Item 1</a></li>
                            <li class=""><a href="#">Child Item 2</a></li>
                        </ul>
                    </li>
                    <li class=""><a href="#">Parent Item 4</a></li>
                </ul>
            </nav>
        </div>
    </body>
</html>

Hoffe du kommst mit dem Code weiter.
Bei Fragen einfach fragen

LG YourBrainEatsYou

lachender_engel · 16.05.2013

AW: Sub-Navigation mit CSS, zweispaltig; Im IE klappt es wieder zu

YourBrainEatsYou schrieb:
Hoffe du kommst mit dem Code weiter.
Bei Fragen einfach fragen

LG YourBrainEatsYou

Mensch, da freue ich mir ja ein drittes Loch in den Po. Das klappt ja tatsächlich ;-)
Ich weiß nicht, wie ich Dir dafür danken kann.
Das hilft mir wirklich total weiter!

lachender_engel · 16.05.2013

AW: Sub-Navigation mit CSS, zweispaltig; Im IE klappt es wieder zu

Blöd, zu früh gefreut.
Ich habe herausgefunden, dass Deine Navigationa uch nicht funktioniert, wenn ich das hier in #vertical-navigation einfüge

HTML:

    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff3535',endColorstr='#a80000', GradientType='0');

Das muss ich aber haben, sonst wird im IE der benötigte Hintergrundverlauf nicht angezeigt.
Hast Du eine Idee dazu?

YourBrainEatsYou · 17.05.2013

AW: Sub-Navigation mit CSS, zweispaltig; Im IE klappt es wieder zu

lachender_engel schrieb:
Blöd, zu früh gefreut.
Ich habe herausgefunden, dass Deine Navigationa uch nicht funktioniert, wenn ich das hier in #vertical-navigation einfüge

HTML:

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff3535',endColorstr='#a80000', GradientType='0');

Das muss ich aber haben, sonst wird im IE der benötigte Hintergrundverlauf nicht angezeigt.
Hast Du eine Idee dazu?

Mach doch einfach ein 1px breites Bild mit dem Verlauf und definiere das als background-color. Diese Methode funktioniert überall und du kannst dir deine Plug-ins sparen.

lachender_engel · 18.05.2013

AW: Sub-Navigation mit CSS, zweispaltig; Im IE klappt es wieder zu

YourBrainEatsYou schrieb:
Mach doch einfach ein 1px breites Bild mit dem Verlauf und definiere das als background-color. Diese Methode funktioniert überall und du kannst dir deine Plug-ins sparen.

Ja, danke. Das habe ich dann auch so gemacht. Mit dem Hingergrundbild klappt auch die Navigation im IE. Danke für Deine Hilfe.