I am just getting into the logic behind CSS and javascript (I'm coming from a VB background), and I'm trying to figure out why I can't get my JS-run dropdown menu to align its child items directly to the left of their parent items. The child items of the main list items align from the center of the parent going right, while the 2nd lvl child items align WAY over to the right. I can't figure this out for the life of me.
Here is my code thus far:
I don't think this is a javascript problem since it seems to be a layout issue. Hopefully someone can see the simple mistake and enlighten me.
All help appreciated!
Here is my code thus far:
Code:
<style type="text/css"> body { font: 78%/1.5 arial, helvetica, serif; background: black url(bgbaba.gif); text-align: center; padding: 0; margin: 2em; }
#nav, #nav ul { float: center; width: 63em; list-style: none; line-height: 1; background: #990000; font-weight: bold; padding: 0; border: solid #eda; border-width: 1px 0; margin: 0 0 1em 0; }
#nav a { display: block; width: 10em; w\idth: 6em; color: white; text-decoration: none; padding: 0.25em 2em; }
#nav a.daddy { background: url(rightarrow2.gif) center left no-repeat; }
#nav li { float: left; padding: 0; width: 10em; }
#nav li ul { position: absolute; left: -999em; height: auto; width: 14.4em; w\idth: 13.9em; font-weight: normal; border-width: 0.25em; margin: 0; }
#nav li li { padding-right: 1em; width: 13em }
#nav li ul a { width: 13em; w\idth: 9em; }
#nav li ul ul { margin: -1.00em 0 0 14em; }
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul { left: -999em; }
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { left: auto; }
#nav li:hover, #nav li.sfhover { background: #eda; }
</style>
<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+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//--><!]]></script>
</HEAD>
<body>
<ul id="nav">
<li><a href="#">HOME</a></li>
<li><a href="#">EVENTS</a></li>
<li><a href="#" class="daddy">MEMBERS</a>
<ul>
<li><a href="#">CURRENT</a></li>
<li><a href="#">ALUMNI</a></li>
</ul>
</li>
<li><a href="#" class="daddy">SONGS</a>
<ul>
<li><a href="#" class="daddy">ENGLISH</a>
<ul>
<li><a href="#">CURRENT</a></li>
<li><a href="#">YESTERYEAR</a></li>
</ul>
</li>
<li><a href="#" class="daddy">HEBREW</a>
<ul>
<li><a href="#">CURRENT</a></li>
<li><a href="#">YESTERYEAR</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#" class="daddy">MULTIMEDIA</a>
<ul>
<li><a href="#">PICTURES</a></li>
<li><a href="#">SOUND BYTES</a></li>
</ul>
</li>
<li><A href="#">STORE</A></li>
</ul>
</body>
</html>I don't think this is a javascript problem since it seems to be a layout issue. Hopefully someone can see the simple mistake and enlighten me.
All help appreciated!
