2013-12-15 63 views
0

活動菜單我有一個頂級的菜單,看起來像如下: enter image description here如何突出顯示在CSS

但是,當我選擇在家中或任何其他項目我希望它被突出顯示。那是當它活躍時,我希望它的顏色與其他顏色不同。

我的菜單CSS是如下:

#cssmenu_top{ height:37px; display:block; padding:0; margin: 0; border:1px solid; border-radius:5px; } 
#cssmenu_top > ul {list-style:inside none; padding:0; margin:0;} 
#cssmenu_top > ul > li {list-style:inside none; padding:0; margin:0; float:left; display:block; position:relative;} 
#cssmenu_top > ul > li > a{ outline:none; display:block; position:relative; padding:12px 20px; font:bold 13px/100% Arial, Helvetica, sans-serif; text-align:center; text-decoration:none; text-shadow:1px 1px 0 rgba(0,0,0, 0.4); } 
#cssmenu_top > ul > li:first-child > a{border-radius:5px 0 0 5px;} 
#cssmenu_top > ul > li > a:after{ content:''; position:absolute; border-right:1px solid; top:-1px; bottom:-1px; right:-2px; z-index:99; } 
#cssmenu_top ul li.has-sub:hover > a:after{top:0; bottom:0;} 
#cssmenu_top > ul > li.has-sub > a:before{ content:''; position:absolute; top:18px; right:6px; border:5px solid transparent; border-top:5px solid #fff; } 
#cssmenu_top > ul > li.has-sub:hover > a:before{top:19px;} 
#cssmenu_top ul li.has-sub:hover > a{ background:#3f3f3f; border-color:#3f3f3f; padding-bottom:13px; padding-top:13px; top:-1px; z-index:999; } 
#cssmenu_top ul li.has-sub:hover > ul, #cssmenu_top ul li.has-sub:hover > div{display:block;} 
#cssmenu_top ul li.has-sub > a:hover{background:#3f3f3f; border-color:#3f3f3f;} 
#cssmenu_top ul li > ul, #cssmenu_top ul li > div{ display:none; width:auto; position:absolute; top:38px; padding:10px 0; background:#3f3f3f; border-radius:0 0 5px 5px; z-index:999; } 
#cssmenu_top ul li > ul{width:200px;} 
#cssmenu_top ul li > ul li{display:block; list-style:inside none; padding:0; margin:0; position:relative;} 
#cssmenu_top ul li > ul li a{ outline:none; display:block; position:relative; margin:0; padding:8px 20px; font:10pt Arial, Helvetica, sans-serif; color:#fff; text-decoration:none; text-shadow:1px 1px 0 rgba(0,0,0, 0.5); } 


#cssmenu_top, #cssmenu_top > ul > li > ul > li a:hover{ background:#333333; background:-moz-linear-gradient(top, #333333 0%, #222222 100%); background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#333333), color-stop(100%,#222222)); background:-webkit-linear-gradient(top, #333333 0%,#222222 100%); background:-o-linear-gradient(top, #333333 0%,#222222 100%); background:-ms-linear-gradient(top, #333333 0%,#222222 100%); background:linear-gradient(top, #333333 0%,#222222 100%); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333', endColorstr='#222222',GradientType=0); } 
#cssmenu_top{border-color:#000;} 
#cssmenu_top > ul > li > a{border-right:1px solid #000; color:#fff;} 
#cssmenu_top > ul > li > a:after{border-color:#444;} 
#cssmenu_top > ul > li > a:hover{background:#111;} 

而且我顯示我的網頁上菜單的方式像如下:

<div id="cssmenu_top"> 

     <ul> 
      <li ><a href="index.php"><span style="text-color:#FF0000;">Home</span></a></li> 

      <li class='has-sub'><a href="#"><span>Add New Question</span></a> 
       <ul> 
        <li><a href="add_question.php?sub=bangla">Bangla</a></li> 
        <li><a href="add_question.php?sub=english">English</a></li> 
        <li><a href="add_question.php?sub=math">Math</a></li> 
        <li><a href="add_question.php?sub=generalscience">General Science</a></li> 
        <li><a href="add_question.php?sub=bangladeshaffairs">Bangladesh Affairs</a></li> 
        <li class='last'><a href="add_question.php?sub=internationalaffairs">International Affairs</a> 

        </li> 
       </ul> 

      </li> 
</ul> 
</div> 

所以對於高亮(活動)我想加入以下代碼在我的CSS:

#cssmenu_top ul > li.active{ 
    background-color: #FF0000; 
} 

但它沒有給我想要的輸出。

我該怎麼做。請幫助。

+1

