CSS: Menü ein- und ausblenden

Hallo,

ich erstelle gerade ein Navigationsmenü mit CSS. Leider kann ich das Untermenü nicht ein- und ausblenden. Habe ich hier was falsches gemacht?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
.navigation {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	
        margin-bottom: -99999px !important;
        padding-bottom: 99999px !important;
}

nav {
	background-color: #FFFFFF;
        overflow: hidden;
	border-top: 3px solid #668BCC;
	border-bottom: 3px solid #668BCC;
}

nav ul {
	list-style-type: none;
	padding: 0;
	margin: 0;
}

nav ul li {
	display: inline-block;
	padding: 10px 0 0 40px;
}

nav ul li ul {
	text-align: left;
	position: absolute;
	background-color: #FFFFFF;
	top: 160px;
	-moz-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
	-webkit-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
	box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
	opacity: 0;
	max-height: 0px;
	overflow: hidden;
}

nav ul li ul li {
	display: block;
	padding: 2px 8px;
}

Bitte markiere auch die Kommentare, die zur Lösung des Beitrags beigetragen haben

Content-ID: 349282

Url: https://administrator.de/forum/css-menue-ein-und-ausblenden-349282.html

Ausgedruckt am: 04.04.2025 um 14:04 Uhr

6 Kommentare

Neuester Kommentar

Hallo,
Wie kommst du da drauf das es so überhaupt funktionieren kann?
Hast du das irgendwo kopiert oder kpl. selber ohne Vorlage erstellt?

Du wirst hier noch etwas JavaScript brauchen.

Moin,

@wiesi200
Es geht auch ohne Javascript

Und hier mal ein Beispiel (von mir) mit fertigem CSS und einem HTML-Auszug.
die CSSmuss dann via dem LINK-Tag noch in die HTML-eingebunden werden, wenn die css-Klassen in einer dedizierten Datei stehen (so wie bei mir):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
.dropbtn {
    background-color: grey;
    color: white;
    padding: 8px;
    font-size: 12px;
    border: none;
    cursor: pointer;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
	font-size: 11px;
    color: black;
    padding: 6px 6px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {
	background-color: #E31E27;
	color: white;
	font-size: 11px;
}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown:hover .dropbtn {
    background-color: #E31E27;
}

.active {
    background-color: #4CAF50;
}

Und eingebunden in der HTML/ PHP-Seite wurde dass dann wie folgt:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 ALIGN=LEFT BGCOLOR=grey>
 <TR>
  <TD>
   <DIV class="dropdown">  
    <BUTTON class="dropbtn">Main 1</Button>  
    <DIV class="dropdown-content">  
     <A href="index.php?main=main1k&arg2=sub1"> Sub 1</A>  
     <A href="index.php?main=main1k&arg2=sub2"> Sub 2 </A>  
     <A href="index.php?main=main1k&arg2=sub3"> Sub 3 </A>  
    </DIV>
   </DIV>
  </TD>
  <TD>
   <DIV class="dropdown">  
    <BUTTON class="dropbtn">Main 2</Button>  
    <DIV class="dropdown-content">  
     <A href="index.php?main=main2k&arg2=sub1"> Sub 1</A>  
     <A href="index.php?main=main2k&arg2=sub2"> Sub 2 </A>  
     <A href="index.php?main=main2k&arg2=sub3"> Sub 3 </A>  
     <A href="index.php?main=main2k&arg2=sub4"> Sub 4 </A>  
    </DIV>
   </DIV>
  </TD>
 </TR>
</TABLE>

Ich habe mir das damals ich glaube von hier erarbeitet.

Gruß
em-pie

Ja ohne geht es auch. Nur hätte ich da immer Probleme mit Mobilen Endgeräten.

Aber meine Vermutung hier das er sich was zusammen Kopiert hat und eben das JavaScript vergessen hat.

Der Beitrag von em-pie hat mir weitergeholfen. Danke!

Zitat von @wiesi200:

Ja ohne geht es auch. Nur hätte ich da immer Probleme mit Mobilen Endgeräten.

Jo, da macht JS natürlich wiederum sinn

Aber meine Vermutung hier das er sich was zusammen Kopiert hat und eben das JavaScript vergessen hat.

Gehe ich auch mal von aus. Die ganzen nav, ul, li, ... "Tags" sehen sehr stark nach C&P aus.
Ich nehme auch mal an, dass er nicht wirklich recherchiert hat, was welches Klassenattribut hier genau bedeutet...

@to:
Und, an welcher Stelle hatte es bei dir gehakt?
ODer verwendest du jetzt einfach überall ein rotes Hauptmenü mit grauen Submenüs? :-P
Würde vermutlich auch Anderen helfen, sollten die mal ähnliche Probleme haben