0

我对 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>&nbsp;</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-->
4

1 回答 1

0

使用jQuery：

$('#cssmenu ul ul.menu1').hover(function(){
    $('#cssmenu li.menu1').css({'background' : 'blue'});
}, function(){
    $('#cssmenu li.menu1').css({'background' : ' red //previous color'});
});
于 2013-07-14T14:01:08.793 回答