I'm not really sure if this is a CSS issue, but people here before have
been knowledgeable and friendly and so it seems like a good place to
start.
I'm in the process of building a new site for a band that I am working
for, the demo is up at http://newsite.projectcircle3.com
You should be able to hover over the word 'band' in the navigation and
a dropdown menu appears. It is working in FF and Opera but not in IE 6
for some reason.
I have used this script before on another site and it worked fine in
all browsers. Must be missing something really obvious...
Many thanks in advance
Lewis
HTML Snippet:
<div id="navigation" class="nav">
<ul>
<li>
<a href = "/">Home</a></li>
<li>
<a href = "/news">News</a></li>
<li>
<ul>
<li><a class = "top" href ="/bio">biography</a></li>
<li><a href =
"http://www.myspace.com/projectcircle3">mySpace</a>
<li><a href = "/mp3s">MP3s</a>
<li><a href = "/comingsoon">shop</a>
</ul>
<a href = "/bio">Band</a></li>
<li>
<a href = "/journal">Journal</a></li>
<li>
<a href =
"http://www.projectcircle3.com/pictures">Pictures</a></li>
<li>
<a href =
"http://www.forum.projectcircle3.com/">Forum</a></li>
<li>
<a href = "/armyofangels">Army of Angels</a></li>
<li>
<a href = "/contact">Contact Us</a></li>
</ul>
</div>
CSS Snippet:
/*******************
Drop Down Nav
*/
div.nav li ul { /* second-level lists */
display: block;
position: absolute;
margin: 0;
padding: 0;
width: 7em;
left: -999em;
}
div.nav li ul li /* drop down list items */
{
display: block;
margin: 0;
padding: 0;
width: 7em;
/* border-bottom: 1px solid #3D3686;*/
/*background-color: #1E203C; /* 0678B3 */
}
div.nav li ul a /*drop down links*/
{
display: block;
text-align: left;
width: 7em;
padding: 0.3em 0.5em;
margin: -7px 0;}
div.nav li ul a.top {
margin: 2px 0 -7px;
}
div.nav li:hover ul, div.nav li.hover ul { /* lists nested under
hovered list items */
left: auto;}
Javascript code:
sHover = function()
{
var sEls = document.getElementById("nav").getElementsByTagNam e("LI");
for (var i=0; i<sEls.length; i++)
{
sEls[i].onmouseover=function()
{
this.className+=" hover";
}
sEls[i].onmouseout=function()
{
this.className=this.className.replace(/hover/, "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sHover);