菜單點擊強調

時，我很新的HTML/CSS和下拉菜單是另一件事對我來說。如何使選定的菜單看起來活躍？當我點擊其中的一個菜單時，例如Home菜單，當鼠標懸停時，我不能使圖像（鼠標懸停）停留（注意：主菜單被單擊。）菜單點擊強調

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-->

來源

2013-07-14 yakults

我想這是問題服務器端語言（例如PHP）。它有選擇的頁面，現在目前的添加一定類，然後的CSS將看起來像：李：懸停，li.current { 背景圖像：網址（...）; } – Ivan

不工作.... – yakults

使用jQuery：

$('#cssmenu ul ul.menu1').hover(function(){ 
    $('#cssmenu li.menu1').css({'background' : 'blue'}); 
}, function(){ 
    $('#cssmenu li.menu1').css({'background' : ' red //previous color'}); 
});

來源

2013-07-14 14:01:08

我真的沒有關於jQuery的想法，但我想給它一個嘗試。我的菜單是圖像。我該怎麼插入這段代碼？ – yakults

用來代替背景，然後用background-image代替顏色，url（'your-image'） – 2013-07-14 14:12:27

確保你包含一個js文件，否則jquery將無法運行 – 2013-07-14 14:13:08

菜單點擊強調

回答

相關問題