Deutschland United States United Kingdom
ContentLion - Open Source CMS

CSS Menü mit 2 Submenüs

CSS Menü mit 2 Submenüs

Hallo Leute!

Ich hoffe ihr könnt mir weiterhelfen. Ich habe mir ein Menü gemacht das sich ausklappen lässt mit Hilfe von CSS. Jetzt möchte ich allerdingst das ich noch ein Untermenü habe. Wenn auf Berichte gefahren wird klappt das erste Untermenü aus also Berichte -> Testberichte etc... jetzt möchte ich wenn man auf Testberichte geht das rechts davon die Punkte Xbox etc.. steht. Das bekomme ich einfach nicht hin.

Könnt ihr mir da weiterhelfen:

Quellcode

 
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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Test</title>
<style type="text/css">
#menu {
  font-size:19px;
  position:absolute; 
  font-family: 'WOL_SL','Segoe UI Semilight','Segoe UI',Tahoma,Helvetica,sans-serif;
}

#menu ul {
  list-style-type:none;
  list-style-image:none;
  margin:0px;
  padding:0px;
}

#menu li.topmenu {
  float:left;
}

.topmenu a {
  float:left;
  height:31px;
  text-align:center;
}

.topmenu ul{
  display:none;
}

.topmenu a, .submenu a{
  padding:1px 5px;
  /*border:1px solid #ADADAD;*/
  border-collapse:collapse;
  color:black;
  /*font-weight:bold;*/
  text-decoration:none;
  background-color:#E2E2E2;
  margin:0;  
  width:178px;
}

.submenu a{
  font-size:12px;
  height: 20px;
  position:relative;
  clear:both; 
}

#menu a:hover, .topmenu.on a {
  color:#4C4C4C;
  background-color:#ADADAD;
}

.topmenu:hover ul {
  display:block;  
  z-index:500;
}

	
</style>
	
</head>
<body>
  <div id="menu">
					<ul>
					  <li class="topmenu">
						<a href="index.php?include=home">Home</a
					  </li>
					  <li class="topmenu">
						<a href="index.php?include=reports&page=1">Berichte</a>
						<ul>
							<li class="submenu">
								<a href="">Testberichte</a>
							</li>
							<li class="submenu">
								<a href="">Filmkritiken</a>
							</li>
							<li class="submenu">
								<a href="">sonstige Berichte</a>
							</li>
						</ul>
					  </li>
					  <li class="topmenu">
						<a href="">Releaseliste</a>
					  </li>
					  <li class="topmenu">
						<a href="index.php?include=episodes&page=1">Folgen</a>
					  </li>
					</ul>
				</div>
</body>
</html>


lg Grunt

Ein bisschen was hab ich für dich schon gebaut, kannst ja nochmal wegen dem Platz dazwischen schauen. Wenn nicht, kann ich auch nochmal gucken:

PHP-Quelltext

 
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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Test</title>
<style type="text/css">
#menu {
  font-size:19px;
  position:absolute; 
  font-family: 'WOL_SL','Segoe UI Semilight','Segoe UI',Tahoma,Helvetica,sans-serif;
}

#menu ul {
  list-style-type:none;
  list-style-image:none;
  margin:0px;
  padding:0px;
}

#menu li.topmenu {
  float:left;
}

.topmenu a {
  float:left;
  height:31px;
  text-align:center;
}

.topmenu ul{
  display:none;
}

.topmenu a, .submenu a{
  padding:1px 5px;
  /*border:1px solid #ADADAD;*/
  border-collapse:collapse;
  color:black;
  /*font-weight:bold;*/
  text-decoration:none;
  background-color:#E2E2E2;
  margin:0;  
  width:178px;
}

.submenu a{
  font-size:12px;
  height: 20px;
  position:relative;
  clear:both; 
}

#menu a:hover, .topmenu.on a {
  color:#4C4C4C;
  background-color:#ADADAD;
}

.topmenu:hover ul {
  display:block;  
  z-index:500;
}

.subsubmenu
{
    position:relative;
    left: 188px;
    top:-22px;
    display:none;
}

.submenu:hover .subsubmenu
{
    display:block;
}

    
</style>
    
</head>
<body>
  <div id="menu">
                    <ul>
                      <li class="topmenu">
                        <a href="index.php?include=home">Home</a>
                      </li>
                      <li class="topmenu">
                        <a href="index.php?include=reports&page=1">Berichte</a>
                        <ul>
                            <li class="submenu childs">
                                <a href="">Testberichte</a>
                                <ul>
                                    <li class="subsubmenu">
                                        <a href="">Testberichte</a>
                                    </li>
                                </ul>
                            </li>
                            <li class="submenu">
                                <a href="">Filmkritiken</a>
                            </li>
                            <li class="submenu">
                                <a href="">sonstige Berichte</a>
                            </li>
                        </ul>
                      </li>
                      <li class="topmenu">
                        <a href="">Releaseliste</a>
                      </li>
                      <li class="topmenu">
                        <a href="index.php?include=episodes&page=1">Folgen</a>
                      </li>
                    </ul>
                </div>
</body>
</html>

Danke für die schnell und Antwort.

Ich habe mich am Wochenende damit gespielt. Das der Abstand unterhalb verschwindet aber ich habe es einfach nicht geschafft. ;(

Zitat von »grunt«

Danke für die schnell und Antwort.

Ich habe mich am Wochenende damit gespielt. Das der Abstand unterhalb verschwindet aber ich habe es einfach nicht geschafft. ;(
Hallo Leute!

Ich hab es schon geschafft ;)

Danke für die Hilfe :thumbsup:

also wenn ich das hier richtig verstehe:

Quellcode

 
1

 <a href="index.php?include=reports&page=1">Berichte</a>


muss ich also praktisch den namen des menus hier angeben (welches ausgeklappt werden soll) wie ich es im admin bereich benannt habe und es dem zufolge auch in der datenbank gespeichert ist? und das im skin?

Ähnliche Themen