Hiroi
Legacy Member
Ik ben bezig voor op mijn site een drop down menu te maken, het lukt me om de hoofditem te zien mqqr de subs zie ik niet
html:
<!-- start header -->
<script language="JavaScript">
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls.onmouseover=function() {
this.className+=" ie_does_hover";
}
sfEls.onmouseout=function() {
this.className=this.className.replace(new RegExp(" ie_does_hover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>
<ul id="menu">
<li><a href="#">Main item 1</a>
<ul>
<li><a href="#">Sub item 1.1</a></li>
<li><a href="#">Sub item 1.2</a></li>
<li><a href="#">Sub item 1.3</a></li>
<li><a href="#">Sub item 1.4</a></li>
</ul>
</li>
<li><a href="#">Main item 2</a>
<ul>
<li><a href="#">Sub item 2.1</a></li>
<li><a href="#">Sub item 2.2</a></li>
<li><a href="#">Sub item 2.3</a></li>
<li><a href="#">Sub item 2.4</a></li>
<li><a href="#">Sub item 2.5</a></li>
</ul>
</li>
<li><a href="#">Main item 3</a>
<ul>
<li><a href="#">Sub item 3.1</a></li>
<li><a href="#">Sub item 3.2</a></li>
</ul>
</li>
</ul>
<!-- end header -->
CSS:
/* Menu */
}
/* Menu */
#menu {
float: center;
width: 900px;
height: 50px;
background: url(images/picture1.gif) no-repeat center top;
}
#menu ul {
padding: 0;
margin: 0;
list-style: none;
}
#menu li {
float: left;
width: 120px;
}
#menu ul {
position: absolute;
width: 120px;
left: -1000px;
}
#menu li:hover ul, #menu li.ie_does_hover ul {
left: auto;
background-position: 0 0;
}
#menu a {
display: block;
margin: 20px 13px 15px 13px;
text-decoration: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px
}
#menu a:hover {
background: #AA330F url(images/img04.gif) repeat-x;
color: #FFFFFF;
}
#menu .current_page_item a {
background: #AA330F url(images/img04.gif) repeat-x;
color: #000000;
}
html:
<!-- start header -->
<script language="JavaScript">
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls.onmouseover=function() {
this.className+=" ie_does_hover";
}
sfEls.onmouseout=function() {
this.className=this.className.replace(new RegExp(" ie_does_hover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>
<ul id="menu">
<li><a href="#">Main item 1</a>
<ul>
<li><a href="#">Sub item 1.1</a></li>
<li><a href="#">Sub item 1.2</a></li>
<li><a href="#">Sub item 1.3</a></li>
<li><a href="#">Sub item 1.4</a></li>
</ul>
</li>
<li><a href="#">Main item 2</a>
<ul>
<li><a href="#">Sub item 2.1</a></li>
<li><a href="#">Sub item 2.2</a></li>
<li><a href="#">Sub item 2.3</a></li>
<li><a href="#">Sub item 2.4</a></li>
<li><a href="#">Sub item 2.5</a></li>
</ul>
</li>
<li><a href="#">Main item 3</a>
<ul>
<li><a href="#">Sub item 3.1</a></li>
<li><a href="#">Sub item 3.2</a></li>
</ul>
</li>
</ul>
<!-- end header -->
CSS:
/* Menu */
}
/* Menu */
#menu {
float: center;
width: 900px;
height: 50px;
background: url(images/picture1.gif) no-repeat center top;
}
#menu ul {
padding: 0;
margin: 0;
list-style: none;
}
#menu li {
float: left;
width: 120px;
}
#menu ul {
position: absolute;
width: 120px;
left: -1000px;
}
#menu li:hover ul, #menu li.ie_does_hover ul {
left: auto;
background-position: 0 0;
}
#menu a {
display: block;
margin: 20px 13px 15px 13px;
text-decoration: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px
}
#menu a:hover {
background: #AA330F url(images/img04.gif) repeat-x;
color: #FFFFFF;
}
#menu .current_page_item a {
background: #AA330F url(images/img04.gif) repeat-x;
color: #000000;
}