您使用'.active'的CSS是一個需要應用於''li'的類名才能觸發。因此,除非在click事件中使用JavaScript將'active'類設置爲'li',否則無法通過使用'.active'來獲得所需的結果。 – ScottS

+0

...並且,如果您的網頁做了完整的回傳,您將會失去該課程。如果你想保持它,你必須存儲和檢索並重置類屬性。 –

回答

4

如果你想活動狀態,你應該使用李:積極

#cssmenu_top ul > li:active{ 
    background-color: #FF0000; 
} 
+0

我想要顏色存在,直到我在頁面中。點擊時我只顯示顏色。 – user2958359

+0

所以,你必須使用一些javascript來追加.active類。在使用CSS重疊時遇到問題,請使用!重要規則 –

0

嘗試:

#cssmenu_top ul > li:active{ 
    background-color: #FF0000; 
} 
+0

我希望顏色存在,直到我在頁面中。點擊時我只顯示顏色。 – user2958359

1

的方式只有CSS來做到這一點是如果每個正文頁面有一個獨特的類/編號

例如,如果你的主頁和主頁有這樣的東西

<body id="home_page"> 

然後,您可以這樣做是爲了在主頁菜單項保持highighted

#home_page .home_li { 
background-color: silver; 
} 

您還需要給每個頂級菜單項它自己的ID或類像.home_li這個工作

然後,你做的只是用不同的類/ IDS

0

其他頁面相同,請試試這個:

<!doctype html> 



<meta charset='utf-8'> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 

    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> 
    <script src="script.js"></script> 
    <title>CSS</title> 
</head> 
<body> 

<div id='css'> 
<ul> 
    <li class='active'><a href='#'>Home</a></li> 
    <li><a href='#'>Products</a></li> 
    <li><a href='#'>Company</a></li> 
    <li><a href='#'>Contact</a></li> 
</ul> 
</div> 

和CSS:

@import url(http://fonts.googleapis.com/css?family=Raleway);

#cssmenu, 
#cssmenu ul, 
#cssmenu ul li, 
#cssmenu ul li a { 
    margin: 0; 
    padding: 0; 
    border: 0; 
    list-style: none; 
    line-height: 1; 
    display: block; 
    position: relative; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 
#cssmenu:after, 
#cssmenu > ul:after { 
    content: "."; 
    display: block; 
    clear: both; 
    visibility: hidden; 
    line-height: 0; 
    height: 0; 
} 
#cssmenu { 
    width: auto; 
    border-bottom: 3px solid #47c9af; 
    font-family: Raleway, sans-serif; 
    line-height: 1; 
} 
#cssmenu ul { 
    background: #ffffff; 
} 
#cssmenu > ul > li { 
    float: left; 
} 
#cssmenu.align-center > ul { 
    font-size: 0; 
    text-align: center; 
} 
#cssmenu.align-center > ul > li { 
    display: inline-block; 
    float: none; 
} 
#cssmenu.align-right > ul > li { 
    float: right; 
} 
#cssmenu.align-right > ul > li > a { 
    margin-right: 0; 
    margin-left: -4px; 
} 
#cssmenu > ul > li > a { 
    z-index: 2; 
    padding: 18px 25px 12px 25px; 
    font-size: 15px; 
    font-weight: 400; 
    text-decoration: none; 
    color: #444444; 
    -webkit-transition: all .2s ease; 
    -moz-transition: all .2s ease; 
    -ms-transition: all .2s ease; 
    -o-transition: all .2s ease; 
    transition: all .2s ease; 
    margin-right: -4px; 
} 
#cssmenu > ul > li.active > a, 
#cssmenu > ul > li:hover > a, 
#cssmenu > ul > li > a:hover { 
    color: #ffffff; 
} 
#cssmenu > ul > li > a:after { 
    position: absolute; 
    left: 0; 
    bottom: 0; 
    right: 0; 
    z-index: -1; 
    width: 100%; 
    height: 120%; 
    border-top-left-radius: 8px; 
    border-top-right-radius: 8px; 
    content: ""; 
    -webkit-transition: all .2s ease; 
    -o-transition: all .2s ease; 
    transition: all .2s ease; 
    -webkit-transform: perspective(5px) rotateX(2deg); 
    -webkit-transform-origin: bottom; 
    -moz-transform: perspective(5px) rotateX(2deg); 
    -moz-transform-origin: bottom; 
    transform: perspective(5px) rotateX(2deg); 
    transform-origin: bottom; 
} 
#cssmenu > ul > li.active > a:after, 
#cssmenu > ul > li:hover > a:after, 
#cssmenu > ul > li > a:hover:after { 
    background: #47c9af; 
}