tutorials.de Buch-Aktion 05/2012
ERLEDIGT
NEIN
ANTWORTEN
4
ZUGRIFFE
437
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
AUF DIESES THEMA
ANTWORTEN
  1. 23.07.10 15:24 #1
    FunkFlex FunkFlex ist offline Mitglied Silber
    Registriert seit
    May 2010
    Beiträge
    86
    Hi,
    bei meinem Versuch eun horizontales Drop Down Menü zu erstellen, stoße ich auf nen Fehler. Und zwar ordnet sich alles wunderbar horizontal an, nur funktioniert das eigentliche Drop Down nicht.
    Könnt ihr euch mal den Code durchlesen und evtl. mir den Fehler sagen bitte?
    Hier der HTML Text
    HTML-Code:
    	<div id="navigation">
		<div class="outerleft">
<span class="menutag">Parent1</span>
<a class="down-1" href="#">Child1</a>
<a class="down" href="#">Child2</a>

		</div>
		<div class="outer">
<span class="menutag">Parent2</span>
<a class="down-1" href="#">Child1</a>
<a class="down" href="#">Child2</a>
<a class="down" href="#">Child3</a>
<a class="down" href="#">Child4</a>
		</div>
    Und hier das CSS:
    Code :
    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
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168

    #navigation{
    width:780px;
    height:40px;
    margin-left: auto;
    margin-right: auto;
    text-align:center;
    position: relative;
    
}
 
#navigation .outer {
    float: left;
    display: block;
    overflow:hidden;
    font-weight: bold;
    width:130px;
    height:40px;
    line-height:40px;
    text-align:center;
    background-image:url(navbut.gif);
    font-family:Verdana, Geneva, sans-serif;
    font-size:14px;
    
    
}
#navigation .outer:hover{
    float:left;
    display:block;
    font-weight: bold;
    width:130px;
    height:40px;
    line-height:40px;
    text-align:center;
    background-image:url(navbuthov.gif);
    }
#naviation .outer:visited {
    float:left;
    display:block;
    font-weight: bold;
    width:130px;
    height:40px;
    line-height:40px;
    text-align:center;
    background-image:url(navbut.gif);
}
 
#navigation .outerleft {
    float: left;
    display: block;
    overflow:hidden;
    font-weight: bold;
    width:130px;
    height:40px;
    line-height:40px;
    text-align:center;
    background-image:url(navbutleft.gif);
    font-family:Verdana, Geneva, sans-serif;
    font-size:14px;
}
 
#navigation .outerleft:hover {
    float: left;
    display: block;
    overflow:hidden;
    font-weight: bold;
    width:130px;
    height:40px;
    line-height:40px;
    text-align:center;
    background-image:url(navbutlefthov.gif);
    font-family:Verdana, Geneva, sans-serif;
    font-size:14px;
}
#navigation .outerleft:visited {
    float: left;
    display: block;
    overflow:hidden;
    font-weight: bold;
    width:130px;
    height:40px;
    line-height:40px;
    text-align:center;
    background-image:url(navbutleft.gif);
    font-family:Verdana, Geneva, sans-serif;
    font-size:14px;
}
 
#navigation .outerright {
    float: left;
    display: block;
    overflow:hidden;
    font-weight: bold;
    width:130px;
    height:40px;
    line-height:40px;
    text-align:center;
    background-image:url(navbutright.gif);
    font-family:Verdana, Geneva, sans-serif;
    font-size:14px;
}
#navigation .outerright:hover {
    float: left;
    display: block;
    overflow:hidden;
    font-weight: bold;
    width:130px;
    height:40px;
    line-height:40px;
    text-align:center;
    background-image:url(navbutrighthov.gif);
    font-family:Verdana, Geneva, sans-serif;
    font-size:14px;
}
#navigation .outerright:visited {
    float: left;
    display: block;
    overflow:hidden;
    font-weight: bold;
    width:130px;
    height:40px;
    line-height:40px;
    text-align:center;
    background-image:url(navbutright.gif);
    font-family:Verdana, Geneva, sans-serif;
    font-size:14px;
}
a.down-1 {
    margin-top: 1px;
}
a.down, a.down-1 {
display: inline;
width: 130px;
height:40px;
line-height:40px;
padding: 2px 0;
text-decoration: none;
font-weight: normal;
background-image: url(navbut.gif);
}
a:visited.down, a:visited.down-1 {
display: inline;
width: 130px;
height:40px;
line-height:40px;
padding: 2px 0;
text-decoration: none;
font-weight: normal;    
background-image: url(navbut.gif);
}
a:hover.down, a:hover.down-1 {
display: inline;
width: 130px;
height:40px;
line-height:40px;
padding: 2px 0;
text-decoration: none;
font-weight: normal;
background-image: url(navbuthov.gif);
 
}
span.menutag {
    display:block;
    cursor:default;
}
span.menutag:hover {
    display: block;
    cursor:default;
}

    Vielen Dank schonmal!
    Gruß FunkFlex
     
    Zitieren Zitieren
  2. 23.07.10 15:33 #2
    CPoly CPoly ist offline Mitglied Weizenbier
    tutorials.de Premium-User
    Registriert seit
    Sep 2009
    Beiträge
    2.445
    Du definierst bei #navigation und jeweils bei .outer und .outerleft eine feste Höhe (40px). Damit die Menüelemente sichtbar werden, musst du die Eigenschaft "overflow" auf "visible" setzen.

    Code css:
    1
