Einzelnen Beitrag anzeigen
  #1 (permalink)  
Alt 31.05.2015, 00:14
HolgerGr HolgerGr ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 31.05.2015
Beiträge: 2
HolgerGr befindet sich auf einem aufstrebenden Ast
Standard CSS3 Menü seitlich ausklappen

Hallo zusammen,

ich habe vor ein paar Tagen damit begonnen, ein eigenes Wordpress Theme zu basteln. Das bislang Schwierigste daran war ein vernünftiges Menü.

Ich habe dann nach einer Anleitung aus dem Internet eines erstellt. Es sieht eigentlich ganz toll aus und funktioniert auch. Es gibt nur ein Problem. Mein Menü hat drei Ebenen. Die oberste besteht aus den Menüpunkten, die in der Headerleiste immer sichtbar sind. Bei Hover klappt die zweite Ebene nach unten aus. So soll es auch sein. Nun gibt es aber teilweise noch eine dritte Ebene und diese klappt onHover leider wieder nach unten auf, sollte aber zur Seite aufklappen.

Leider finde ich nicht die richtige Stelle wo ich das einbauen muss. Ich bin s chon so weit, dass ich weiß, dass ich da irgendwo ein float: left; einfügen muss....aber wo?

Wäre echt toll wenn mir jemand sagen könnte, wo ich das einfügen muss.

Vielen Dank schon mal im Voraus.

Hier ist der ganze CSS Bereich, der das Menü betrifft:

Code:
#cssmenu,
#cssmenu ul,
#cssmenu li,
#cssmenu a {
	border: none;
	margin: 0;
	padding: 0;
	line-height: 1;
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
}

#cssmenu {
	height: 37px;
	display: block;
	padding: 0;
	margin: 0;
	border: 1px solid;
	border-radius: 0px;
	width: auto;
	border-color: #080808;
}
#cssmenu,
#cssmenu > ul > li > ul > li a:hover {
	background: #3c3c3c;
	background: -moz-linear-gradient(top, #3c3c3c 0%, #222222 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #3c3c3c), color-stop(100%, #222222));
	background: -webkit-linear-gradient(top, #3c3c3c 0%, #222222 100%);
	background: -o-linear-gradient(top, #3c3c3c 0%, #222222 100%);
	background: -ms-linear-gradient(top, #3c3c3c 0%, #222222 100%);
	background: linear-gradient(top, #3c3c3c 0%, #222222 100%);
}
#cssmenu > ul {
	list-style: inside none;
	padding: 0;
	margin: 0;
}
#cssmenu > ul > li {
	list-style: inside none;
	padding: 0;
	margin: 0;
	float: left;
	display: block;
	position: relative;
}
#cssmenu > ul > li > a {
	outline: none;
	display: block;
	position: relative;
	padding: 12px 20px;
	text-align: center;
	text-decoration: none;
	text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);
	font-weight: bold;
	font-size: 13px;
	font-family: Arial, Helvetica, sans-serif;
	border-right: 1px solid #080808;
	color: #ffffff;  
}
#cssmenu > ul > li > a:hover {
	background: #080808;
	color: #ffffff;
}
#cssmenu > ul > li:first-child > a {
	border-radius: 0px 0 0 0px;
}
#cssmenu > ul > li > a:after {
	content: '';
	position: absolute;
	border-right: 1px solid;
	top: -1px;
	bottom: -1px;
	right: -2px;
	z-index: 99;
	border-color: #3c3c3c;  
}

#cssmenu ul li.has-sub:hover > a:after {
	top: 0;
	bottom: 0;
}
#cssmenu > ul > li.has-sub > a:before {
	content: '';
	position: absolute;
	top: 18px;
	right: 6px;
	border: 5px solid transparent;
	border-top: 5px solid #ffffff;
}
#cssmenu > ul > li.has-sub:hover > a:before {
	top: 19px;
}
#cssmenu ul li.has-sub:hover > a {
	background: #3f3f3f;
	border-color: #3f3f3f;
	padding-bottom: 13px;
	padding-top: 13px;
	top: -1px;
	z-index: 999;
}
#cssmenu ul li.has-sub:hover > ul,
#cssmenu ul li.has-sub:hover > div {
	display: block;
}
#cssmenu ul li.has-sub > a:hover {
	background: #3f3f3f;
	border-color: #3f3f3f;
}
#cssmenu ul li > ul,
#cssmenu ul li > div {
	display: none;
	width: auto;
	position: absolute;
	top: 38px;
	padding: 10px 0;
	background: #3f3f3f;
	border-radius: 0 0 5px 5px;
	z-index: 999;
}
#cssmenu ul li > ul {
	width: 200px;
}
#cssmenu ul li > ul li {
	display: block;
	list-style: inside none;
	padding: 0;
	margin: 0;
	position: relative;
}
#cssmenu ul li > ul li a {
	outline: none;
	display: block;
	position: relative;
	margin: 0;
	padding: 8px 20px;
	font: 10pt Arial, Helvetica, sans-serif;
	color: #ffffff;
	text-decoration: none;
	text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5);
}
#cssmenu ul ul a:hover {
	color: #ffffff;
}
#cssmenu > ul > li.has-sub > a:hover:before {
	border-top: 5px solid #ffffff;
}
Ich vergaß die URL zu der Problemseite: http://www.stempel-schilder.de
(Ja, ich weiß, die ist potthässlich aber ich habe den Auftrag sie genauso aussehen zu lassen wie ihre Vorgängerin...nur, dass sie nun unter Wordpress laufen soll)

Das Problem ist u.a. unter Drucksachen/Siebdruck oder unter Schilder/Glasschilder zu finden.

Geändert von HolgerGr (31.05.2015 um 00:45 Uhr) Grund: URL zur Seite vergessen
Mit Zitat antworten
Sponsored Links