28173 sujets

CSS et mise en forme, CSS3

Menu déroulant qui ne m'obeit pas !

Bonjour à tous,

Je débute en CSS et j'aurais besoin de votre aide !

Je viens d'essayer pour la première fois de réaliser un menu déroulant entièrement en CSS.
Je me suis pour cela fortement inspirée de ce modèle qui me simple parfaitement bien réalisé...


Voici mon site de test...
Et mes CSS relatives à ce menu :

#mainmenu { 
width: 490px;
margin: 0 0 0 184px; /* Pour la sidebar */
padding: 0; 
text-align: left;
} 
#mainmenu a{ 
color: #999999;
} 
#mainmenu a:hover{
	color: #FFFFFF;
} 
	
/* Bandeau de navigation : partie centrale */
.nav {
	background: #000000 url(images/mainmenu/nav_bg.png) repeat-x;
	float: left;
}
/* Bandeau de navigation : partie de gauche */
.nav-left {
	background: url(images/mainmenu/nav_left.png) no-repeat top left;
	float: left;
	width: 6px;
	height: 41px;
}
/* Bandeau de navigation : partie de droite */
.nav-right {
	background: url(images/mainmenu/nav_right.png) no-repeat top right;
	float: left;
	width: 11px;
	height: 41px;
}
/* Bandeau de navigation : contenu */
.nav ul {
	width: 472px;
	height: 38px;
	float: left;
	margin: 0;
	padding-top: 3px;
	padding-left:0;
	list-style: none;
	font-size: 8pt;
	text-transform:uppercase;
}
/* Bandeau de navigation : chaque élément + dernier élément */
.nav li {
	float: left;
	background: url(images/mainmenu/split.png) no-repeat right center;
	position: relative;
	z-index: 1;
	padding-top: 0;
	padding-right: 5px;
	padding-bottom: 0;
	padding-left: 5px;
}
.nav li.last {
	background:none;
}
/* Bandeau de navigation : liens */
.nav li:hover {
	z-index:2;
}
.nav li a {
	display: block;
	line-height: 38px;
	overflow: hidden;
	float: left;
}

/* Partie gauche du menu */
a .menu-left {
	background:url(images/mainmenu/menu_left.gif) no-repeat left top;
	width: 8px;
	height: 32px;
	line-height: 35px;
	display: block;
	float: left;
}
/* Partie centrale du menu */
a .menu-mid {
	background: url(images/mainmenu/menu_mid.gif) repeat-x top left;
	height: 32px;
	line-height: 35px;
	display: block;
	float: left;
}
/* Partie droite du menu */
a .menu-right {
	background: url(images/mainmenu/menu_right.gif) no-repeat top left;
	width: 8px;
	height: 32px;
	line-height: 35px;
	display: block;
	float: left;
}
/* Liens des menus */
.nav li a:hover .menu-left,
.nav li.active a .menu-left,
.nav li:hover a .menu-left,
.nav li a:hover .menu-mid,
.nav li.active a .menu-mid,
.nav li:hover a .menu-mid,
.nav li a:hover .menu-right,
.nav li.active a .menu-right,
.nav li:hover a .menu-right {
	background-position: 0 -37px;
	line-height: 35px;
}

.nav li a:hover,
.nav li.active a,
.nav li.hover a,
.nav li:hover a {
	color: #09548B;
}
/* Les sous-menus */
.nav li:hover .sub,
.nav li.hover .sub {
	display:block;
}
.nav li .sub {
	display: none;
	position: absolute;
	top: 27px;
	left: 6px;
	background: url(images/mainmenu/submenu_top.png) no-repeat;
	width: 186px;
	padding-top: 5px;
}
/* Les textes des sous/menus */
.nav li ul {
	background: url(images/mainmenu/submenu_bg.png) repeat-y;
	width: 162px;
	height: auto;
	margin: 0;
	list-style: none;
	font-size: 10pt;
	text-transform: none;
	padding-top: 0;
	padding-right: 12px;
	padding-bottom: 5px;
	padding-left: 12px;
}
.nav li:hover li,
.nav li.active li {
	width: 100%;
	padding: 1px 0 2px;
	border-bottom: 1px #CCCCCC solid;
	background: none !important;
}
.nav li:hover li a,
.nav li.active li a {
	color: #FFFFFF;
	background: none !important;
	line-height: normal;
	width: 156px;
	text-indent: 1px;
	padding-top: 5px;
	padding-right: 1px;
	padding-bottom: 1px;
	padding-left: 1px;
}
.nav li:hover li a:hover,
.nav li.active li a:hover {
	color: #FFFFFF;
	background: #333333 !important;
	text-decoration: none;
	line-height: normal;
}
/*IE*/
.nav li li a:hover,
.nav li li a:hover {
	color: #FFFFFF;
	background: #CCCCCC !important;
	text-decoration: none;
	line-height: normal;
}
/**/
.nav .btm-bg {
	background: url(images/mainmenu/submenu_bottom.png) no-repeat;
	width: 205px;
	height: 9px;
	overflow: hidden;
	clear: both;
}


J'arrive globalement au résultat voulu à quelques exceptions près :

- Sous Firefox et Opera, j'obtiens des carrés blancs dans ma balise 
<span class="menu-left"></span>
très vilains, et je ne comprends absolument pas d'où ils sortent !
- Sous Opera et IE, un filet blanc très moche...
Enfin avec IE, je ne comprends rien du tout, les menus déroulants ne s'affichent pas du tout...

Si quelqu'un avait la patience et la gentillesse de m'expliquer tout ça, je serais comblée ! Smiley confused

Merci d'avance ! Smiley lol
si tu débutes en css, mieux vaut ne pas commencer par les menus déroulants ! Essai de faire quelque chose par tes propres moyens et que tu comprennes !
Merci pour ta réponse...
Je débute mais je sais faire un menu classique (la preuve en est le menu du bas du site en question) mais je pense que le meilleur moyen de progresser est justement de s'attaquer à des choses qui nous dépassent.
Sujet clos
Aller à