css mouse-over foutje

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Jason van der Zeeuw

Jason van der Zeeuw

19/01/2011 10:58:32
Quote Anchor link
Hallo allemaal,

Ik heb mijn vorige probleem opgelost met mijn menu op:
www.kapsalon.peak121.com,
de mouse-over werkt in alle browsers..
maar, als je over de sub-menu's heen gaat, gaat de mouse-over al in werking

ik heb al wat dingen geprobeerd maar kan de fout niet vinden/oplossen

ergens in mijn css moet dus iets staan, wat het submenu visible maakt bij mouseover...

kan iemand me hierbij helpen?

alvast bedankt!

Toevoeging op 19/01/2011 11:01:10:

Dit is de CSS
(gekopieerd van www.pruikenoostnederland.nl want het is dezelfde eigenaar en die vroeg om exact hetzelfde menu)
Die site heeft hetzelfde probleem met het menu

Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
.menu{
    width:auto;
    height:128px;
    z-index:999!important;
    margin-top:10px;
    margin-left:10px;
}
/* remove the bullets, padding and margins from the lists */
.menu ul{
    list-style-type:none;
    padding:0;
    margin:0;
    position:relative;
    z-index:999!important;
}
/* make the top level links horizontal and position relative so that we can position the sub level */
.menu li{
    float:left;
    position:relative;
    z-index:999!important;
}

/* use the table to position the dropdown list */
.menu table{
    position:absolute;
    border-collapse:collapse;
    z-index:999!important;
    left:-1px;
    top:25px;
}

/* style all the links */
.menu a, .menu :visited {
    display:block;
    font-size:10px;
    width:135px;
    padding:7px 0;
    color:#ffffff;
    background:#991a1a;
    text-decoration:none;
    margin-right:4px;
    text-align:center;
    font-family:verdana, sans-serif;
    z-index:999!important;

}
/* style the links hover */
.menu :hover{
    color:#4b5053;
    z-index:999!important;

}

/* hide the sub level links */
.menu ul ul {
    visibility:hidden;
    position:absolute;
    z-index:999!important;
    width:135px;
    height:0;
}
/* make the sub level visible on hover list or link */
.menu ul li:hover ul,
.menu ul a:hover ul{
    visibility:visible;
    filter: alpha(opacity=90);
    -khtml-opacity: 0.9;
    -moz-opacity: 0.9;
    opacity: 0.9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
    position: absolute;
    z-index:999!important;
}

.menu #menu li ul{
    position:relative;
    z-index:10000;
    height:auto;
    background:#000000;
}
 
PHP hulp

PHP hulp

22/12/2024 02:36:14
 
Ozzie PHP

Ozzie PHP

19/01/2011 11:22:15
Quote Anchor link
Wat bedoel je hiermee? "als je over de sub-menu's heen gaat, gaat de mouse-over al in werking" Ik zie niet zo snel wat er nu fout gaat.
 
Jason van der Zeeuw

Jason van der Zeeuw

19/01/2011 11:25:27
Quote Anchor link
je hebt bijv.
"kapsalon"
met subkopjes:
over ons
acties
prijslijst
openingstijden

maar dat moet zichtbaar worden wanneer je over "kapsalon" heen gaat,

als ik nu 5cm onder kapsalon doorga, pakt hij de mouse-over al
 
Ozzie PHP

Ozzie PHP

19/01/2011 11:34:05
Quote Anchor link
Probeer dit eens:

.menu ul ul {
visibility:hidden;
display:none;
position:absolute;
z-index:999!important;
width:135px;
height:0;
}
/* make the sub level visible on hover list or link */
.menu ul li:hover ul,
.menu ul a:hover ul{
visibility:visible;
display:block;
filter: alpha(opacity=90);
-khtml-opacity: 0.9;
-moz-opacity: 0.9;
opacity: 0.9;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
position: absolute;
z-index:999!important;
}
Gewijzigd op 19/01/2011 11:34:43 door Ozzie PHP
 
