Двухуровневое горизонтальное меню с подсветкой текущей страницы

Question

Я сделал двухуровневое меню с использованием CSS и HTML (ul и т. Д.). Я хочу, чтобы был выбран верхний уровень (с использованием класса selected) и элемент на втором уровне, который соответствует текущей странице, чтобы иметь класс active (который выделен жирным шрифтом).

Например, когда пользователь переходит к «/maintenance/company.aspx», я хочу, чтобы был выбран пункт меню «Обслуживание» и пункт подменю «Компании» выделен жирным шрифтом.

Выбор 1-го уровня работает и жирный шрифт работает, однако я не могу отобразить фактическое подменю (2-й уровень).

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; } /*--Since we declared a link style on the parent list link, we will correct it back to its original state--*/
#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);

Answer 1

Я понял, что это было с расследованием с FireBug. Мне нужно было добавить некоторую специфику в мой CSS.

#menu li:hover span, .selectedSubMenu { display:block; }

стало

#menu li:hover span, #menu li span.selectedSubMenu { display:block; }

и мне пришлось добавить немного CSS, чтобы изменить цвет якоря

#menu li span.selectedSubMenu a { color:#666666; }

http://www.htmldog.com/guides/cssadvanced/specificity/ помог мне это объяснить.