Antworten auf deine Fragen:
Neues Thema erstellen

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

lachender_engel

Aktives Mitglied

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

Noch nicht viel geschrieben

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

Aktives Mitglied

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

Noch nicht viel geschrieben

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?

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.
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.614
Beiträge
1.538.351
Mitglieder
67.525
Neuestes Mitglied
mgtaucher
Oben