Comment mettre en Évidence des actifs menu en css

J'ai un menu en haut qui ressemble comme ci-dessous:

Mais lorsque je sélectionne la maison ou de tout autre élément que je veux qu'il soit mis en évidence. C'est quand il est actif, je veux qu'il ait juste une couleur différente que les autres.

Mon menu css est comme ci-dessous:

#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;}

Et la façon dont je suis en train de montrer menu sur ma page est comme ci-dessous:

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

Donc pour la mise en évidence(actif) j'ai essayé d'ajouter le code suivant dans mon css:

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

Mais il ne donne pas la sortie que je veux.

Comment puis-je le faire. De l'aide s'il vous plaît.

Votre css avec .active est un nom de classe qui doit être appliquée à la li pour qu'il déclenche. Donc, vous n'obtiendrez pas les résultats que vous souhaitez grâce à l'aide d'un .active sauf si vous utilisez javascript pour définir une active classe à la li lors d'un événement de clic.
...et, si votre page n'est une publication complète, vous allez perdre cette classe. Si vous voulez qu'elle persiste, vous devrez stocker et de récupérer et de réinitialisation de l'attribut de classe.

InformationsquelleAutor user2958359 | 2013-12-15

4

Si vous voulez le état actif, vous devez utiliser li:active
```
#cssmenu_top ul > li:active{
    background-color: #FF0000;
}
```
- Je veux de la couleur à être présent jusqu'à ce que je suis dans la page. Je montre juste la couleur en cliquant sur elle.
- Donc, tu dois utiliser du javascript pour ajouter les .classe active. Ayant des problèmes avec css superpositions, utilisez le !règle importante
InformationsquelleAutor Pedro Moreira
1

un moyen de le faire avec du css est si chaque corps de la page a une unique classe/id

par exemple, si votre sur votre page d'accueil et la page d'accueil a somehting comme ce
```
<body id="home_page">
```
Vous pouvez alors faire ceci pour rendre la page d'accueil de l'élément de menu rester highighted
```
    #home_page .home_li { 
background-color: silver; 
}
```
Vous aussi, vous avez besoin de donner à chaque élément de menu sa propre id ou une classe comme .home_li pour que cela fonctionne

Puis vous faites la même chose pour les autres pages avec différentes classes/id

InformationsquelleAutor CRABOLO
0

essayer:
```
#cssmenu_top ul > li:active{
    background-color: #FF0000;
}
```
- Je veux de la couleur à être présent jusqu'à ce que je suis dans la page. Je montre juste la couleur en cliquant sur elle.
InformationsquelleAutor huda

Veuillez Essayer Ceci:

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

Et 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;
}

InformationsquelleAutor McElie

Vous devez vous connecter pour publier un commentaire.