我有一个网站： http://www.kingaccountingandtax.com
我使用与网站相同的 css menu.css 和 default.css
http://www.kingreversemortgage.com
kingreversemortgage 网站导航栏在您单击菜单项时起作用，它将使其变黑并将其设置为活动状态。但是，当您单击任何其他页面时，其他站点不会更改，并且主页保持黑色。为什么会这样呢？我复制了完全相同的默认和菜单 css 文件。和母版页代码有关系吗？不同之处在于我在 kingaccountingandtax.com 上使用了更多子菜单。
这是menu.css文件：
<%@ Master Language="VB" CodeFile="Home.master.vb" Inherits="templates_Home" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!-->
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
<meta http-equiv="cotent-type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Your page description here" />
<meta name="author" content="" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>King Accounting & Tax</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="css/menu.css" rel="stylesheet" />
<link href="css/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js" charset="utf-8">
</script>
<script type="text/javascript">
$(function () {
setNavigation();
});
function setNavigation() {
var path = window.location.pathname;
path = path.replace(/\/$/, "");
path = decodeURIComponent(path);
if (path.substring(1, path.length) === "") { // this was the home page loading already active
return;
}
$("li.active").removeClass("active"); // remove class 'active' all list items
$(".navigation a").each(function () {
var href = $(this).attr('href');
if (path.substring(1, path.length) === href) {
$(this).parents('li').addClass('active');
return;
}
});
}
</script>
</head>
<body>
<script type="text/javascript" src="wz_tooltip.js"></script>
<form id="form1" runat="server">
<div id="header">
<h1>King Accounting & Tax</h1>
<br />
<br />
<div class="right">
<img src="templates/images/headercalc.jpg" width="275px" height="100px">
</div>
</div>
<center>
<!-- start header -->
<header>
<div class="container">
<div class="navbar navbar-static-top">
<div class="navigation">
<nav>
<ul class="nav topnav bold">
<li class="dropdown active">
<a id="A1" href="https://www.kingaccountingandtax.com/default.aspx" runat="server">HOME </a>
</li>
<li class="dropdown">
<a id="A2" href="../about.aspx" runat="server">ABOUT</a>
</li>
<li class="dropdown" id="Services">
<a id="A3" href="" runat="server">SERVICES <i class="icon-angle-down"></i></a>
<ul class="dropdown-menu bold">
<li class="dropdown"><a href="" runat="server" id="ts0">Tax Services <i class="icon-angle-right"></i></a>
<ul style="display: none;" class="dropdown-menu sub-menu-level1 bold">
<li><a href="tax_preparation.aspx" id="ts1">Tax Preparation</a></li>
<li><a href="tax_planning.aspx" id="ts2">Tax Planning</a></li>
<li class="dropdown"><a href="" id="ts3">Tax Problems <i class="icon-angle-right"></i></a>
<ul style="display: none;" class="dropdown-menu sub-menu-level1 bold">
<li><a href="irs_audit_representation.aspx" id="ts4">IRS Representation</a></li>
<li><a href="non_filed_taxes.aspx" id="ts5">Non Filed Taxes</a></li>
<li><a href="payroll_tax.aspx" id="ts6">Payroll Tax Problems</a></li>
<li><a href="irs_liens.aspx" id="ts7">IRS Liens</a></li>
<li><a href="irs_levies.aspx" id="ts8">IRS Levies</a></li>
<li><a href="irs_wage_garnishment.aspx" id="ts9">IRS Wage Garnishment</a></li>
<li><a href="irs_seizures.aspx" id="ts10">IRS Seizures</a></li>
<li><a href="irs_offer_in_compromise.aspx" id="ts11">IRS Offer in Compromise</a></li>
<li><a href="irs_payment_plan.aspx" id="ts12">IRS Payment Plan</a></li>
</ul>
</li>
</ul>
</li>
<li class="dropdown">
<a href="">Quickbooks Svcs <i class="icon-angle-right"></i></a>
<ul style="display: none;" class="dropdown-menu sub-menu-level1 bold" id="qbmenu">
<li><a href="why_quickbooks.aspx" id="qb1">Why Quickbooks</a></li>
<li><a href="quickbooks_setup.aspx" id="qb2">Quickbooks Setup</a></li>
<li><a href="quickbooks_training.aspx" id="qb3">Quickbooks Training</a></li>
<li><a href="quickbooks_tuneup.aspx" id="qb4">Quickbooks Tuneup</a></li>
</ul>
</li>
<li class="dropdown">
<a href="">Business Services <i class="icon-angle-right"></i></a>
<ul style="display: none;" class="dropdown-menu sub-menu-level1 bold">
<li><a href="small_business_accounting.aspx" id="bs1">Small Business Acctg</a></li>
<li><a href="payroll.aspx" id="bs2">Payroll</a></li>
<li><a href="compilation_and_reviews.aspx" id="bs3">Compilations & Reviews</a></li>
<li><a href="new_business.aspx" id="bs4">New Business Formation</a></li>
</ul>
</li>
</ul>
</li>
<li class="dropdown">
<a href="">TAX CENTER<i class="icon-angle-down"></i></a>
<ul style="display: none;" class="dropdown-menu bold" id="tcmenu">
<li><a href="refund_tracker.aspx" id="tc1">Refund Tracker</a></li>
<li><a href="tax_due_dates.aspx" id="tc2">Tax Due Dates</a></li>
<li><a href="tax_rates.aspx" id="tc3">Tax Rates</a></li>
<li><a href="irs_forms_publications.aspx" id="tc4">IRS Forms/Publications</a></li>
<li><a href="state_tax_forms.aspx" id="tc5">State Tax Forms</a></li>
<li><a href="tax_organizer.aspx" id="tc6">Free Tax Organizer</a></li>
</ul>
</li>
<li class="dropdown">
<a href="">RESOURCES<i class="icon-angle-down"></i></a>
<ul class="dropdown-menu bold">
<li><a href="login.aspx">Client Portal</a></li>
<li><a href="financial_calculators.aspx">Financial Calculators</a></li>
<li><a href="pay_online.aspx">Pay Online</a></li>
<li><a href="financial_publications.aspx">Financial Publications</a></li>
<li><a href="refer_a_friend.aspx">Refer a Friend</a></li>
</ul>
</li>
<li class="dropdown">
<a href="contact.aspx">CONTACT</a>
</li>
</ul>
</nav>
</div>
<!-- end navigation -->
</div>
</div>
</header>
</center>
<!-- end header -->
<div id="content">
<div id="posts">
<div class="post">
<h2 class="title"></h2>
<div class="story">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
<br />
<br />
</div>
</div>
<div class="post">
<h2 class="title"></h2>
<div class="story">
</div>
</div>
</div>
<!-- end #posts -->
<div id="links">
<ul>
<li>
<center>
<h2>ACCOUNTING & TAX Services</h2>
</center>
<br />
Our firm is responsive. Businesses and individuals who choose our firm rely on competent advice and quick projects.
Call us for a free consultation at 949-922-4200 for your accounting and
tax needs.
</li>
</ul>
<br />
<br />
<a href="https://www.kingaccountingandtax.com/login.aspx">
<img alt="Customer login" src="templates/images/Clientlogin.gif" /></a><br />
<br />
</div>
<!-- end #links -->
<div style="clear: both;"> </div>
</div>
<center>
<div id="bottomnav">
<div class="address">
<p>
<font color="white">Phone: (949) 922-4200 Fax: (866) 350-7334<span style="padding-left: 140px;">1927 Harbor Blvd. Ste 150 Costa Mesa, CA 92627</span><br />
CA Bureau of Accountancy License <a href="https://search.dca.ca.gov/details/300/CPA/107234/c98b7949252abe7be767c2497406bd09" target="_blank">#107234</a><span style="padding-left:275px;"><a href="https://www.kingaccountingandtax.com/login.aspx">Login</a> <a href="#">Site Map</a> <a href="privacy.aspx">Privacy Policy</a></span>
</font>
</p>
</div>
</div>
</center>
<!-- end #content -->
<br />
<div align="center">
<table>
<tr>
<td>
<script type="text/javascript" src="https://seal-central-northern-western-arizona.bbb.org/inc/legacy.js"></script>
<a href="https://www.bbb.org/us/ca/costa-mesa/profile/real-estate-broker/king-reverse-mortgage-1126-1012237/#sealclick" id="bbblink" class="ruhzbam" target="_blank" rel="nofollow">
<img src="https://seal-central-northern-western-arizona.bbb.org/logo/ruhzbam/bbb-1012237.png" style="border: 0;" alt="King Reverse Mortgage BBB Business Review" /></a>
</td>
<td> </td>
<td>
<img alt="ssl connection" src="templates/images/SSL.gif" width="140" height="68" />
</td>
</tr>
</table>
<div id="footer">
<p id="legal">
<a href="https://www.kingaccountingandtax.com">King Accounting and Tax</a><br />
<font color="green">Copyright © 2023<br />
</font>
</p>
</div>
</div>
<!-- end #footer -->
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/custom.js" type="text/javascript"></script>
</form>
</body>
</html>/* --- header -- */
header {
background: url(../img/menubackground.png) repeat;
margin: 0 0 0 0;
width: 762px;
padding: 10px 0 10px;
border-top-left-radius: 10px 10px;
border-top-right-radius: 10px 10px;
border-bottom-left-radius: 10px 10px;
border-bottom-right-radius: 10px 10px;
position: relative;
z-index: 2000;
text-align: left;
}
/* --- menu --- */
header .navigation {
float: left;
}
header ul.nav li {
border: none;
margin: 0;
}
header ul.nav li a {
border: none;
font-weight: 400;
}
header ul.nav li ul {
z-index: 1000;
margin-top: 1px;
}
header ul.nav li ul li ul {
margin: 1px 0 0 1px;
}
header ul.nav li a i {
color: #fff;
}
.container,
.navbar-static-top .container {
width: 750px;
}
.container {
margin-right: 0;
margin-left: 0;
*zoom: 1;
}
.container:before,
.container:after {
display: table;
line-height: 0;
content: "";
}
.container:after {
clear: both;
}
.dropdown {
position: relative;
}
.nav {
margin-bottom: 20px;
margin-left: 0;
list-style: none;
}
.nav > li > a {
display: block;
}
.nav > li > a:hover,
.nav > li > a:focus {
text-decoration: none;
background-color: #eeeeee;
}
.nav > .dropdown.active > a:hover,
.nav > .dropdown.active > a:focus {
cursor: pointer;
}
.navbar .nav a:hover {
background: #333333;
}
.navbar .nav > .active > a, .navbar .nav > .active > a:hover {
font-weight: 600;
}
.navbar .nav > .active > a:active, .navbar .nav > .active > a:focus {
background: #333333;
outline: 0;
font-weight: 600;
}
.navbar .nav li .dropdown-menu {
z-index: 1000;
}
.navbar .nav {
position: relative;
left: 0;
display: block;
float: left;
margin: 0px 10px 0 0;
}
.navbar .nav > li {
float: left;
padding: 4px 10px 2px 4px;
}
.navbar .nav > li > a {
float: none;
padding: 2px 15px 2px;
color: #777777;
text-decoration: none;
text-shadow: 0 1px 0 #ffffff;
}
.navbar .nav > li > a:focus,
.navbar .nav > li > a:hover {
color: #333333;
text-decoration: none;
background-color: transparent;
}
.navbar .nav > .active > a,
.navbar .nav > .active > a:hover,
.navbar .nav > .active > a:focus {
color: #555555;
text-decoration: none;
background-color: #e5e5e5;
-webkit-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
-moz-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
}
.navbar .nav > li > .dropdown-menu:before {
position: absolute;
top: -7px;
left: 9px;
display: inline-block;
border-right: 7px solid transparent;
border-bottom: 7px solid #ccc;
border-left: 7px solid transparent;
border-bottom-color: rgba(0, 0, 0, 0.2);
content: '';
}
.navbar .nav > li > .dropdown-menu:after {
position: absolute;
top: -6px;
left: 10px;
display: inline-block;
border-right: 6px solid transparent;
border-bottom: 6px solid #ffffff;
border-left: 6px solid transparent;
content: '';
}
.dropdown-menu {
*border-right-width: 0;
*border-bottom-width: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
.dropdown-menu .dropdown i {
position: absolute;
right: 0;
margin-top: 3px;
padding-left: 20px;
}
.dropdown-submenu > .dropdown-menu {
-webkit-border-radius: 0 0 0 0;
-moz-border-radius: 0 0 0 0;
border-radius: 0 0 0 0;
}
.navbar .nav {
border-right: none;
border-left: none;
}
.navbar .nav > li > a {
float: none;
font-size: 15px;
margin-left: 0px;
margin-right: 0;
text-decoration: none;
text-shadow: none;
border-right: none;
border-left: none;
color: #fff;
border: 2px solid transparent;
padding: 4px 5px 4px 5px;
background-image: none;
background: none;
}
.navbar .nav > li > a:hover,
.navbar .nav > li > a:focus {
color: #dddddd;
background-color: none;
background-image: none;
background-repeat: repeat-x;
filter: none;
text-decoration: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
border: 2px solid #302f2f;
padding: 4px 5px 4px 5px;
background: #343434;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: inset 0 0 1px #555;
-webkit-box-shadow: inset 0 0 1px #555;
box-shadow: inset 0 0 1px #555;
}
.navbar .nav > .active > a,
.navbar .nav > .active > a:hover,
.navbar .nav > .active > a:focus {
color: #fff;
border: 2px solid #302f2f;
padding: 4px 10px 4px 10px;
background-image: none;
background: #343434;
filter: none;
text-decoration: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: inset 0 0 1px #555;
-webkit-box-shadow: inset 0 0 1px #555;
box-shadow: inset 0 0 1px #555;
}
.navbar .nav > a i[class^="icon-"] {
color: #fdfdfd;
}
ul.nav li.dropdown a {
z-index: 1000;
display: block;
}
ul.nav li.dropdown ul li ul.dropdown-menu {
margin-left: 0px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
ul.nav li.dropdown ul li i {
margin-right: 50px;
}
select.selectmenu {
display: none;
}
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
display: none;
float: left;
min-width: 165px;
padding: 0;
margin: 2px 0 0;
list-style: none;
background: #386A57;
border: none;
border: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
border: 2px solid #302f2f;
border-top: none;
-webkit-background-clip: none;
-moz-background-clip: none;
background-clip: none;
-webkit-border-radius: 0 0 6px 6px;
-moz-border-radius: 0 0 6px 6px;
border-radius: 0 0 6px 6px;
}
.dropdown-menu li {
margin: 0;
padding: 0;
}
.dropdown-menu li a {
color: #ddd;
font-size: 15px;
padding: 5px 7px 5px 7px;
margin: 0;
text-shadow: none;
border-bottom: 1px solid #303030;
text-decoration: none;
}
.dropdown-menu li > a:hover,
.dropdown-menu li > a:focus,
.dropdown-submenu:hover > a,
.dropdown-menu .active > a,
.dropdown-menu .active > a:hover {
color: #ffffff;
text-decoration: none;
background-image: none;
background-image: none;
background-image: none;
background-image: none;
background-image: none;
background-repeat: inherit;
filter: none;
}
.dropdown-menu .sub-menu-level1, .dropdown-menu .sub-menu-level2 {
left: 100%;
position: absolute;
top: 0;
visibility: hidden;
margin-top: 0;
}
.dropdown-menu li:hover .sub-menu-level1 {
visibility: visible;
}
.dropdown-menu li li:hover .sub-menu-level2 {
visibility: visible;
}
@media (min-width: 750px) {
.container,
.navbar-static-top .container {
width: 750px;
}
}
@media (min-width: 750px) and (max-width: 750px) {
.container,
.navbar-static-top .container {
}
nav ul li {
display: none;
}
select.selectmenu {
display: block;
width: 100%;
margin-top: 0;
color: #111;
margin-right: 20px;
line-height: 30px;
font-size: 13px;
}
select.selectmenu .bold {
font-weight: bold;
}
}
@media (max-width: 750px) {
.navbar-static-top {
margin-right: -10px;
margin-left: -10px;
}
.container {
width: auto;
}
nav ul li {
display: none;
}
header .navigation {
margin: 0 auto;
text-align: center;
width: 95%;
float: none;
}
select.selectmenu {
display: block;
width: 100%;
float: left;
margin-bottom: 20px;
color: #111;
margin-right: 10px;
line-height: 30px;
font-size: 13px;
}
select.selectmenu .bold {
font-weight: bold;
}
}
@media (max-width: 350px) {
.headnav {
text-align: center;
float: none;
margin: 10px 0 0 0;
}
}
还有主页：
答案是我请求脚本 type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js" charset="utf-8">
并且必须通过 https 协议安全地请求。我已经进行了此更改，现在可以正常工作了。