我对 HTML/CSS 很陌生，下拉菜单对我来说是另一回事。如何让选中的菜单看起来活跃？
在我的页眉上，comgtech.com/header.html
当我点击其中一个菜单时，例如主菜单，当鼠标移开时，我无法使(鼠标悬停的)图像停留。(注意:主菜单被单击。)
HTML
<body>
<div class="header" align="center" width="850px;" style="position:absolute; top:5px; margin:0 auto;"> <br />
<img src="images/cti-logo.png" align="left" />
<table align="right" style="position:relative;">
<tr>
<td><input type="text" maxlength="50" size="20" /></td>
<td><input type="image" name="submit" value="submit" src="images/search1.jpg" /></td>
</tr>
</table>
<div id='cssmenu' style="position:relative;">
<ul>
<li class='active'><a href="home.php"><img src="images/home.jpg" onmouseover="this.src='images/hover-home.jpg'" onmouseout="this.src='images/home.jpg'"/></a></li>
<li><a href="#"><img src="images/aboutus.jpg" onmouseover="this.src='images/hover-aboutus.jpg'" onmouseout="this.src='images/aboutus.jpg'" /></a>
<ul>
<li> </li>
<li style="left:-12px;"><a href="aboutus1.php">ABOUT CTI</a></li>
<li><a href="aboutus2.php">OUR CLIENTS</a></li>
<li><a href="aboutus3.php">MISSION/VISION</a></li>
</ul>
</li>
<li><a href="partners.php"><img src="images/partners.jpg" onmouseover="this.src='images/hover-partner.jpg'" onmouseout="this.src='images/partners.jpg'"/></a></li>
<li><a href="products1_1.php"><img src="images/products.jpg" onmouseover="this.src='images/hover-product.jpg'" onmouseout="this.src='images/products.jpg'"/></a>
<ul>
<li><a href="products1_2.php">CORE PLATFORMS</a></li>
<li><a href="products1_3.php">KEY SERVICES</a></li>
<li><a href="products1_4.php">PRODUCT FEATURES</a></li>
</ul>
</li>
<li><a href="contactus.php"><img src="images/contactus.jpg" onmouseover="this.src='images/hover-cu.jpg'" onmouseout="this.src='images/contactus.jpg'"/></a></li>
</ul>
</div>
<div style="background-repeat:repeat-x; background: url('images/heading-top.jpg') repeat-x; height: 20px; margin-top:116px; position:relative; text-align:center; position:relative; z-index:1;"></div>
</div>
</body>
CSS
<!--Navigation-->
#cssmenu ul,
#cssmenu li,
#cssmenu span,
#cssmenu a {
margin: 0;
padding: 0;
position: relative;
}
#cssmenu {
list-style:none;
float:right;
}
#cssmenu ul {
list-style: none;
z-index:20;
}
#cssmenu > ul > li {
float: left;
}
#cssmenu ul ul {
display: none;
position: absolute;
left: -40px;
text-align:center;
line-height: 15px;
margin-left:40px;
min-width: 61%;
text-align: center;
*width: 61%;
height:50px;
}
#cssmenu li:hover ul {
display: block;
background-color:#0fb9f4;
height:80px;
width:5px;
top:68px;
}
#cssmenu ul:after {
content: '';
display: block;
clear: both;
}
#cssmenu a {
color: #ffffff;
display: inline-block;
font-family: Verdana;
font-size: 10px;
min-width: 35px;
text-align: center;
text-decoration: none;
}
#cssmenu > ul > li.active a {
background: #00b1ef;
filter: none;
}
#cssmenu > ul > li.active a:hover {
background-color: #00b1ef;
filter: none;
}
<!--End of Navigation-->
最佳答案
使用jquery:
$('#cssmenu ul ul.menu1').hover(function(){
$('#cssmenu li.menu1').css({'background' : 'blue'});
}, function(){
$('#cssmenu li.menu1').css({'background' : ' red //previous color'});
});
关于html - 单击时强调菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17639782/