Cacher/afficher des sous-menus

**bowow** · 04/02/2015, 23h15

Bonsoir,

Je commence le développement d'un site web personnel mais je rencontre quelques problèmes.

Déjà je me rends compte que j'ai des problèmes lors des positionnements, si je change la résolution, tous les éléments à l'écran se décalent et j'aimerais un code plutôt dynamique et adaptable.

J'ai aussi un petit espace entre le border-left et le background-color lors du a:hover, la couleur de fond devrait occuper tout l'espace du menu.

Sinon, j'ai ajouté un espace statique en bleu marine mais j'aimerais qu'il soit cacher de base, il ne doit s'afficher uniquement lors des passages sur les menus, avec l'affichage des sous-menus en horizontale dans cet espace.

Merci d'avance pour vos réponses.

Code HTML5

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
<DOCTYPE html>
<html lang="fr">
<head>
 
   <title> mon titre </title>
   <meta charset="utf-8" />
   <meta name="description" content="" />
   <meta name="author" content="name" />
   <link rel="stylesheet" type="text/css" href="style.css">
 
</head>
 
<body>
 
	<header>
		<a href="index.html"><img class="logo" src="./images/logo.png" alt="logo de mon site" title="retour à l'accueil"/></a>
		<nav id="main-menu">
				<ul class="nav-bar">
				   	<li class="menu1"><a href="index.html">Menu 1</a></li>
					<li class="menu2"><a href="index.html">Menu 2</a></li>
					<li class="menu3"><a href="index.html">Menu 3</a></li>
					<li class="menu4"><a href="index.html">Menu 4</a></li>
				</ul>
		</nav>
		<form name="frm" action="./auth.php" method="post">
			<label>Login</label> <input id="login" type="text" value="Pseudonyme" name="s_login" onFocus="document.getElementById('login').value = '';" />
			<label>Mot de passe</label> <input id="mdp" type="password" value="passwd" name="s_mdp" onFocus="document.getElementById('mdp').value = '';" />
			<input type="button" value="s'authentifier" />
			<input type="button" value="s'inscrire" />
		</form>
	</header>
 
	<div id="presentation">
	</div>
 
</body>
</html>

Code CSS3

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
body {
 
margin: 0;
padding: 0;
font-family: sans-serif;
 
}
 
.logo {
 
height: 80%;
 
}
header {
 
width: 100%;
height: 7%;
 
}
 
form {
 
margin: -41px -200px -200px 1100px;
font-weight: bold;
font-size: 16px;
text-transform: uppercase;
 
}
 
input, label {
 
margin-right: 10px;
 
}
 
header #main-menu .nav-bar {
 
list-style: none;
margin: -33px 10px 20px 9%;
padding: 0;
 
 
}
 
header #main-menu .nav-bar li {
 
display: inline;
color: black;
background-color: white;
 
}
 
header #main-menu .nav-bar a {
 
background: white ;
color: black;
font-weight: bold;
text-decoration:none;
font-style: Arial, Helvetica, sans-serif;
font-size: 20px;
text-transform: uppercase;
text-shadow: 1px 1px 1px #555; 
padding: 40px 40px 25px 40px;
border-left: 1px solid rgba(127, 0, 0, 0.1);
 
}
 
header #main-menu li  a:hover {
 
background-color: #0a1d3b;
color:white;
 
}
 
#presentation {
 
width: 100%;
height: 10%;
background: #0a1d3b;
 
}

**NoSmoking** · 05/02/2015, 23h13

Bonjour,
mais à quoi correspond ton 9% dans margin: -33px 10px 20px 9%; sur ton .nav-bar

Cacher/afficher des sous-menus

CSS

Discussions similaires

Partager

Partager