Hi, I urgently need someone's help. Any kind sou(s) will be greatly appreaciated. I've tried solving this problem for like three days. At first, my problem is I can't hide my sub-links. Now, I'm able to hide all of them. But it can't be showed when hovered. I understand that I do not have javascript n that's causing part of e problem. I believe there's some other things that's creating the problem. I do not what code to put for e javascript too. Please help...
Code:
<tr bgcolor="#cc0000">
<td height="36" colspan="5" valign="middle">
<div id="navcontainer">
<ul id="nav">
<li><a href="hometry.html">Home</a></li>
<li><a href="#">About Us ></a></li>
<ul>
<li><a href="#">History</a></li>
<li><a href="#">Letter from The Club President ></a></li>
<ul>
<li><a href="#">2006-2007 Committee</a></li>
<li><a href="#">Immediate Past Committee</a></li>
</ul>
<li><a href="#">Letter from The Consul-General</a></li>
</ul>
<li><a href="#">News ></a></li>
<ul>
<li><a href="#">News & Upcoming Events ></a></li>
<ul>
<li><a href="#">Monthly Calendar of Events</a></li>
</ul>
<li><a href="#">Current News</a></li>
</ul>
<li><a href="#">Past Events ></a></li>
<ul>
<li><a href="#">2006</a></li>
<li><a href="#">2005</a></li>
<li><a href="#">2004</a></li>
</ul>
<li><a href="#">Membership ></a></li>
<ul>
<li><a href="#">Types of Membership</a></li>
<li><a href="#">Benefits</a></li>
<li><a href="#">Apply Now!</a></li>
<li><a href="#">Directory ></a></li>
<ul>
<li><a href="#">2003-2004</a></li>
<li><a href="#">2004-2005</a></li>
<li><a href="#">2005-2006</a></li>
</ul></ul>
<li><a href="#">Sponsors</a></li>
<li><a href="#">Partners</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Site Map</a></li>
</ul>
</div>
</td>
</tr>
[U][B]CSS:[/B][/U]
#navcontainer
{
background: #CC0000;
margin: 0 auto;
padding: 1em 0 0 0;
font-family: georgia, serif;
height: 35px;
}
/* to stretch the container div to contain floated list */
#navcontainer:after
{
content: ".";
display: block;
line-height: 1px;
font-size: 1px;
clear: both;
}
#nav, #nav ul
{
list-style: none;
padding: 0;
margin: 0;
width: 98%;
font-size: 0.92em;
text-align: center;
background: #cc0000;
line-height: 1;
}
#nav ul
{
position: absolute;
top: 0;
left: 100%;
}
#nav ul ul
{
position: absolute;
z-index: 500;
}
#nav a
{
display: block;
width: 10em;
}
#nav li
{
display: block;
float: left;
width: 8em;
margin: 0;
padding: 0;
position: relative;
}
#nav li ul
{
position: absolute;
left: -999em;
width: 10em;
display: none;
}
#nav li:hover ul
{
left: auto;
}
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);
#nav li ul
{
left: auto;
display: none;
}
#nav li>ul
{
top: auto;
left: auto;
}
#nav li a
{
display: block;
width: 100%;
padding: 0.5em;
border-width: 2px;
border-color: #ffe #aaab9c #ccc #fff;
border-style: solid;
color: #777;
text-decoration: none;
background: #f7f2ea;
}
#navcontainer>#nav li a { width: auto; }
#nav li#active a
{
background: #f0e7d7;
color: #800000;
}
#nav li a:hover, #nav li#active a:hover
{
color: #800000;
background: transparent;
border-color: #aaab9c #fff #fff #ccc;
}
#nav li:hover > ul {
display: block;
}
#nav li:hover ul, li.over ul{ display: block; }
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul
{
left: -999em;
display: block;
}
#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;
display: block
}
#nav li:hover ul, #nav li.sfhover ul {
left: auto;
display: none;
}
#nav li ul ul {
margin: -1em 0 0 10em;
display: none;
}
#nav li:hover ul ul, #nav li.sfhover ul ul {
left: -999em;
display: block;
}
#nav li:hover ul, #nav li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul {
left: auto;
display: block;
}