CSS Dropdown menu probleem

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Frank

Frank

27/04/2008 16:05:00
Quote Anchor link
Ik heb, met wat hulp via google, een css dropdown menu opgesteld voor de site die ik nu aan het bouwen ben maar de hover functie werkt niet goed in Firefox...

Zodra ik met m'n muis over een menu item ga komen de onderstaande items wel tevoorschijn maar deze verdwijnen weer zodra ik met mn muis van het menu item af ga...

Weet iemand misschien wat het probleem is en hoe ik dit kan oplossen?

Dit is de code:

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/menu.css" rel="stylesheet" type="text/css" />
<title>Menu</title>
    <script language="JavaScript">
        sfHover = function() {
        
            var sfEls = document.getElementById("nav").getElementsByTagName("LI");
        
            for (var i=0; i<sfEls.length; i++) {
                sfEls[i].onmouseover=function() {
                    this.className+=" ie_does_hover";
                }

                sfEls[i].onmouseout=function() {
                    this.className=this.className.replace(new RegExp(" ie_does_hover\\b"), "");
                }
            }
        }        
        if (window.attachEvent) window.attachEvent("onload", sfHover);
    </script>

</head>

<body>

    <div>
        <center>
            <ul id="nav">

                <li><a href="index.php">Home</a>
                </li>

                <li><a href="contact.php">Contact</a>
                </li>
                
                <li><a href="about.php">The Band</a>
                </li>
                
                <li><a href="calendar.php">Gigs</a>
                </li>

                <li><a href="#">Interaction</a>
                    <ul>
                        <li><a href="#">Forum</a></li>
                        <li><a href="guestbook.php">Guestbook</a></li>
                    </ul>
                </li>
                
                <li><a href="#">Media</a>
                    <ul>
                        <li><a href="#">Images</a></li>
                        <li><a href="#">Video's</a></li>
                        <li><a href="#">Music</a></li>
                    </ul>
                </li>

            </ul>
        </center>
    </div>
    
    <br id="clearit" />

</body>
</html>


en de CSS:

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
@charset "utf-8";
/* CSS Document */

/*     -------------------------------  Menu Opmaak  -------------------------------     */

#nav, #nav ul {
padding: 3px 0 0 0;
margin: 0;
list-style: none;
}

#nav li {
float: left;
width: 120px;
}

#nav ul {
position: absolute;
width: 120px;
left: -1000px;
}

#nav li:hover ul, #nav li.ie_does_hover ul {
left: auto;
background-position: 0 0;
}

#nav a {
display: block;
margin: 2px 5px 3px 5px;
text-decoration: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1em;
}

ul a{
font-weight: bold;
color: #F60;
cursor: default;
}

ul ul a:link, ul ul a:visited{
font-weight: normal;
color: #CCC;
cursor: pointer;
}

ul ul a:hover, ul ul a:active{
font-weight: normal;
color: #FFF;
cursor: pointer;
}

ul li{
background-color: #CCC;
border-left: 3px solid #FFF;
}

ul ul li{
background-color: #666;
border-top: 3px solid #FFF;
border-left: 0;
}

br:clearit {
    margin: 0;
    padding: 0;
    height: 0;
    clear: both;
}

/* IE only hack \*/
* html ul li, * html ul ul li{
border-bottom: 3px solid #FFF;
}

* html ul ul li{
border-top: 0;
}
/* Einde IE only hack */
[/css]
Gewijzigd op 01/01/1970 01:00:00 door Frank
 
Er zijn nog geen reacties op dit bericht.



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.