Having created a two-tiered menu using CSS and HTML with 'selected' and 'active' classes, I am facing an issue where the second-level submenu is not displaying correctly on the current page.
The primary objective is to have the top-level menu item selected with the 'selected' class, while the corresponding item in the sub-menu should be bold ('active'). For instance, when navigating to '/maintenance/company.aspx', the "Maintenance" menu item should be selected and the "Companies" sub-menu item should appear bold.
The selection of the first level works fine, as does making the text bold. However, the actual display of the submenu (second level) is not functioning properly.
CSS
#menu
{
margin:0;
padding:0;
list-style:none;
position:relative;
background:url(../images/menubg.gif) repeat-x;
height:32px;
text-transform:uppercase;
font-family: Arial, Helvetica, sans-serif;
}
#menu li
{
float:left;
padding:0;
margin:0;
}
#menu a
{
text-decoration:none;
padding:10px 15px;
display:block;
color:#ffffff;
}
#menu li:hover a, a.selected
{
background:#ffffff;
color: #666666 !important;
}
#menu li span
{
float:left;
padding: 5px 0;
position:absolute;
display:none;
left:0;
top:31px;
background:#ffffff;
color: #000;
width: 100%;
}
#menu li:hover span, .selectedSubMenu { display:block; }
#menu li span a { display: inline; padding: 5px 15px; }
#menu li span a:hover {text-decoration: underline;}
.active { font-weight: bold; }
HTML
<ul id="menu">
<li><a href="#" id="contracts">Contracts</a>
<span>
<a href="/contracts/submitcontract.aspx">New Contract</a>
<a href="/contracts/search.aspx">Find Contract</a>
</span>
</li>
<li><a href="#" id="invoicing">Invoices</a>
<span>
<a href="/invoicing/invoicerun.aspx">Invoices Run</a>
<a href="/invoicing/invoicerun.aspx">Invoicing History</a>
</span>
</li>
<li><a href="#" id="maintenance">Maintenance</a>
<span>
<a href="/maintenance/account.aspx">Accounts</a>
<a href="/maintenance/agent/search.aspx">Agents</a>
<a href="/maintenance/company.aspx">Companies</a>
<a href="/maintenance/contact.aspx">Contacts</a>
<a href="/maintenance/networks.aspx">Networks</a>
<a href="/maintenance/plans.aspx">Plans</a>
</span>
</li>
<li><a href="#" id="admin">Control Panel</a>
<span>
<a href="/admin/userlist.aspx">Users</a>
<a href="/admin/systemsettings.aspx">System Settings</a>
</span>
</li>
</ul>
JQUERY
function markActiveLink() {
var path = location.pathname.substring(1);
if (path) {
$('#menu li > a').each(function() {
var $category = $(this).attr('id');
if (path.indexOf($category) > -1) {
$(this).addClass('selected');
$(this).siblings('span:first').addClass('selectedSubMenu');
$('#menu li span a[@href="/' + path + '"]').addClass('active');
}
});
}
}
$(document).ready(markActiveLink);