:hover sur menu

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:

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:

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

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 :recherch:
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... :roll:

Citation:

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

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

Citation:

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.

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