28173 sujets

CSS et mise en forme, CSS3

Menu vertical css

Bonjour,

je souhaite créer le menu vertical comme décrit dans le tuto: (resultat)

J'ais juste un petit soucis au niveau du survol du point de menu 2-3-4. ceux-ci ne surbrille (change de couleur) pas comme le point de menu 1.
par contre les sous-menu eux surbrille correctement. (je crois que c'est fait exprès dans le tuto...une histoire de java...)
Peut-on aussi faire surbriller la base des points de menu 2-3-4 facilement? et comment ?

Merci énormement à tous intervenant. Smiley smile
Salut Smiley cligne ,

Dans le lien que tu donnes, c'est la balise <a> qui, combinée avec le CSS a:hover, permet de changer la couleur du background. Comme les Menus 2, 3 et 4 n'ont pas cette balise, il n'y a pas non plus de hover Smiley langue

Et mieux vaut parler de javascript que de java pour ne pas confondre les 2 Smiley lol .

A+
olalaa.. Merci Heyoan pour ta réponce rapide..

Pourait m'aider encore un ptit peut en m'indiquant quoi changer..je suis super débutant...

le code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<!-- saved from url=(0072)http://css.alsacreations.com/xmedia/exemples/deroulant/menu-vertical.htm -->
<HTML lang=fr xml:lang="fr" xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>Menu déroulant vertical</TITLE>
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<SCRIPT type=text/javascript>
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
	for (var i = 1; i<=10; i++) {
		if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
	}
if (d) {d.style.display='block';}
}
//-->
</SCRIPT>

<STYLE type=text/css>BODY {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND: white; PADDING-BOTTOM: 0px; MARGIN: 0px; FONT: 80% verdana, arial, sans-serif; PADDING-TOP: 0px
}
DL {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}
DT {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}
DD {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}
UL {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}
LI {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}
#menu {
	LEFT: 0px; POSITION: absolute; TOP: 0px
}
DL#menu {
	WIDTH: 15em
}
DL#menu DT {
	BORDER-RIGHT: gray 1px solid; BORDER-TOP: gray 1px solid; FONT-WEIGHT: bold; BACKGROUND: #ccc; MARGIN: 2px 0px; BORDER-LEFT: gray 1px solid; CURSOR: pointer; LINE-HEIGHT: 20px; BORDER-BOTTOM: gray 1px solid; HEIGHT: 20px; TEXT-ALIGN: center
}
DL#menu DD {
	BORDER-RIGHT: gray 1px solid; BORDER-TOP: gray 1px solid; BORDER-LEFT: gray 1px solid; BORDER-BOTTOM: gray 1px solid
}
DL#menu LI {
	BACKGROUND: #fff; TEXT-ALIGN: center
}
DL#menu LI A {
	BORDER-RIGHT: 0px; BORDER-TOP: 0px; DISPLAY: block; BORDER-LEFT: 0px; COLOR: #000; BORDER-BOTTOM: 0px; HEIGHT: 100%; TEXT-DECORATION: none
}
DL#menu DT A {
	BORDER-RIGHT: 0px; BORDER-TOP: 0px; DISPLAY: block; BORDER-LEFT: 0px; COLOR: #000; BORDER-BOTTOM: 0px; HEIGHT: 100%; TEXT-DECORATION: none
}
DL#menu LI A:hover {
	BACKGROUND: #eee
}
DL#menu DT A:hover {
	BACKGROUND: #eee
}
#mentions {
	LEFT: 10px; COLOR: #000; BOTTOM: 200px; FONT-FAMILY: verdana, arial, sans-serif; POSITION: absolute; BACKGROUND-COLOR: #ddd
}
#mentions A {
	COLOR: #222; TEXT-DECORATION: none
}
#mentions A:hover {
	TEXT-DECORATION: underline
}
</STYLE>

<META content="MSHTML 6.00.2900.3132" name=GENERATOR></HEAD>
<BODY>
<DL id=menu>
  <DT onclick=javascript:montre();><A 
  href="http://css.alsacreations.com/xmedia/exemples/deroulant/menu-vertical.htm#">Menu 
  1</A> </DT>
  <DT onclick="javascript:montre('smenu2');">Menu 2 
  <DD id=smenu2>
  <UL>
    <LI><A 
    href="http://css.alsacreations.com/xmedia/exemples/deroulant/menu-vertical.htm#">Sous-Menu 
    2.1</A> 
    <LI><A 
    href="http://css.alsacreations.com/xmedia/exemples/deroulant/menu-vertical.htm#">Sous-Menu 
    2.2</A> 
    <LI><A 
    href="http://css.alsacreations.com/xmedia/exemples/deroulant/menu-vertical.htm#">Sous-Menu 
    2.3</A> </LI></UL></DD>
  <DT onclick="javascript:montre('smenu3');">Menu 3 
  <DD id=smenu3>
  <UL>
    <LI><A 
    href="http://css.alsacreations.com/xmedia/exemples/deroulant/menu-vertical.htm#">Sous-Menu 
    3.1</A> 
    <LI><A 
    href="http://css.alsacreations.com/xmedia/exemples/deroulant/menu-vertical.htm#">Sous-Menu 
    3.1</A> 
    <LI><A 
    href="http://css.alsacreations.com/xmedia/exemples/deroulant/menu-vertical.htm#">Sous-Menu 
    3.1</A> 
    <LI><A 
    href="http://css.alsacreations.com/xmedia/exemples/deroulant/menu-vertical.htm#">Sous-Menu 
    3.1</A> 
    <LI><A 
    href="http://css.alsacreations.com/xmedia/exemples/deroulant/menu-vertical.htm#">Sous-Menu 
    3.1</A> 
    <LI><A 
    href="http://css.alsacreations.com/xmedia/exemples/deroulant/menu-vertical.htm#">Sous-Menu 
    3.1</A> </LI></UL></DD>
  <DT onclick="javascript:montre('smenu4');">Menu 4 
  <DD id=smenu4>
  <UL>
    <LI><A 
    href="http://css.alsacreations.com/xmedia/exemples/deroulant/menu-vertical.htm#">Sous-Menu 
    4.1</A> 
    <LI><A 
    href="http://css.alsacreations.com/xmedia/exemples/deroulant/menu-vertical.htm#">Sous-Menu 
    4.1</A> </LI></UL></DD></DL>
<DIV id=mentions>Raphaël GOETTER<BR><A 
href="http://www.alsacreations.com/">Alsacréations</A><BR><A 
href="http://css.alsacreations.com/Construction-de-menus-en-CSS/Un-menu-deroulant-en-CSS-et-XHTML-vertical-et-horizontal">Retour 
/ Back</A></DIV></BODY></HTML>


encore merci pour ton aide. Smiley langue
dmz a écrit :
Pourait m'aider encore un ptit peut en m'indiquant quoi changer.

Euh... Ben il n'y a rien à changer Smiley murf

Soit tu as un lien <a href...> et le hover va fonctionner, soit tu n'en as pas Smiley smile

Tu peux toujours rajouter :
dl#menu dt:hover {
background: #eee;
}
pour avoir le résultat que tu veux (enfin je crois...) : ça fonctionnera avec Firefox par exemple mais pas avec IE qui ne reconnaît que le a:hover.

A+
Sujet clos
Aller à