Drop down menu ACTIVE help

JavaScript
1

kdbishop.com/index.shtml

I have having difficulty getting the main level list item to remain active when the page is selected.

Html:

<div id=“glowmenu” class=“glowingtabs”>
<ul>
<li><a href=“/ebook/index.shtml” title=“eBook” rel=“dropmenu1_d”><span>eBook</span></a></li>
<li><a href=“/traditional/index.shtml” title=“Traditional” rel=“dropmenu2_d”><span>Traditional</span></a></li>
<li><a href=“/about/index.shtml” title=“About WordCo” rel=“dropmenu3_d”><span>About WordCo</span></a></li>
<li><a href=“/contact/index.shtml” title=“Contact WordCo” rel=“dropmenu4_d”><span>Contact WordCo</span></a></li>

</ul>
</div>
<br style=“clear: left;” />
<br class=“IEonlybr” />

<!–1st drop down menu –>
<div id=“dropmenu1_d” class=“dropmenudiv_d”>
<a href=“/ebook/about.shtml”>About eBook Indexes</a>
<a href=“/ebook/xml.shtml”>Moving to XML Workflow</a>
<a href=“/ebook/rates.shtml”>Rates</a>
</div>

<!–2nd drop down menu –>
<div id=“dropmenu2_d” class=“dropmenudiv_d” style=“width: 230px;”>
<a href=“…/traditional/index.shtml”>About Indexing</a>
<a href=“…/traditional/subject_list.shtml”>Subject List</a>
<a href=“…/traditional/textbook.shtml”>Textbooks & Professional Books</a>
<a href=“…/traditional/comp_projects.shtml”>Completed Projects</a>
<a href=“…/traditional/rates.shtml”>Rates</a>
</div>

<!–3nd drop down menu –>
<div id=“dropmenu3_d” class=“dropmenudiv_d” style=“width: 200px;”>
<a href=“/about/why_wordco.shtml”>Why WordCo</a>
<a href=“/about/client_list.shtml”>Cliet List</a>
<a href=“/about/team.shtml”>WordCo Team</a>
<a href=“/about/news.shtml”>Press & Newsletters</a>
</div>

<!–4nd drop down menu –>
<div id=“dropmenu4_d” class=“dropmenudiv_d” style=“width: 164px;”>
<a href=“/contact/index.shtml”>Rate Quote</a>
<a href=“/contact/directory.shtml”>Company Directory</a>
<a href=“/contact/services.shtml”>Customer Service</a>
<a href=“/contact/employment.shtml”>Employment</a>

</div>

<script type=“text/javascript”>
//SYNTAX: tabdropdown.init(“menu_id”, [integer OR “auto”])
tabdropdown.init(“glowmenu”, “auto”)
</script>

CSS

.glowingtabs{
float:left;
width:100%;
font-size: 16px;
line-height:normal;
/border-bottom: 1px solid #fff;/ /Add border strip to bottom of menu/
}

.glowingtabs ul{
list-style-type: none;
margin:0;
margin-left: 5px; /Left offset of entire tab menu relative to page/
padding:0;
}

.glowingtabs li{
display:inline;
margin:0;
padding:0;
}

.glowingtabs a{
float:left;
background:url(/images/glowtab-left.png) no-repeat left top;
margin:0;
margin-left: 4px; /spacing between each tab/
padding:0 0 0 14px;
text-decoration:none;
}

.glowingtabs a span{
float:left;
display:block;
background:url(/images/glowtab.png) no-repeat right top;
padding: 10px 22px 10px 8px;
font-weight:normal;
color:#22539d;
}

/* Commented Backslash Hack hides rule from IE5-Mac \/
.glowingtabs a span {float:none;}
/ End IE5-Mac hack */

.glowingtabs a:hover span {
color: #22539d;
}

.glowingtabs a:active span {
color: #22539d;
}

.glowingtabs li.selected a{ /Selected Tab style/
background-position:0 -82px; /Shift background image up to start of 2nd tab image/
}

.glowingtabs li.selected a span{ /Selected Tab style/
background-position:100% -82px; /Shift background image up to start of 2nd tab image/
color: #22539d;
}

.glowingtabs a:hover, .glowingtabs li.selected a:hover{ /onMouseover style/
background-position:0% -82px; /Shift background image up to start of 2nd tab image/
}

.glowingtabs a:hover span, .glowingtabs li.selected a:hover span{ /onMouseover style/
background-position:100% -82px; /Shift background image up to start of 2nd tab image/
}

.glowingtabs a:active, .glowingtabs li.selected a:active{ /onMouseover style/
background-position:0% -82px; /Shift background image up to start of 2nd tab image/
}

.glowingtabs a:active span, .glowingtabs li.selected a:active span{ /onMouseover style/
background-position:100% -82px; /Shift background image up to start of 2nd tab image/
}

/* ######### Style for Drop Down Menu ######### */

.dropmenudiv_d{
position:absolute;
top: 0;
border: 1px solid #c2d2ea; /THEME CHANGE HERE/
border-width: 0 1px;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
background-color: white;
width: 200px;
visibility: hidden;
}

.dropmenudiv_d a{
width: auto;
display: block;
text-indent: 5px;
border: 0 solid #c2d2ea; /THEME CHANGE HERE/
border-bottom-width: 1px;
padding: 5px 0;
text-decoration: none;
color: #22539d;
}

  • html .dropmenudiv_d a{ /IE only hack/
    width: 100%;
    }

.dropmenudiv_d a:hover{ /THEME CHANGE HERE/
background-color: #c2d2ea;
}