zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden CSS3 Menü seitlich ausklappen

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 31.05.2015, 00:14
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
  #2 (permalink)  
Alt 31.05.2015, 14:08
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 24.06.2010
Beiträge: 528
K.Roland wird schon bald berühmt werden
Standard

Zitat:
Zitat von HolgerGr Beitrag anzeigen
Leider finde ich nicht die richtige Stelle wo ich das einbauen muss.
ul ul ul ansprechen.

Neue Regel erstellen.

so:

Code:
}
#cssmenu ul li > ul ul {
    position: absolute;
    left: 190px;
    top: 0;
__________________
MfG Roland
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 31.05.2015, 15:26
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 31.05.2015
Beiträge: 2
HolgerGr befindet sich auf einem aufstrebenden Ast
Standard

Perfekt! Vielen Dank K.Roland.

Ich hatte so gesucht und wusste nicht, dass ich eine zusätzliche Regel hinzufügen musste.
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Horizontales menü (ausrichten und Probs mit CSS3) Paykoman CSS 4 22.10.2014 13:30
horizontales Menü - Untermenü nach oben ausklappen sharkbait CSS 4 09.03.2012 18:36
Überlappende Menüs und fehlendes seitlich aufklappendes Menü SteveB CSS 3 27.04.2011 11:19
CSS3 Transition Tutorial - Menü mit Slide-Effekt im Apple-Style Webstandard Ressourcen 0 05.03.2010 14:03
Darstellungsproblem flohpapa CSS 3 16.12.2009 09:55


Alle Zeitangaben in WEZ +2. Es ist jetzt 14:21 Uhr.