Goedendag,
Ik ben bezig met een menu voor een website, alleen het probleem is dat deze niet juist functioneert.
Eerst had ik code uit een tutorial gebruikt, maar aangezien deze niet goed functioneerde heb ik de volgende code zelf geschreven, hij werkt erg goed, alleen geeft hij nog 1 fout in IE7. Ik zal eerst maar eens mijn code laten zien.
.
Even een opmerking, ik ga nu alles even stap voor stap uitleggen wat hij doet, dan snappen jullie denk ik de fout beter, jullie zijn geen newbies dat begrijp ik uiteraard, maar zo vind ik het makkelijker uitleggen. Het is maar even dat jullie dit niet verkeerd opvatten...
Zoals je aan de html code ziet maak ik gebruik van meerdere levels UL, het menu moet het volgende doen:
Indien ik met mijn muis over Skill Games beweeg komt het menu met Backgammon en Poker tevoorschijn,
vervolgens als ik bv. over Backgammon beweeg komt het menu met test1 en test2 tevoorschijn.
Nu kan ik het menu met test1 en test2 laten inklappen door terug te bewegen richting Skill Games, ik kan natuurlijk de muis ook gewoon UIT het menu bewegen en dan wordt hij helemaal ingeklapt, allemaal heel logisch.
Maar, indien ik het laatste doe, dus meteen UIT het menu bewegen, terwijl alles is uitgeklapt en dus alles in EEN keer wordt ingeklapt dan ontstaat er een probleem. Want zodra ik dan weer over Skill Games beweeg om het menu weer uit te klappen krijg ik het volgende:

Zoals je ziet is OOK het menu met test1 en test2 uitgeklapt alleen dan zonder tekst, terwijl ik alleen nog maar met de muis op Skill Games sta,
Het valt op te lossen als ik de stijlen in
Als er onduidelijkheden zijn, laat het maar weten!
Met vriendelijke groeten,
Erik v/d Ven
Ik ben bezig met een menu voor een website, alleen het probleem is dat deze niet juist functioneert.
Eerst had ik code uit een tutorial gebruikt, maar aangezien deze niet goed functioneerde heb ik de volgende code zelf geschreven, hij werkt erg goed, alleen geeft hij nog 1 fout in IE7. Ik zal eerst maar eens mijn code laten zien.
.
Cascading Stylesheet:
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
| body { behavior:url("http://localhost/test/csshover.htc"); } .men3{ background:#33CC99; cursor:pointer; } #menu { width: 100%; height: 100%; margin:0px auto; padding:0px auto; background:#FFFFFF; } #menu li { list-style:none; background:#FFFFFF; cursor:pointer; position:relative; } #menu ul{ margin:0px auto; padding:0px; } #menu ul li{ margin:0px auto; display:block; padding:0px auto; } #menu ul ul { position: absolute; top:0; left:100%; margin-top:-2px; margin-left:-2px; } #menu ul ul li.top{ border-top:solid 2px; display:block; border-color:#FFFFFF; } #menu ul ul li { border-top:none; cursor:pointer; background-color:#33CC99; display:block; border:solid #FFFFFF 2px; border-top:0px; width:130px; height:19px; padding:4px 0px 0px 8px; } #menu ul ul ul { position: absolute; top:0; left:100%; margin-left:1px; } div#menu ul ul, div#menu ul li:hover ul ul, div#menu ul ul li:hover ul ul {display: none;} div#menu ul li:hover ul, div#menu ul ul li:hover ul, div#menu ul ul ul li:hover ul {display: block;} |
HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| <ul id="menu"> <li><div class="men2"><a title="test" href="#">Skill Games</a></div> <ul> <li class="top"><a title="test" href="#"><div class="men3">Backgammon</div></a> <ul> <li class="top"><a href="#"><div class="men3">test1</div></a></li> <li><a href="#"><div class="men3">test2</div></a></li> </ul> </li> <li><a title="test" href="#"><div class="men3">Poker</div></a> <ul> <li class="top"><a href="#"><div class="men3">test3</div></a></li> <li><a href="#"><div class="men3">test4</div></a></li> </ul> </li> </ul> </li> </ul> |
Even een opmerking, ik ga nu alles even stap voor stap uitleggen wat hij doet, dan snappen jullie denk ik de fout beter, jullie zijn geen newbies dat begrijp ik uiteraard, maar zo vind ik het makkelijker uitleggen. Het is maar even dat jullie dit niet verkeerd opvatten...
Zoals je aan de html code ziet maak ik gebruik van meerdere levels UL, het menu moet het volgende doen:
Indien ik met mijn muis over Skill Games beweeg komt het menu met Backgammon en Poker tevoorschijn,
vervolgens als ik bv. over Backgammon beweeg komt het menu met test1 en test2 tevoorschijn.
Nu kan ik het menu met test1 en test2 laten inklappen door terug te bewegen richting Skill Games, ik kan natuurlijk de muis ook gewoon UIT het menu bewegen en dan wordt hij helemaal ingeklapt, allemaal heel logisch.
Maar, indien ik het laatste doe, dus meteen UIT het menu bewegen, terwijl alles is uitgeklapt en dus alles in EEN keer wordt ingeklapt dan ontstaat er een probleem. Want zodra ik dan weer over Skill Games beweeg om het menu weer uit te klappen krijg ik het volgende:

Zoals je ziet is OOK het menu met test1 en test2 uitgeklapt alleen dan zonder tekst, terwijl ik alleen nog maar met de muis op Skill Games sta,
Het valt op te lossen als ik de stijlen in
Cascading Stylesheet:
stop, dan doet het menu het wel correct maar dan krijg ik OF problemen in IE6 OF hij wil de stijlen niet correct toepassen, dus.... Heeft iemand een oplossing?1
| #menu a |
Als er onduidelijkheden zijn, laat het maar weten!
Met vriendelijke groeten,
Erik v/d Ven