0

悬停在其子项上时，如何使菜单（关于我们）保持高亮？（注：菜单为图片）

标题

HTML：

<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css" />

<!--[if IE]>
    <link rel="stylesheet" type="text/css" href="all-iecss.css" />
<![endif]-->

<script type="text/javascript" rel="javascript" src="jquery-1.10.2.min.js"></script>

<script>$( document ).ready(function() {
var pathname = window.location.pathname;
if(pathname =="/aboutus1.php" || pathname =="/aboutus2.php" || pathname =="/aboutus3.php"){
$('#active-aboutus').attr('src',"images/hover-aboutus.jpg");
$('#active-aboutus').attr('onmouseout',"this.src='images/hover-aboutus.jpg'");
}

else if(pathname =="/partners.php"){
$('#active-partners').attr('src',"images/hover-partners.jpg");
$('#active-partners').attr('onmouseout',"this.src='images/hover-partners.jpg'");
}
else if(pathname =="/products1_1.php"){
$('#active-products').attr('src',"images/hover-products.jpg");
$('#active-products').attr('onmouseout',"this.src='images/hover-products.jpg'");
}
else if(pathname =="/products1_2.php"){
$('#active-products').attr('src',"images/hover-products.jpg");
$('#active-products').attr('onmouseout',"this.src='images/hover-products.jpg'");
}
else if(pathname =="/products1_3.php"){
$('#active-products').attr('src',"images/hover-products.jpg");
$('#active-products').attr('onmouseout',"this.src='images/hover-products.jpg'");
}
else if(pathname =="/products1_4.php"){
$('#active-products').attr('src',"images/hover-products.jpg");
$('#active-products').attr('onmouseout',"this.src='images/hover-products.jpg'");
}
else if(pathname =="/products1_4b.php"){
$('#active-products').attr('src',"images/hover-products.jpg");
$('#active-products').attr('onmouseout',"this.src='images/hover-products.jpg'");
}
else if(pathname =="/products1_4c.php"){
$('#active-products').attr('src',"images/hover-products.jpg");
$('#active-products').attr('onmouseout',"this.src='images/hover-products.jpg'");
}
else if(pathname =="/contactus.php"){
$('#active-contactus').attr('src',"images/hover-contactus.jpg");
$('#active-contactus').attr('onmouseout',"this.src='images/hover-contactus.jpg'");
}
});

</script>  
</head>
<body>
<div id="centered" style="position: relative; top:3px; margin: 0 auto;"><br /> 
<a href="aboutus1.php"><img src="images/cti-logo.png" alt="logo" align="left" /></a>
<div id="cssmenu" style="position:relative; margin-top:21px;">
<ul id="navbar">
<li class="active"><a href="welcome.php"><img id="active-home" onmouseover="this.src='images/hover-home.jpg'" onmouseout="this.src='images/home.jpg'" src="images/home.jpg" /></a></li>
<li><a href="aboutus1.php"><p style="display:none;">About Us</p><img id="active-aboutus" onmouseover="this.src='images/hover-aboutus.jpg'" onmouseout="this.src='images/aboutus.jpg'" src="images/aboutus.jpg" /></a> 
<ul>
<!--<li>&nbsp;</li-->
<li class="x" style="left:-20px;"><a href="aboutus1.php">ABOUT CTI</a></li>
<!--li>&nbsp;</li-->
<li class="x" style="left:-20px;"><a href="aboutus2.php">OUR CLIENTS</a></li>
<!--li>&nbsp;</li-->
<li style="left:-20px;"><a href="aboutus3.php">MISSION / VISION </a></li>
</ul>
</li>

<li><a href="partners.php"><img id="active-partners" onmouseover="this.src='images/hover-partners.jpg'" onmouseout="this.src='images/partners.jpg'" src="images/partners.jpg" /></a></li>

<li><a href="products1_1.php"><img id="active-products" onmouseover="this.src='images/hover-products.jpg'" onmouseout="this.src='images/products.jpg'" src="images/products.jpg" /></a> 

</li>
<li><a href="contactus.php"><img id="active-contactus" onmouseover="this.src='images/hover-contactus.jpg'" onmouseout="this.src='images/contactus.jpg'" src="images/contactus.jpg" /></a></li>
</ul>
</div>

<div class="bar"></div>
</div>
</body>
</html>

CSS：

<!--Navigation-->
#navbar {
    margin: 0;
    padding: 0;
}
#navbar li {
    list-style: none;
    float: left; 
}
#navbar li a {
    display: block;
    background-color:#03beff;
    text-decoration: none; 
font-size:0.62em;
text-align:center;

}
#navbar li ul {
    display: none; 
    width:5.3em; /**Width to help Opera out **/
}
/**hover state**/
#navbar li:hover ul {
    display: block;
    position: absolute;
    margin: 0;
    padding: 0; 
z-index:99999;}

#navbar li:hover li {
    float: none; }
#navbar li:hover li a {
    /**background-color: #2177c0;**/
    /**border-bottom: 1px solid #fff;**/
    color: #fff; }
#navbar li li a:hover {
    background-color: #2177c0; }
<!--End of Navigation-->

我尝试在网上搜索所有内容，但我一无所获，因为我有一个图像菜单。

4

0 回答 0