Bonjour à tous,
Je débute en html et je suis confronté a un petit problème pour ma navigation.
Je voudrais que chacun de mes liens comprenne un titre, et un petit texte explicatif, comme sur l'image ci dessous :
Je voudrais qu'en le survolant le texte "un bouton" devienne vert clair et le sous titre "qui ne marche pas du tout" passe en blanc.
Mais je voudrais que ca reste un seul lien, je veux dire si on survole "un bouton", que le sous titre change lui aussi de couleur.
J'ai pas mal tourné sur le net je n'arrive pas à trouver de réponse satisfaisante
Voilà ou j'en suis (c'est un extrait bien sûr), mais ca marche pas du tout, je comprends pas comment dire a mon lien qu'il contient deux éléments qui doivent changer pour deux couleurs differentes
Un bout de code
Code :
- <ul class="menu">
- <li><a href="#">Un Bouton<br /><span class="boutons">Qui ne marche pas du tout</span></a></li>
- <li><a href="#">Dépannage</a></li>
- <li><a href="#">Formation</a></li>
- <li><a href="#">Contact</a>
- </ul>
|
Un bout de CSS
Code :
- .menu {
- float: inside;
- display: block;
- padding-right: 50px;
- padding-left: 50px;
- }
- nav.primary ul li {
- display: inline;
- float: inside;
- position: relative;
- }
- nav.primary ul li a {
- display: inline-block;
- line-height: 15px;
- padding: 0 30px;
- color: #ebebeb;
- text-transform: none;
- text-decoration: none;
- font-weight: bold;
- letter-spacing: 0.08em;
- }
- nav.primary ul li a:hover {
- cursor: pointer;
- color: #ff6a00
- }
- nav.primary ul li a span:hover {
- cursor: pointer;
- color: Aquamarine
- }
|
Je vous remercie par avance, et si par hasard une réponse valable a ma problématique avait déjà été postée et m'avait échappée je vous serais très reconnaissant de me l'indiquer.