Question

我有一个有活动链接的CSS菜单，我目前有它工作，但如果一个活动链接是一个子链接，该特定链接显示为活动但如果一个子链接设置为活动它只显示在同一链接我希望它在其父链接上显示

我怎样才能实现这一目标？

以下是我当前活动链接的CSS：

#nav li:hover > a, #nav li a.active {
    color:#F36F25;
    background: #FFFFFF;
    border:1px solid #F36F25;
    cursor:pointer;
}

目前有一个关于客户的活跃课程＆gt;查看客户

我在这里用完整代码创建了一个小提琴：http://jsfiddle.net/ty7x2wpj/

Answer 1

我能想到的唯一方法是使用javascript动态地将活动类添加到父链接。

$(function(){
    $('#nav li:has(a.active) > a').addClass('active');
});

#nav {
    background-color:#F36F25;
    margin:0 0 5px 0;
    width: 100%;
	height:35px;
	left:0;
	z-index:1;
	border-top:2px solid #FFFFFF;
	border-bottom:2px solid #FFFFFF;
}
#nav>li {
    float:left;
    list-style:none;
}
#nav li:hover ul {
    position:absolute;
    display:block;
	z-index:9999;
}
#nav li a {
    display: inline-block;
    padding: 8px;
    margin:0;
    background: #F36F25;
    text-decoration: none;
    color: #FFFFFF;
    border:1px solid #F36F25;
}
#nav li:hover > a, 
#nav li a.active{
	color:#F36F25;
	background: #FFFFFF;
	border:1px solid #F36F25;
	cursor:pointer;
}
#nav li ul {
    position:absolute;
    display: none;
    list-style:none;
    margin:0;
}
#nav li ul li {
    margin-top:0;
    margin-right:0;
    margin-bottom:0;
    margin-left:-40px;
}
#nav li ul li a {
    background-color: #F36F25;
    color:#FFFFFF;
    border:1px solid #F36F25;
    width:145px;
}
#nav li ul li a:hover {
    background-color: #FFFFFF;
	color:#F36F25;
    border:1px solid #f36f25;
}
.clearfix:after {
   content: " "; /* Older browser do not support empty content */
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="nav" class="clearfix">
<li><a href="#" onClick="OpenPage('/dashboard');">Dashboard</a></li><li><a href="#" onClick="OpenPage('/helpdesk/tickets');">Tickets</a></li><li><a href="#" onClick="OpenPage('//reminders/view_reminders');">Reminders</a><ul><li><a href="#" onClick="OpenPage('/reminders/addreminder');">Add Reminder</a></li><li><a href="#" onClick="OpenPage('/reminders/view_reminders');">View Reminders</a></li></ul></li><li><a href="#" onClick="OpenPage('/');">Companies</a><ul><li><a href="#" onClick="OpenPage('/customer/addcustomer');">Add Customer</a></li><li><a href="#" onClick="OpenPage('/customer/contacts/add_contact');">Add Contact</a></li><li><a href="#" onClick="OpenPage('/salesman/addsalesman');">Add Salesman</a></li><li><a href="#" onClick="OpenPage('/customer/contracts/editcontract');">Edit Contract</a></li><li><a href="#" onClick="OpenPage('/customer/contracts/addcontract');">Add New Contract</a></li><li><a href="#" onClick="OpenPage('/customer/addcustomer?company_status=Prospect');">Add Prospect</a></li><li><a href="#" onClick="OpenPage('/customer/contacts/contacts');">View Contacts</a></li><li><a href="#" onClick="OpenPage('/customer/upload_records');">Upload Records</a></li><li><a class="active" href="#" onClick="OpenPage('/customer/viewcustomer');">View Customers</a></li><li><a href="#" onClick="OpenPage('/salesman/viewsalesman');">View Salesman</a></li></ul></li><li><a href="#" onClick="OpenPage('/billing/billing');">Billing</a><ul><li><a href="#" onClick="OpenPage('/billing/direct_debits');">Direct Debits</a></li><li><a href="#" onClick="OpenPage('/billing/upload_voip_services');">Upload VoIP Services</a></li><li><a href="#" onClick="OpenPage('/billing/viewinvoices');">Pending Invoices</a></li><li><a href="#" onClick="OpenPage('/billing/daily_cdrs');">Daily CDRs</a></li><li><a href="#" onClick="OpenPage('/billing/viewhistoricinvoices');">Historic Invoices</a></li><li><a href="#" onClick="OpenPage('/billing/voip_unmatched_calls');">VoIP Unmatched </a></li><li><a href="#" onClick="OpenPage('/billing/pending_direct_debits');">Pending Direct Debits</a></li><li><a href="#" onClick="OpenPage('/billing/upload_line_services');">Upload Line Services</a></li><li><a href="#" onClick="OpenPage('/billing/upload_hostedexchange_services');">Upload Hosted Exchange Services</a></li></ul></li><li><a href="#" onClick="OpenPage('/messaging/viewemails');">Messaging</a><ul><li><a href="#" onClick="OpenPage('/messaging/viewemails');">View Emails</a></li><li><a href="#" onClick="OpenPage('/messaging/send_email/send_email');">Send Email</a></li><li><a href="#" onClick="OpenPage('/messaging/sendtext');">Send Text</a></li><li><a href="#" onClick="OpenPage('/messaging/view_text_messages');">Text Messages</a></li></ul></li><li><a href="#" onClick="OpenPage('/servicestatus/viewservicestatus');">Status</a><ul><li><a href="#" onClick="OpenPage('/servicestatus/addservicestatus');">Add Service Status</a></li><li><a href="#" onClick="OpenPage('/servicestatus/viewservicestatus');">View Service Status</a></li><li><a href="#" onClick="OpenPage('/servicestatus/maintenance/addmaintenance');">Add Maintenance</a></li><li><a href="#" onClick="OpenPage('/servicestatus/maintenance/viewmaintenance');">View Maintenance</a></li></ul></li><li><a href="#" onClick="OpenPage('/knowledgebase/editkbarticle');">Knowledgebase</a><ul><li><a href="#" onClick="OpenPage('/knowledgebase/newkbarticle');">Add KB Article</a></li><li><a href="#" onClick="OpenPage('/knowledgebase/editkbarticle');">View KB Article</a></li></ul></li><li><a href="#" onClick="OpenPage('/');">Pricing</a><ul><li><a href="#" onClick="OpenPage('/pricing/broadband_products');">Broadband Products</a></li><li><a href="#" onClick="OpenPage('/pricing/pricelist');">Price List</a></li><li><a href="#" onClick="OpenPage('/pricing/callcosts');">Call Costs</a></li></ul></li><li><a href="#" onClick="OpenPage('/settings');">Settings</a><ul><li><a href="#" onClick="OpenPage('/users/users_view');">View Users</a></li><li><a href="#" onClick="OpenPage('/users/users_add');">Add User</a></li><li><a href="#" onClick="OpenPage('/signature');">Company Signature</a></li><li><a href="#" onClick="OpenPage('/users/permissions');">Permissions</a></li><li><a href="#" onClick="OpenPage('/myaccount/edit');">My Account</a></li><li><a href="#" onClick="OpenPage('/remotephonebooks');">Remote Phone Books</a></li></ul></li><li><a href="#" onClick="OpenPage('/');">Reports</a><ul><li><a href="#" onClick="OpenPage('/reports/helpdesk/tickets_report');">Tickets Report</a></li><li><a href="#" onClick="OpenPage('/reports/helpdesk/customersupporthoursreport');">Check Support Hours</a></li><li><a href="#" onClick="OpenPage('/reports/billing/customerbillinglist');">Customer Billing List</a></li></ul></li><!--<li><a href="#" onclick="printSelection(document.getElementById('page_cont'));return false">Print This Page</a></li>-->
<li><a href="/login/logout.php">Logout</a></li>

</div>

Answer 2

试试这个：

#nav li:hover > a, #nav li a:hover .active {
    color:#F36F25;
    background: #FFFFFF;
    border:1px solid #F36F25;
    cursor:pointer;
}

不需要js

css菜单活动子链接显示在父链接上

2 个答案: