Bonjour à tous,
Je ne sais pas si le titre de mon sujet est assez clair.
En fait j'ai un menu auquel j'affecte une bordure en bas avec une couleur blanche pour qu'elle soit invisible. Lorsque je survol un onglet de ce menu j'aimerai que la bordure de ce menu change de couleur.
Pour être plus précis, voici mon code HTML :
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39 <!DOCTYPE html> <html> <head> <title>Mon site</title> <meta charset="UTF-8"> </head> <body> <header> <h1>mon site</h1> </header> <nav id="menu"> <ul> <li id="accueil"><a href="#" >Accueil</a></li><!-- --><li><a href="#">Toulouse FC</a></li><!-- --><li><a href="#">Bande Dessinées</a></li> </ul> </nav> <section> <aside> <h1>À propos de l'auteur</h1> <p>Ma présentation</p> </aside> <article> <h1></h1> <p>Bla bla bla bla (texte de l'article)</p> </article> </section> <footer> <p>Copyright monsite - Tous droits réservés<br /> <a href="#">Me contacter !</a></p> </footer> </body> </html>
Et voici mon CSS :
Pour l'instant j'ai fait en sorte dans le CSS que lorsqu'on survol un onglet celui ci change de couleur, et donc j'aimerai que la bordure basse du menu aie la même couleur.
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33 nav { border-bottom: solid; border-width: 2px; border-color: white; } nav ul{ padding: 0px; margin: 0px; list-style-type: none; background-color: #333333; } nav li{ display: inline-block; width: 150px; height: 25px; margin: 0px; padding: 0px; border-right: 1px solid #CCCCCC; text-align: center; line-height: 25px; } nav li :hover{ background-color: #3388BB; } nav li a{ display: block; text-decoration: none; color: #FFFFFF; }
Il me semble que cela est impossible en CSS3, du coup j'ai effectué quelques recherches en JS et Jquery mais sans véritable succès.
Je vous remercie par avance pour votre aide et vous souhaite une agréable journée.
Cordialement,
Leniouns.
Partager