我的菜单html是这样的:
<div id=navigation>
<ul id=nav>
<li>
<asp:HyperLink ID=HyperLink1 runat=server
NavigateUrl=~/Home.aspx>Home</asp:HyperLink></li>
<li>
<asp:HyperLink ID=HyperLink2
runat=server NavigateUrl=~/UserSide/AboutUs.aspx>About Us</asp:HyperLink></li>
<li>
<asp:HyperLink ID=HyperLink11 runat=server Products</asp:HyperLink>
<ul>
<li>
<asp:HyperLink ID=HyperLink3 runat=server NavigateUrl=~/UserSide/Products/HomeTheatres.aspx>Home Theaters</asp:HyperLink></li>
<li>
<asp:HyperLink ID=HyperLink4 runat=server NavigateUrl=~/UserSide/Products/BurglarAlarmSystem.aspx>Burglar Alaram System</asp:HyperLink></li>
<li>
<asp:HyperLink ID=HyperLink5 runat=server NavigateUrl=~/UserSide/Products/AccessControlSystem.aspx>Access Control System</asp:HyperLink></li>
<li>
<asp:HyperLink ID=HyperLink6 runat=server NavigateUrl=~/UserSide/Products/AutomationSystem.aspx>Automation System</asp:HyperLink></li>
<li>
<asp:HyperLink ID=HyperLink7 runat=server NavigateUrl=~/UserSide/Products/CCTV.aspx>CCTV</asp:HyperLink></li>
<li>
<asp:HyperLink ID=HyperLink8 runat=server NavigateUrl=~/UserSide/Products/CentralMusicSystem.aspx>Central Music System</asp:HyperLink></li>
<li>
<asp:HyperLink ID=HyperLink9 runat=server NavigateUrl=~/UserSide/Products/PublicAddressSystem.aspx>Public Address System</asp:HyperLink></li>
<li>
<asp:HyperLink ID=HyperLink10 runat=server NavigateUrl=~/UserSide/Products/WiFiNetworks.aspx>WiFi Networks</asp:HyperLink></li>
</ul>
</li>
<li>
<asp:HyperLink ID=HyperLink12 runat=server NavigateUrl=~/UserSide/WhereToBuy.aspx>Where To Buy</asp:HyperLink></li>
<li>
<asp:HyperLink ID=HyperLink13 runat=server NavigateUrl=~/UserSide/Services.aspx>Services</asp:HyperLink></li>
<li>
<asp:HyperLink ID=HyperLink14 runat=server NavigateUrl=~/UserSide/ContactUs.aspx>Contact Us</asp:HyperLink></li>
</ul>
</div>
#navigation {
background: #303030;
display: block;
width: 100%;
float: left;
max-height: 52px;
margin: 0 0 15px 0;
}
#navigation ul,
#navigation li {
list-style:none;
padding:0;
margin:0;
display:inline;
}
#navigation ul li{
float:left;
position:relative;
}
#navigation ul li a {
display: inline-block;
color: #fff;
text-decoration: none;
font-size: 12px;
font-weight: bold;
padding: 17px 25px;
background: url(../images/navigation-divider.png) no-repeat right 50%;
}
#navigation ul li a:hover,
#current:hover
{
background: #72b626 !important;
color: #fff;
-webkit-transition: all 0.1s ease-in-out;
-moz-transition: all 0.1s ease-in-out;
-o-transition: all 0.1s ease-in-out;
-ms-transition: all 0.1s ease-in-out;
transition: all 0.1s ease-in-out;
}
#navigation ul ul {
position: absolute;
display: none;
top: 51px;
left: 0;
background: #303030;
z-index: 1000;
}
#navigation ul ul li a {color: #aaa;}
#navigation ul ul li a:hover {
color: #fff;
}
#navigation ul ul li a {
display: block;
width: 150px;
margin: 0;
padding: 9px 18px;
font-family: Arial, sans-serif;
font-weight: normal;
font-size: 12px;
border-bottom: 1px solid #404040;
background: none;
}
#navigation ul ul ul {
position: absolute;
top:0px;
left:100%;
z-index: 999;
}
#navigation ul ul ul li a {
border-bottom: 1px solid #404040 !important;
border-top: 1px solid transparent;
background: none;
}
#navigation ul ul li:last-child a, #navigation ul ul li:last-child a:hover {border-bottom: 1px solid transparent}
#navigation ul ul ul li:last-child a {border-bottom: 1px solid transparent !important}
#navigation ul li:hover>ul {opacity: 1; position:absolute; top:99%; left:0;}
#navigation ul ul li:hover>ul {position:absolute; top:0; left:100%; opacity: 1; z-index:497;}
#navigation ul li:hover > a {background: #72b626;}
#navigation ul ul li:hover > a {color: #fff;}
当我将鼠标悬停在产品上时,下一个列表必须弹出,但它仅在我在主页上时才有效。当我在文件夹内的任何页面上时,它不会弹出。
有什么帮助吗?请