2
3
4
5
6
7

    #navigation .outer {
    overflow:visible;
}
 
#navigation .outerleft {
    overflow:visible;
}
     
    Zitieren Zitieren
  3. 23.07.10 16:47 #3
    FunkFlex FunkFlex ist offline Mitglied Silber
    Registriert seit
    May 2010
    Beiträge
    86
    Wenn ich den Overflow nun auf visible setze, zeigt er mir die Menüpunkte, die eigentlich aufklappen sollten aber dauerhaft an.
    Weiss nicht jemand des rätsels lösung
     
    Zitieren Zitieren
  4. 23.07.10 18:40 #4
    CPoly CPoly ist offline Mitglied Weizenbier
    tutorials.de Premium-User
    Registriert seit
    Sep 2009
    Beiträge
    2.445
    Hast du den bisherigen Ansatz selbst geschrieben?
    Vom Prinzip her fehlt da sowas
    Code css:
    1
2
3
4
5
6

    .outerleft a {
    display:none;
}
.outerleft:hover a {
    display:block;
}

    So ganz blicke ich deinen Aufbau aber nicht. Du solltest erstmal etwas aufräumen, denn das hier
    Code css:
    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

    #navigation .outerleft:visited {
    float: left;
    display: block;
    overflow:hidden;
    font-weight: bold;
    width:130px;
    height:40px;
    line-height:40px;
    text-align:center;
    background-image:url(navbutleft.gif);
    font-family:Verdana, Geneva, sans-serif;
    font-size:14px;
}
 
#navigation .outerright {
    float: left;
    display: block;
    overflow:hidden;
    font-weight: bold;
    width:130px;
    height:40px;
    line-height:40px;
    text-align:center;
    background-image:url(navbutright.gif);
    font-family:Verdana, Geneva, sans-serif;
    font-size:14px;
}

    lässt sich auch einfach so schreiben

    Code css:
    1
2
3
4
5
6
7
8
9
10
11
12
13

    #navigation .outerright, #navigation .outerleft:visited {
    float: left;
    display: block;
    overflow:hidden;
    font-weight: bold;
    width:130px;
    height:40px;
    line-height:40px;
    text-align:center;
    background-image:url(navbutleft.gif);
    font-family:Verdana, Geneva, sans-serif;
    font-size:14px;
}

    Und ich würde empfehlen den Aufbau des Menüs mittels Listenelementen zu machen.
     
    Zitieren Zitieren
  5. 01.08.10 05:58 #5
    Maik Tutorials.de Gastzugang
    Moin,

    Zitat Zitat von CPoly Beitrag anzeigen
    Und ich würde empfehlen den Aufbau des Menüs mittels Listenelementen zu machen.
    So sieht's aus, denn das ist die gängige CSS-Praxis.

    mfg Maik
     
    Zitieren Zitieren
« Kind-Divs in Eltern-Div nebeneinander positionieren | Komisches DIV-Problem »

Ähnliche Themen

  1. CSSPlay Dropdown geht nicht im IE6
    Von UnoDosTres im Forum CSS
    Antworten: 6
    Letzter Beitrag: 15.02.08, 08:52
  2. JS Dropdown-Menü funktioniert nicht im Natscape 7
    Von parawaiter im Forum Javascript & Ajax
    Antworten: 0
    Letzter Beitrag: 12.02.08, 21:04
  3. Dropdown Menü funktioniert im IE nicht immer
    Von Chandini im Forum CSS
    Antworten: 0
    Letzter Beitrag: 28.02.06, 10:19
  4. Dropdown Menü: Wertübergabe funktioniert nicht
    Von Der nette Mann im Forum PHP
    Antworten: 2
    Letzter Beitrag: 17.10.04, 16:49
  5. DropDown Menü funktioniert nicht.Warum?
    Von bigfella im Forum Javascript & Ajax
    Antworten: 1
    Letzter Beitrag: 30.11.03, 12:39