Jason van der Zeeuw

Jason van der Zeeuw

19/01/2011 12:38:52
Quote Anchor link
Ozzie PHP op 19/01/2011 11:34:05:


dat heeft geen invloed :(
 
Joakim Broden

Joakim Broden

19/01/2011 12:40:23
Quote Anchor link
verwijder display, en visible. Je kunt beter de menu balk met left: -99999px; buitenbeeld tonen. En dan bij over left: auto; te doen.
 
Jason van der Zeeuw

Jason van der Zeeuw

19/01/2011 12:45:44
Quote Anchor link
ok thnx dat zal ik proberen

Toevoeging op 19/01/2011 13:00:25:

ik heb al wat dingen geprobeerd, maar ik kom er niet echt uit, het gooit alles door elkaar :P
 
Ozzie PHP

Ozzie PHP

19/01/2011 13:07:37
Quote Anchor link
Heb je je browser cache ververst nadat je mijn oplossing had geprobeerd?
 
Jason van der Zeeuw

Jason van der Zeeuw

19/01/2011 13:09:50
Quote Anchor link
ja, alleen toen werkte de mouse-over niet meer,
en werd het menu verkeerd geplaatst...
misschien doordat ik de waardes op verkeerde plekken heb ingevuld of iets dergelijks
 
Joakim Broden

Joakim Broden

19/01/2011 13:14:20
Quote Anchor link
Laat de code eens zien naar de wijzigingen
 
Jason van der Zeeuw

Jason van der Zeeuw

19/01/2011 13:14:51
Quote Anchor link
ok wacht even :)!

Toevoeging op 19/01/2011 13:17:58:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
.menu{
    width:auto;
    height:128px;
    z-index:999!important;
    margin-top:10px;
    margin-left:10px;
}
/* remove the bullets, padding and margins from the lists */
.menu ul{
    list-style-type:none;
    padding:0;
    margin:0;
    position:relative;
    z-index:999!important;
}
/* make the top level links horizontal and position relative so that we can position the sub level */
.menu li{
    float:left;
    position:relative;
    z-index:999!important;
}

/* use the table to position the dropdown list */
.menu table{
    position:absolute;
    border-collapse:collapse;
    z-index:999!important;
    left:-1px;
    top:25px;
}

/* style all the links */
.menu a, .menu :visited {
    left:-99999px;
    font-size:10px;
    width:135px;
    padding:7px 0;
    color:#ffffff;
    background:#991a1a;
    text-decoration:none;
    margin-right:4px;
    text-align:center;
    font-family:verdana, sans-serif;
    z-index:999!important;

}
/* style the links hover */
.menu :hover{
    color:#4b5053;
    z-index:999!important;
    left:auto;

}

/* hide the sub level links */
.menu ul ul {
    left:-99999px;
    position:absolute;
    z-index:999!important;
    width:135px;
    height:0;
}
/* make the sub level visible on hover list or link */
.menu ul li:hover ul,
.menu ul a:hover ul{
    left:auto;
    filter: alpha(opacity=90);
    -khtml-opacity: 0.9;
    -moz-opacity: 0.9;
    opacity: 0.9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
    position: absolute;
    z-index:999!important;
}

.menu #menu li ul{
    left:-99999px;
    position:relative;
    z-index:10000;
    height:auto;
    background:#000000;
}


/* END MENU*/
 
Ozzie PHP

Ozzie PHP

19/01/2011 15:19:44
Quote Anchor link
werkt het inmiddels?
 
Joakim Broden

Joakim Broden

19/01/2011 16:19:45
Quote Anchor link
je hebt nog een top: element nodig op de submenu ul
 
Jason van der Zeeuw

Jason van der Zeeuw

19/01/2011 19:16:26
Quote Anchor link
met de css zoals ik als laatst had gepost ziet het er zo uit:

www.kapsalon.peak121.com

ik weet niet precies hoe het nou verder moet?
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.