Finition sur un menu

Version imprimable

Bonjour à tous

Depuis environ 2 semaines, j'essai de corriger un petit bug de mon menu déroulant, je n'arrive pas à repérer mon erreur. Regardez mon menu:
http://ecole.leknoppix.fr/ (page testé que sous firefox et chrome)
J'ai un décalage dans mon sous menu et de plus, j'ai un contour arrondi autour de mes liens, que je n'arrive pas à supprimer.
Un peu d'aide serait la bienvenu.
Voici mon 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
 
#menulist .sousmenu
{
	display: none;
	position: absolute;
}
ul#menulist
{
    position:absolute;
    left: 236px;
    float:left;
}
#menu ul#menulist li
{
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */;
    list-style: none;
    display: inline-block;
    margin-left:15px;
    margin-right:15px;
}
#menu ul#menulist li a{
    color:white;
    font-family: 'Niconne', cursive;
    font-size:20px;
    font-weight:normal;
    text-decoration: none;
    padding-left:5px;
    padding-right:5px;
}
#menu ul#menulist li a.current, #menu ul#menulist li:hover a
{
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */;
    color:#ffce00;
    height: 25px;
    -webkit-border-radius: 8px/8px;
    -moz-border-radius: 8px/8px;
    border-radius: 8px/8px;
    background-color: #5f5723;
    -webkit-box-shadow: 0 0 2px rgba(0,130,200,.75), inset 0 2px 2px rgba(0,0,0,.5);
    -moz-box-shadow: 0 0 2px rgba(0,130,200,.75), inset 0 2px 2px rgba(0,0,0,.5);
    box-shadow: 0 0 2px rgba(0,130,200,.75), inset 0 2px 2px rgba(0,0,0,.5);
    background-image: -webkit-linear-gradient(bottom, #075f9f, #004695);
    background-image: -moz-linear-gradient(bottom, #075f9f, #004695);
    background-image: -o-linear-gradient(bottom, #075f9f, #004695);
    background-image: -ms-linear-gradient(bottom, #075f9f, #004695);
    background-image: linear-gradient(to top, #075f9f, #004695);
}
#menu ul#menulist ul.sousmenu li, #menu ul#menulist ul.sousmenu li a
{
	background: url('../img/fond_menu.png');
	width:149px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: small;
	height: 26px;
	line-height:26px;
}
#menu ul#menulist ul.sousmenu li:hover
{
	width:149px;
	background: url('../img/fond_menu_hover.png');
	height: 26px;
	line-height:26px;
	color:white;
}
#menu ul#menulist li:hover > .sousmenu
{
	display: block;
}
#menu ul#menulist .sousmenu li
{
	display: block;
	top:15px;
	position: relative;
}

Merci d'avance.
lemirandais

Bonjour,

vous pourriez rajouter un left:

Code:

1
2
3
4
5
6
#menu ul#menulist .sousmenu li {
  display: block;
  top: 15px;
  position: relative;
  left: -60px;
}

Les coins arrondis proviennent d'ici :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
#menu ul#menulist li a.current, #menu ul#menulist li:hover a
{
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */;
    color:#ffce00;
    height: 25px;
    -webkit-border-radius: 8px/8px;
    -moz-border-radius: 8px/8px;
    border-radius: 8px/8px;
    background-color: #5f5723;
    -webkit-box-shadow: 0 0 2px rgba(0,130,200,.75), inset 0 2px 2px rgba(0,0,0,.5);
    -moz-box-shadow: 0 0 2px rgba(0,130,200,.75), inset 0 2px 2px rgba(0,0,0,.5);
    box-shadow: 0 0 2px rgba(0,130,200,.75), inset 0 2px 2px rgba(0,0,0,.5);
    background-image: -webkit-linear-gradient(bottom, #075f9f, #004695);
    background-image: -moz-linear-gradient(bottom, #075f9f, #004695);
    background-image: -o-linear-gradient(bottom, #075f9f, #004695);
    background-image: -ms-linear-gradient(bottom, #075f9f, #004695);
    background-image: linear-gradient(to top, #075f9f, #004695);
}

Note : le background image ne sert à rien ici :

Code:

1
2
3
4
5
6
7
8
9
#menu ul#menulist ul.sousmenu li, #menu ul#menulist ul.sousmenu li a
{
	background: url('../img/fond_menu.png');
	width:149px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: small;
	height: 26px;
	line-height:26px;
}

16/08/2013, 18h57
lemirandais

Merci pour cette réponse.
Concernant les bords arrondis, je viens de trouver mais je vois pas comment les désactivés pour l'élément fils (.sousmenu).

De plus, le background-image du sous menu est "obligatoire" puisque sinon, je n'aurais pas le rendu attendu.
Voici le menu que je devrais avoir au final:
http://img11.hostingpics.net/thumbs/...7834apercu.png
lemirandais

Bonjour,
pour n'appliquer un style qu'aux enfants directs :

Code:

1
2
3
4
5
6
/* menu */
#menu ul#menulist > li {...}
#menu ul#menulist > li > a {...}
/* sous-menu */
#menu ul#menulist > li > ul > li {...}
#menu ul#menulist > li > ul > li > a {...}

16/08/2013, 19h06
rodolphebrd
Désactiver le border-radius initial et créer la règle suivante :
Code:

1 2 3 #menulist>li>a { border-radius: 8px; }
Citation:

Envoyé par lemirandais

De plus, le background-image du sous menu est "obligatoire" puisque sinon, je n'aurais pas le rendu attendu.

Placer une image en background qui est une couleur n'est pas judicieux.
Autant utiliser la couleur directement dans le background (background:bleu;)
16/08/2013, 19h12
lemirandais
Citation:
Envoyé par jreaux62

Bonjour,
pour n'appliquer un style qu'aux enfants directs :

Code:

1 2 3 4 5 6 /* menu */ #menu ul#menulist > li {...} #menu ul#menulist > li > a {...} /* sous-menu */ #menu ul#menulist > li > ul > li {...} #menu ul#menulist > li > ul > li > a {...}
Merci cela marche très bien.

Pour rodolphebrd, sur la photo cela ne se voit pas, mais tu as une petite ombre portée.

Merci beaucoup

lemirandais
16/08/2013, 19h16
Invité

L'ombre portée peut AUSSI se faire en CSS !
=> box-shadow (ou text-shadow sur un texte)

Concernant les sous-menus décalés :
PAR DEFAUT, les <ul> ont un padding-left.

POUR EVITER d'être gêné par ces valeurs par défaut, on peut mettre en tout début de fichier CSS :

Code:

* { margin:0; padding:0; border:0; }