Het probleem:
Het menu werkt perfect onder FF 1-2, IE 5-6, Opera, Mac IE-FF, Safari, maar helaas heb ik problemen met IE 7.0.
Hij laadt het menu prima en de mouseovers werken ook prima. Echter als ik even in een ander venster zit en weer terug ga en vervolgens weer over de mouseovers ga blijven deze staan en dus krijg je een overlap van alle submenu items wat dus niet de bedoeling is.
Hoop dat iemand me kan helpen.
Voorbeeld van wat ik bedoel is hier te vinden:
http://www.telgenhof.nl/demo/index.html
De HTML code:
Javascript in de <head>:
De CSS code:
Het menu werkt perfect onder FF 1-2, IE 5-6, Opera, Mac IE-FF, Safari, maar helaas heb ik problemen met IE 7.0.
Hij laadt het menu prima en de mouseovers werken ook prima. Echter als ik even in een ander venster zit en weer terug ga en vervolgens weer over de mouseovers ga blijven deze staan en dus krijg je een overlap van alle submenu items wat dus niet de bedoeling is.
Hoop dat iemand me kan helpen.
Voorbeeld van wat ik bedoel is hier te vinden:
http://www.telgenhof.nl/demo/index.html
De HTML code:
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
| <ul id="nav">
<li><a href="#" class="parent">About Tx</a>
<ul>
<li><a href="#" class="first child">Brand Profile</a></li>
<li><a href="#" class="child">History</a></li>
<li><a href="#" class="child">Why Tx?</a></li>
<li><a href="#" class="child">Employment</a></li>
<li><a href="#" class="child">Contact us</a></li>
</ul>
</li>
<li><a href="/products/" class="parent">Products</a>
<ul>
<li><a href="#" class="first child">Optical Media</a></li>
<li><a href="#" class="child">Flash Memory Cards</a></li>
<li><a href="#" class="child">USB Flash Drives</a></li>
<li><a href="#" class="child">Portable Storage</a></li>
<li><a href="#" class="child">Media Packaging</a></li>
</ul>
</li>
<li><a href="#" class="parent">News Room</a>
<ul>
<li><a href="#" class="first child">Press Releases</a></li>
<li><a href="#" class="child">New Products</a></li>
<li><a href="#" class="child">Press Kit</a></li>
<li><a href="#" class="child">Photo Library</a></li>
<li><a href="#" class="child">Blogs</a></li>
<li><a href="#" class="child">Newsletter</a></li>
</ul>
</li>
<li><a href="#" class="parent">Support</a>
<ul>
<li><a href="#" class="first child">Downloads</a></li>
<li><a href="#" class="child">Manual & Guides</a></li>
<li><a href="#" class="child">FAQ</a></li>
<li><a href="#" class="child">RMA</a></li>
<li><a href="#" class="child">Tutorials</a></li>
<li><a href="#" class="child">Contact us</a></li>
</ul>
</li>
<li><a href="#" class="parent">Where to Buy</a>
<ul>
<li><a href="#" class="first child">List per product</a></li>
<li><a href="#" class="child">List per country</a></li>
</ul>
</li>
<li><a href="#" class="parent">Contact</a>
<ul>
<li><a href="#" class="first child">Contact Us</a></li>
<li><a href="#" class="child">Newsletter</a></li>
</ul>
</li>
<li class="language"><a href="#" class="parent">Language</a>
<ul>
<li><a href="#" class="child">UK</a></li>
<li><a href="#" class="child">DE</a></li>
<li><a href="#" class="child">FR</a></li>
<li><a href="#" class="child">NL</a></li>
</ul>
</li>
</ul> |
Javascript in de <head>:
code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| <script type="text/javascript">
/* <![CDATA[*/
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> |
De CSS code:
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
| /* HEADER */
#header-nav{
width:760px;
background: #000;
height: 45px;
margin:auto;
}
#nav, #nav ul {
padding: 0 0 0 0;
margin: 0;
list-style: none;
}
#nav li {
float: left;
width: auto;
padding-right: 20px;
}
#nav ul li {
float: left;
width: auto;
padding-right: 10px;
}
#nav ul {
position: absolute;
width: auto;
left: -2000px;
}
#nav li:hover ul, #nav li.ie_does_hover ul {
left: auto;
}
#nav li a:hover, #nav li:hover a, #nav li.ie_does_hover a {
left: auto;
color: #e0e0e0;
}
#nav a {
display:block;
text-decoration: none;
font-weight: bold;
text-transform: uppercase;
padding-top: 1px;
padding-bottom: 1px;
}
#nav a.first {
background: url(../images/smalltriangle.gif) center left no-repeat;
padding-left: 16px;
}
ul a.parent{
color: #94948a;
cursor: default;
font-size: 12px;
letter-spacing: 1px;
background-color: #000;
}
ul a.parent:hover, ul a.parent:active{
font-size: 12px;
color: #e0e0e0;
cursor: default;
background-color: #000;
}
ul ul a.child:link, ul ul a.child:visited, ul ul a.child:active{
font-size: 10px;
color: #e0e0e0;
cursor: pointer;
background-color: #000;
}
ul ul a.child:hover{
font-size: 10px;
color: #94948a;
cursor: pointer;
background-color: #000;
}
ul li{
background-color: #000;
}
ul ul li{
background-color: #000;
border-top: 0px solid #000;
border-left: 0;
}
/* IE only hack \*/
* html ul li, * html ul ul li{
border-bottom: 0px solid #000;
}
* html ul ul li{
border-top: 0;
}
/* Einde IE only hack */
#nav li.language {
background: url(../images/triangle.gif) center left no-repeat;
padding-left: 18px;
padding-right:0px;
padding-top:3px;
float:right;
text-align:right;
}
/* END of HEADER */ |
:strip_exif()/u/3333/pumpkin_avatar.gif?f=community){kind=avatar}
:strip_icc():strip_exif()/u/62639/tm.jpg?f=community)
