Menu en partie masqué

bonjour , j'ai créé un menu en css et j'ai un problème une partie du menu est caché par une div dont je vais me servir pour mon contenu

voici mon code html

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 lang="fr">
<head>
	<meta charset="utf-8" />
	<title>CB ROYALE FRATERNITE</title>
	<meta name="generator" content="BBEdit 14.0" />
	<link rel="stylesheet" href="style.css" />
 
</head>
<body>
 <div class="top-header">
 </div>
 <div class="header">
  <div class="logo-header">
	<img src="images/logo.png" />
  </div>
  <div class="logo-awbb-header">
	<img src="images/logo-awbb-header.png" />
 
  </div>
 </div>
 <div class="menu">
   <ul class="navbar">
        <li>
          <a href="#">ACTUALITES</a>
        </li>
        <li>
          <a href="#">CLUB</a>
          <ul>
            <li><a href="#">HISTORIQUE</a></li>
            <li><a href="#">LE COMITE</a></li>
            <li><a href="#">LE STAFF</a></li>
            <li><a href="#">LES ARBITRES</a></li>
            <li><a href="#">LES SALLES</a></li>
 
          </ul>
        </li>
        <li>
          <a href="#">EQUIPES</a>
          <ul>
            <li><a href="#" >SENIORS P2</a></li>
            <li><a href="#">SENIORS P4</a></li>
            <li><a href="#">U14 A</a></li>
            <li><a href="#">U14 B</a></li>
            <li><a href="#">U12 </a></li>
            <li><a href="#">U10 A</a></li>
            <li><a href="#">U10 B</a></li>
            <li><a href="#">U8</a></li>
            <li><a href="#">U6</a></li>
          </ul>
        </li>
 
        <li>
          <a href="#">COMPETITION</a>
          <ul>
            <li><a href="#" >SENIORS P2</a></li>
            <li><a href="#">SENIORS P4</a></li>
            <li><a href="#">U14 A</a></li>
            <li><a href="#">U14 B</a></li>
            <li><a href="#">U12 </a></li>
            <li><a href="#">U10 A</a></li>
            <li><a href="#">U10 B</a></li>
            <li><a href="#">U8</a></li>
            <li><a href="#">U6</a></li>
          </ul>
        </li>
        <li>
          <a href="#">GALERIE</a>
        </li>
        <li>
          <a href="#">PARTENAIRES</a>
 
        </li>
        <li>
          <a href="#">INFOS</a>
          <ul>
          	<li><a href="#">ENTRAINEMENTS</a></li>
            <li><a href="#">DOCUMENTS UTILES</a></li>
            <li><a href="#">REGLES COVID</a></li>
            <li><a href="#">LIENS UTILES</a></li>
 
          </ul>
        </li>
        <li>
          <a href="#">CONTACTS</a>
        </li>
      </ul>
 </div>
 <div class="main">
 
 </div>
 <div class="foofer">
 
 </div>
</body>
</html>

et mon code ces

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
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
body
{
 background-image: url("images/parquet.png");
}
.top-header
{
 position:relative;
	width:1200px;
	height:30px;
    background-color:#03224C;
    margin-left: auto;
    margin-right: auto;
 
}
.header
{
	position:relative;
	width:1200px;
	height:150px;
    background-color:#ffffff;
    margin-left: auto;
    margin-right: auto;
 
}
.logo-header
{
 position:absolute;
 
 width:400px;
 height:150px;
 top:15px;
 left:10px;
 
}
 
.logo-awbb-header
{
 position:absolute;
 
 width:247px;
 height:150px;
 
 left:953px;
 
}
 
.menu
{
	position:relative;
	width:1200px;
	height:50px;
    background-color:#03224C;
    margin-left: auto;
    margin-right: auto;
 
}
 
.navbar{
      height: 50px;
      padding: 0;
      margin: 0;
      position: absolute; 
      }
      .navbar li{
      height: auto;
      width: 150px; 
      float: left;  
      text-align: center; 
      list-style: none;  
      font: normal bold 12px/1em Arial, Verdana, Helvetica;  
      padding: 0;
      margin: 0;
      background-color: #03224C;
      }
      .navbar a{							
      padding: 18px 0;  
      border-left: 1px solid #ccc9c9;
      text-decoration: none; 
      color: white; 
      display: block;
      }
      .navbar li:hover, a:hover {
      background-color: #444444;
      } 
      .navbar li ul{
      display: none;
      height: auto;									
      margin: 0; 
      padding: 0; 
      }				
      .navbar li:hover ul{
      display: block;
      }
      .navbar li ul li {
      background-color: #F25B40;
      } 
      .navbar li ul li a{
      border-left: 1px solid #444444; 
      border-right: 1px solid #444444; 
      border-top: 1px solid #c9d4d8; 
      border-bottom: 1px solid #444444; 
      }
      .navbar li ul li a:hover{
      background-color: #a3a1a1;
      }
 
.main
{
	position:relative;
	width:1200px;
	height:150px;
    background-color:#ffffff;
    margin-left: auto;
    margin-right: auto;
 
}

je vous donne le nom du site www.cb-royale-fraternite.be

merci pour votre aide

Salut

Essais d'ajouter dans la class .main z-index: -1;

Ca marche , merci

Bonjour,

Citation:

Envoyé par ProgElecT

Essais d'ajouter dans la class .main z-index: -1;

« marrant » cette approche, pourquoi pas plutôt un z-index: 1 sur .menu, cela paraît plus naturel ?

Citation:

Envoyé par NoSmoking

Bonjour,

« marrant » cette approche, pourquoi pas plutôt un z-index: 1 sur .menu, cela paraît plus naturel ?

:aie: le gars un peu tordu, <div id=main> étant en position:relative; mais après <div class="menu"> donc :mouarf:z-index: -1..... CQFD .... :pastaper:

:dehors:

Le gars encore plus tordu :mouarf:

<div class="menu"> étant avant <div id="main"> donc étant au même niveau, mais potentiellement recouvert en cas de ..., donc si je le veux au dessus je mets unz-index: 1, ou j'enlève le position: relative à l'élément <div id="main"> :ptdr:

Le principal étant quand même que cela fonctionne ;)