Flexbox und CSS Dropdownmenu funzt nicht

[Ahmet]

Guten Abend wünsche ich .

Ich habe mit Flexbox eine Seite gestaltet und wollte ein CSS Dropdownmenu einbinden.Allerdings werden dort position und float befehle verwendet,so das sie von flex ignoriert werden.Was kann ich da machen?Es will nicht aufklappen.

Danke im voraus

[MrMurphy1]

Hallo,

ich finde keinen konreten Quelltext von dir. Deshalb kann ich dir nur das folgende ergoogelte Beispiel anbieten:

http://codepen.io/lawnch/pen/Jbpng/

Gruss

MrMurphy

[ahmet]

Danke für die schnelle Antwort.Die Seite habe ich auch schon gefunden,allerdings spricht es mich nicht so an.Es müsste doch möglich sein trotz allem die Menüs einzubinden, oder ist es dann gar nicht mehr möglich???

Hallo,

ich finde keinen konreten Quelltext von dir. Deshalb kann ich dir nur das folgende ergoogelte Beispiel anbieten:

http://codepen.io/lawnch/pen/Jbpng/

Gruss

MrMurphy

[ahmet]

By the way--- ich habe mir die CSS Datei angeschaut von dem was du mir empfohlen hast,da werden auch position-befehle benutzt,und es funktioniert!!!???? Was mach ich falsch??

Danke für die schnelle Antwort.Die Seite habe ich auch schon gefunden,allerdings spricht es mich nicht so an.Es müsste doch möglich sein trotz allem die Menüs einzubinden, oder ist es dann gar nicht mehr möglich???

Hallo,

ich finde keinen konreten Quelltext von dir. Deshalb kann ich dir nur das folgende ergoogelte Beispiel anbieten:

http://codepen.io/lawnch/pen/Jbpng/

Gruss

MrMurphy

[MrMurphy1]

Hallo

Was mach ich falsch??

Woher sollen wir das wissen wenn du uns keinen Link zu deinen bisherigen Bemühungen gibst? Oder habe ich den übersehen?

Gruss

MrMurphy

[ahmet]

Sorry,,, hier die CSS--

html { background: transparent!important; }

body { margin: 10px auto; max-width: 60em; font-family: sans-serif; color: #333333; display:-webkit-flex; display: flex; -webkit-flex-flow: row wrap; flex-flow: row wrap; }

h1, main, svg { border-radius: 0 8px 8px; border: 1px solid; padding: 10px; margin: 10px; } #hr1 { height:5px; color:#2B619D; border:solid; max-width:60em; }

#hr2 { height:20px; border:solid; color:#8AB5EA; background-color:#8AB5EA; }

h1 { background: #e0e0e0 10px 5px no-repeat; border-color: #d5d5d5; padding-left: 100px; }

main { display: block; /* für IE */ background: #c4ced3; border-color: #8a9da8; min-height: 400px; }

/*div { padding: 1em; margin: 2em auto; width: 20em; height: 10em; background: #f1f3f4;

}*/

h2 { color: #c32e04; }

		header, footer , section{
			border-radius: 0px 0.5em 0.5em;
			border: 1px solid;
			padding: 10px;
			margin: 0px;
			-webkit-flex: 1 100%;
			flex: 1 100%;
		}
		header {
			background: #e0e0e0;
			border-color: #d5d5d5;
		}
		nav {
			width:60em;
			padding: 0px;
			margin: 0px auto;
			border-color: #e7c157;
			-webkit-flex: 1 100%;
			flex: 1 100%;

		}
		section {
		
			background: #F1F3F4;
			border-color: slateblue;
		}
		article {				padding: 10px;

		margin: 10px;
		border-radius: 0px 0.5em 0.5em 0px;
			border: 1px solid;
			background: #ffede0;
			border-color: #df6c20;
			-webkit-flex: 1 1;
			flex: 1 1;
		}
		aside {	padding: 10px;

		margin: 10px;
		border-radius: 0.5em 0px 0px 0.5em;
		border: 1px solid;
			background: #ebf5d7;
			border-color: #8db243;
			-webkit-flex: 1 1;
			flex: 1 1;
		}
		footer {
			background: #e4ebf2;
			border-color: #8a9da8;
		}
	.top-men {
float: right;
margin: 10px 0;
padding: 0;

}

.top-men li { display: inline; list-style-type: none; font-family:"Lucida Sans"; }

.top-men li a { border-left: 1px solid #cccccc; color: #333333; font-size: 11px; padding: 0 4px 0 8px; }

.top-men > li:first-child > a { border-left: none; }

.top-men li a:hover { color: #333333; } nav ul ul { display: none; }

nav ul li:hover > ul {
	display: block;
}

nav ul { background: #efefef; background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);
background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%); background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%); padding: 0 20px; border-radius: 10px;
list-style: none; position: relative;

} nav ul:after { content: ""; clear: both; display: block; }

nav ul li { float: left; } nav ul li:hover { background: #4b545f; background: linear-gradient(top, #4f5964 0%, #5f6975 40%); background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%); background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%); } nav ul li:hover a { color: #fff; }

nav ul li a {
	display: block; padding: 10px 40px;
	color: #000000; text-decoration: none;
}

nav ul ul {
background: #5f6975; border-radius: 0px; padding: 0;
position: absolute; top: 100%;

} nav ul ul li { float: none; border-top: 1px solid #6b727c; border-bottom: 1px solid #575f6a; position: relative; } nav ul ul li a { padding: 15px 40px; color: #fff; } nav ul ul li a:hover { background: #4b545f; }

nav ul ul ul { position: absolute; left: 100%; top:0; }

Hallo

Was mach ich falsch??

Woher sollen wir das wissen wenn du uns keinen Link zu deinen bisherigen Bemühungen gibst? Oder habe ich den übersehen?

Gruss

MrMurphy

[ahmet]

Hier die HTML

<nav> <ul> <li><a href="#">Home</a></li> <ul> <li><a href="#">Photoshop</a></li> <li><a href="#">Illustrator</a></li> <li><a href="#">Web Design</a></li> </ul> <li><a href="#">Tutorials</a></li> <ul> <li><a href="#">Photoshop</a></li> <li><a href="#">Illustrator</a></li> <li><a href="#">Web Design</a></li> </ul> <li><a href="#">Articles</a></li> <ul> <li><a href="#">Photoshop</a></li> <li><a href="#">Illustrator</a></li> <li><a href="#">Web Design</a></li> </ul> <li><a href="#">Inspiration</a></li> </ul> </nav> <body>

<aside>

[MrMurphy1]

Hallo,

hast du dir deine Beiträge mit dem Quellcode mal angeschaut? Aus dem Kuddelmuddel werde ich keine Seite zusammenbasteln. Vielleicht macht sich ja jemand anders die Mühe.

Weiterhin enthält das CSS Anweisungen die mit dem HTML-Teil nichts zu tun haben.

Beschäftige dich bitte auch mit den Grundlagen wie im HTML Listen verschachtelt werden. Das ist bei dir falsch, da ul-Elemente nicht direkt innerhalb übergeordneter ul-Elementen stehen dürfen.

Gruss

MrMurphy