dzjengiskhan
Gebruiker
- Lid geworden
- 26 sep 2007
- Berichten
- 101
Hallo allemaal,
ik ben een navigatie menu aan het maken maar hij doet niet zoals gewenst.
Zodra ik hem open in IE 8 doet hij perfect, open ik hem in Firefox 3 doet hij het niet helemaal goed.
De hoofdlink en eerste sublink zijn niet aanklikbaar in Firefox, terwijl dit wel het geval is in IE.
Kan iemand mij hiermee helpen?
ik ben een navigatie menu aan het maken maar hij doet niet zoals gewenst.
Zodra ik hem open in IE 8 doet hij perfect, open ik hem in Firefox 3 doet hij het niet helemaal goed.
De hoofdlink en eerste sublink zijn niet aanklikbaar in Firefox, terwijl dit wel het geval is in IE.
Kan iemand mij hiermee helpen?
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title> Testpagina</title>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<script type="text/javascript">
/*<![CDATA[*/
function IEHoverPseudo() {
var navItems = document.getElementById("primary-nav").getElementsByTagName("li");
for (var i=0; i<navItems.length; i++) {
if(navItems[i].className == "menubar") {
navItems[i].onmouseover=function() { this.className += " over"; }
navItems[i].onmouseout=function() { this.className = "menubar"; }
}
}
}
window.onload = IEHoverPseudo;
/*]]>*/
</script>
<style type="text/css">
body { font: normal 80% verdana; }
ul#primary-nav,
ul#primary-nav ul {
margin: 0;
padding: 0;
font-size: 100%;
}
ul#primary-nav li {
position: relative;
list-style: none;
}
ul#primary-nav li a {
display: block;
text-decoration: none;
color: #111;
}
/* Fix IE. Hide from IE Mac \*/
* html ul#primary-nav li { float: left; height: 1%; }
* html ul#primary-nav li a { height: 1%; }
/* End */
ul#primary-nav ul {
position: absolute;
display: none;
top: 0;
}
ul#primary-nav li:hover ul ul,
ul#primary-nav li:hover ul ul ul,
ul#primary-nav li.over ul ul,
ul#primary-nav li.over ul ul ul { display: none; } /* Hide sub-menus initially */
ul#primary-nav li:hover ul,
ul#primary-nav li li:hover ul,
ul#primary-nav li li li:hover ul,
ul#primary-nav li.over ul,
ul#primary-nav li li.over ul,
ul#primary-nav li li li.over ul { display: block; } /* The magic */
ul#primary-nav li.menubar {
width: 116px;
height:20px;
background: green;
padding-left:40px;
}
ul#primary-nav li.menubar1 {
left: 116px;
width: 106px;
height:20px;
background: yellow;
padding-left:40px;
}
ul#primary-nav li.menubar2 {
left: 106px;
width: 86px;
height:20px;
background: red;
padding-left:40px;
}
</style>
</head>
<body>
<ul id="primary-nav" class="menuList">
<li class="menubar">
<a href="">Main 1</a>
<ul>
<li class="menubar1">
<a href="">Sub 1</a>
<ul>
<li class="menubar2"><a href="">Last level 1</a></li>
</ul>
</li>
<li class="menubar1">
<a href="">Sub 2</a>
<ul>
<li class="menubar2"><a href="">Last level 2</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>
