:hover sur menu

**rnfom12** · 07/08/2019, 02h19

Salut à tous je suis un peu nouveau j'ai démarré le CSS cet été et là pour mettre en pratique tout ce qui est j'ai appris cet été j'ai démarré un projet perso de site et j'essaye d'y intégrér un menu déroulant avec des parties qui s'affichent quand on passe sur une catégorie mais ça ne s'affiche tout simplement pas voilà le

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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta charset="utf-8">
        <link rel="stylesheet" href="tempcss.css">
    </head>
 
    <body>
 
        <nav>
            <table id="menu" style="border-collapse:collapse;">
                <thead>
                    <tr>
                        <td><img alt="logo" id ="logo" src="loog.png"></td>
                        <td>News</td>
                        <td id="match">Matchs</td>
                        <td id="transmark">Transfert</td>
                        <td>Stats</td>
                        <td id="cluub">Club</td>
                        <td id="histom">Histoire</td>
                        <td>Médias</td>
                    </tr>
                </thead>
                <tbody = "submenu">
                    <tr>
                        <td colspan="2"></td>
                        <td class="games">Ligue 1</td>
                        <td class="marktom">Officialisation</td>
                        <td></td>
                        <td class="cluub">Organisation du staff</td>
                        <td class="histom">Histoire du club</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td colspan="2"></td>
                        <td class="games">Coupe de France</td>
                        <td class="marktom">Rumeurs</td>
                        <td></td>
                        <td class="cluub">Infrastructures</td>
                        <td class="histom">Joueurs emblématiques</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td colspan="2"></td>
                        <td class="games">Coupe de la Ligue</td>
                        <td colspan="2"></td>
                        <td class="cluub">Les supporters</td>
                        <td class="histom">Matchs historiques</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td colspan="2"></td>
                        <td class="games">Coupe d'Europe</td>
                        <td colspan="3"></td>
                        <td class="histom">évolution du stade de l'OM</td>
                        <td></td>
                    </tr>
                </tbody>
 
            </table>
        </nav>
 
        <header>
            <img alt="bannière" src="ban.jpg">
        </header>
 
        <section id="fil">
            <div id="filactu">
                <h3><a href="#">Fil d'actualité</a></h3><br>
                <ul>
                    <li><a href="#"></a></li><br>
                    <li><a href="#"></a></li><br>
                    <li><a href="#"></a></li><br>
                    <li><a href="#"></a></li><br>
                    <li><a href="#"></a></li><br>
                    <li><a href="#"></a></li><br>
                    <li><a href="#"></a></li><br>
                    <li><a href="#"></a></li><br>
                    <li><a href="#"></a></li><br>
                    <li><a href="#"></a></li><br>
                </ul>
 
            </div>
            <a class="twitter-timeline" href="https://twitter.com/OM_Officiel?ref_src=twsrc%5Etfw" data-height="700">Tweets by OM_Officiel</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script><br><br>
 
        </section>
 
        <article>
 
        </article>
        <footer>
 
        </footer>
    </body>
</html>

voila le code CSS

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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
body
{
    font-family: 'Open Sans', arial;
    background-color: aliceblue;
}
/*******************************************************/
 
nav
{
    width: 100%;
    top: -1%;
    position: relative;
    height: 10%;
    background-color: dodgerblue;
    color: white;
    font-weight: bolder;
    display: inline-block;
    font-size: 20px;
    text-align: center;
    text-transform: uppercase;
    position: fixed;
    z-index: 1;
}
nav a:visited
{
    color: inherit;
    text-decoration: inherit;
    font-style: inherit;
 
}
nav a
{
    color: inherit;
    text-decoration: inherit;
    font-style: inherit;
}
 
#menu td{
    margin: 0px;
    padding: 0px;
    width: 12.5%;
 
}
#menu {
    background-color: dodgerblue;
}
#logo{
    width: 50%;
}
#menu > tbody{
    display: none;
}
 
#match:hover .games{
    display: block;
}
 
#transmark:hover .marktom{
    display: block;
}
 
#cluub:hover .cluub{
    display: block;
}
 
#histom:hover .histom{
    display: block;
}
 
/**********************************************************/
header > img{
    width: 100%;
}
 
/*******************************************************/
#fil
{
    float: right;
    width: 30%;
}
#filactu > ul > li{
     list-style-type: none;
}
/*******************************************************/
article
{
    background-color: ghostwhite;
    float: left;
    padding-left: 5%;
    width: 60%;
}
a:visited
{
    color: inherit;
    text-decoration: inherit;
}

en plus d'une solution au problème si vous avez des solutions pour améliorer le code (qui n'est pas fini) le rendre plus optimisé plus simple à lire ou des techniques à utiliser je suis preneur

Invité · 07/08/2019, 09h59

Bonjour,

On n'utilise plus de <table> pour la mise en page depuis Mathusalem.
Pour un menu, on utilise généralement une liste <ul><li>.

Fais une recherche

Il existe déjà de nombreux exemples de codes de menus.

Éventuellement, tu peux t'intéresser à Bootstrap.

N.B. Encore un nième site sur le foot...

**rawsrc** · 07/08/2019, 10h06

Envoyé par jreaux62

4- Éventuellement, tu peux t'intéresser à Bootstrap.

Tu peux aussi regarder W3.CSS que j'utilise partout et c'est tip-top

**Doksuri** · 07/08/2019, 11h13

hello, petite parenthese: je deconseil w3schools car leur codes/exemple datent des annees 90, et bien que la plupart soient encore correctes, certains sont maintenant faux.

je preconise mdn developer.mozilla.org/fr/docs/Web/CSS

**rawsrc** · 07/08/2019, 12h58

Envoyé par Doksuri

certains sont maintenant faux.

Enfin quand tu fais tes essais généralement tu te rends compte de suite.
La dernière version de leur framwork css date de juin 2019, ça tient compte des dernières évolutions des moteurs de rendu.
L'autre gros point, c'est qu'il s'affranchit de toute dépendance.

**rnfom12** · 07/08/2019, 16h43

merci de vos réponses je vais voir vos solutions et hormis cela vous n'aurait pas des conseils plus globaux pour améliorer le code je pourrais bientot avoir à travailler sur un projet plus sérieux et j'ai besoin d'apprendre vite

:hover sur menu

Survol d'un élément en CSS (:hover)

Vue hybride

Discussions similaires

Partager

Partager