Fond de menu déroulant non visible

**lelectronique.com** · 18/10/2019, 08h01

Bonjour,

Je souhaite mettre un menu déroulant sur mon site en refonte j'ai bien trouvé cela comme script https://w3bits.com/labs/css-responsive-nav/ qui répond à mon besoin sauf que je ne parviens pas à le mettre en place correctement sur l'écran la balise nav je ne prend pas la hauteur je n'ai donc pas le fond du menu. En telephone pas de soucis par contre. je ne parviens pas à trouver ce qui pose problème

si une personne peut me donner un coup de main, si je met une hauteur a nav "aucun" soucis

voici le code

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
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
<meta name="viewport" content="width=device-width">
<style>
#menu, #toggle-menu {
        background-color: #006A5B;
        color: #000;
}
#menu ul {
        margin: 0;
        padding: 0;
}
#menu .main-menu {
        display: none;
}
#tm:checked + .main-menu {
        display: block;
}
#menu input[type="checkbox"], #menu ul span.drop-icon {
        display: none;
}
#menu li, #toggle-menu, #menu .sub-menu {
        border-style: solid;
        border-color: rgba(0, 0, 0, .05);
}
#menu li, #toggle-menu {
        border-width: 0 0 1px;
}
#menu .sub-menu {
        background-color: #444;
        border-width: 1px 1px 0;
        margin: 0 1em;
}
#menu .sub-menu li:last-child {
        border-width: 0;
}
#menu li, #toggle-menu, #menu a {
        position: relative;
        display: block;
        color: #fff;
}
#toggle-menu, #menu a {
        padding: 1em 1.5em;
}
#menu a {
        transition: all .125s ease-in-out;
        -webkit-transition: all .125s ease-in-out;
}
#menu a:hover {
        background-color: #DFECEA;
        color: #000;
}
#menu .sub-menu {
        display: none;
}
#menu input[type="checkbox"]:checked + .sub-menu {
        display: block;
}
#menu .sub-menu a:hover {
        color: #444;
}
#toggle-menu .drop-icon, #menu li label.drop-icon {
        position: absolute;
        right: 1.5em;
        top: 1.25em;
}
#menu label.drop-icon, #toggle-menu span.drop-icon {
        border-radius: 50%;
        width: 1em;
        height: 1em;
        text-align: center;
        background-color: rgba(0, 0, 0, .125);
        text-shadow: 0 0 0 transparent;
        color: rgba(255, 255, 255, .75);
}
#menu .drop-icon {
        line-height: 1;
}
 @media only screen and (max-width: 64em) and (min-width: 52.01em) {
#menu li {
        width: 33.333%;
}
#menu .sub-menu li {
        width: auto;
}
}
 @media only screen and (min-width: 52em) {
#menu .main-menu {
        display: block;
}
#toggle-menu,  #menu label.drop-icon {
        display: none;
}
#menu ul span.drop-icon {
        display: inline-block;
}
#menu li {
        float: left;
        border-width: 0 1px 0 0;
}
#menu .sub-menu li {
        float: none;
}
#menu .sub-menu {
        border-width: 0;
        margin: 0;
        position: absolute;
        top: 100%;
        left: 0;
        width: 12em;
        z-index: 3000;
}
#menu .sub-menu,  #menu input[type="checkbox"]:checked + .sub-menu {
        display: none;
}
#menu .sub-menu li {
        border-width: 0 0 1px;
}
#menu .sub-menu .sub-menu {
        top: 0;
        left: 100%;
}
#menu li:hover > input[type="checkbox"] + .sub-menu {
        display: block;
}
}
</style>
</head>
 
<body>
https://w3bits.com/labs/css-responsive-nav/
<nav id="menu">
  <label for="tm" id="toggle-menu">Navigation <span class="drop-icon">></span></label>
  <input type="checkbox" id="tm">
  <ul class="main-menu cf">
    <li><a href="#">Sample</a></li>
    <li><a href="#">Dropdown <span class="drop-icon">></span>
      <label title="Toggle Drop-down" class="drop-icon" for="sm0">></label>
      </a>
      <input type="checkbox" id="sm0">
      <ul class="sub-menu">
        <li><a href="#">Item 1.1</a></li>
        <li><a href="#">Item 1.2</a></li>
        <li><a href="#">Item 1.3</a></li>
        <li><a href="#">Item 1.4</a></li>
      </ul>
    </li>
  </ul>
</nav>
</body>
</html>