28105 sujets

CSS et mise en forme, CSS3

Bonjour à tous - encore un problème de menu !

J'ai adapté un menu trouvé sur le net pour mon propre usage. Tout fonctionne sur tous les navigateurs, mais en faisant les derniers tests je réalise que la navigation au clavier ne déroule pas les sous menus.

J'ai beau chercher, je ne trouve pas le "pourquoi du comment de la raison de la cause" alors avant de me tourner vers mon psy, je m'en remets à vous.

Ci dessous le code du menu coupable ... Z'avez une idée m'sieurs dames ?
A vot' bon coeur ! Smiley lol

--------------------------------------------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title> Menu CSS</title>
<style type="text/css">
/* style the outer div to give it width */
.menu 
{
	font-size: 0.69em;
	padding-bottom: 200px;
	font-family: Verdana;
	font-weight: bold;
	font-variant: small-caps;
}

/* remove all the bullets, borders and padding from the default list styling */
.menu ul
{
	padding: 0;
	margin:0;
	list-style-type: none;
	height: 3.7em;
}

/* style the sub-level lists */
.menu ul ul 
{
	width: 15em;
}

/* float the top list items to make it horizontal and a relative positon so that you can control the dropdown menu positon */
.menu ul li 
{
	float: left;
	height: 3.7em;
	line-height: 3.7em;
	border-bottom: solid 0.1em #fff;
	padding-left: 0.15em;
}

/* style the sub level list items */
.menu ul ul li 
{
	display: block;
	width: 12em;
	height: 3.7em;
	position: relative;
	line-height: 1em;
}

/* style the links for the top level */
.menu a,
.menu a:visited 
{
	display: block;
	float: left;
	height: 100%;
	text-decoration: none;
	color: #a3b1c3; 
	padding:0 1em 0em 3.7em;
}

/* style the sub level links */
/* white stripe come from fixed height bit higher than height + padding */
.menu ul ul a,
.menu ul ul a:visited 
{
	display: block;
	background: #e7f1f7;
	width: 18em;
	line-height: 1em;
	padding: 1.1em 0 0 3.7em;
	color: #012243;
	height: 2.6em;
}

.menu ul table ul a,
.menu ul table ul a:visited
{
	width: 18em;
	w\idth: 18em;
	color: #012243;
}


/* style the table so that it takes no part in the layout - required for IE to work */
.menu table 
{
	position: absolute;
	left: -3px;
	top: 0;
	z-index: -1;
}

.menu ul ul table 
{
	lef\t: -1px;
}

.menu ul ul table ul.left 
{
	margin-lef\t: 0;
}

.menu li:hover,
.menu li:focus
{
	position: relative;
}

* html .menu a:hover,
* html .menu a:focus 
{
	position: relative;
}

/* style the third level background */
.menu ul ul ul a,
.menu ul ul ul a:visited 
{
	background: #ccc;
}

/* style the fourth level background */
.menu ul ul ul ul a,
.menu ul ul ul ul a:visited 
{
	background: #ddd;
}

/* style the sub level 1 background */
.menu ul :hover a.sub1,
.menu ul :focus a.sub1  
{
	/*background: #ccc;*/
}
/* style the sub level 2 background */
.menu ul ul :hover a.sub2 
{
	background: #ddd;
}

/* style the level hovers */
/* first */
.menu a:hover,
.menu a:focus,
.menu a.Current
{
	color: #012243;
}

.menu :hover > a,
.menu :focus > a,
.menu > a.Current 
{
	color: #012243;
}

/* second */
.menu ul ul a:hover
{
	color: #fff;
	background: #9cd0eb;
}

.menu ul ul :hover > a
{
	color: #fff;
	background: #9cd0eb;
}

/* third */
.menu ul ul ul a:hover
{
	background: #ddd;
}

.menu ul ul ul :hover > a
{
	background: #ddd;
}
/* fourth */
.menu ul ul ul ul a:hover
{
	background: #eee;
}

/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu ul ul 
{
	visibility: hidden;
	position: absolute;
	height: 0;
	top: 3.7em;
	left: 0;
	width: 18em;
}

/* position the third level flyout menu */
.menu ul ul ul
{
	left: 21.6em;
	top: 0;
	width: 18em;
}

/* position the third level flyout menu for a left flyout */
.menu ul ul ul.left 
{
	left: -21.6em;
}

/* make the second level visible when hover on first level list OR link */
.menu ul li:hover ul,
.menu ul li:focus ul,
.menu ul a:focus ul,
.menu ul a:hover ul
{
	visibility: visible;
	height: auto;
	padding-bottom: 3em;
}

/* keep the third level hidden when you hover on first level list OR link */
.menu ul :hover ul ul
{
	visibility: hidden;
}
/* keep the fourth level hidden when you hover on second level list OR link */
.menu ul :hover ul :hover ul ul
{
	visibility: hidden;
}
/* make the third level visible when you hover over second level list OR link */
.menu ul :hover ul :hover ul
{
	visibility: visible;
}
/* make the fourth level visible when you hover over third level list OR link */
.menu ul :hover ul :hover ul :hover ul
{
	visibility: visible;
}

</style>
<!--[if IE 7]>
<style type="text/css">
.menu ul ul ul 
{
	margin-left: -1px;
}

.menu ul ul ul.left 
{
	margin-left: 1px;
}
</style>
<![endif]-->


</head>

<body>
<div class="menu">
<ul>
<li id="Home"><a href="../menu/index.html">Home<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
	<ul>
	<li><a href="lia1.html" title="bla bla bla">bla bla bla</a></li>
	<li><a href="lia2.html.html" title="Sample">this is a sample</a></li>
	<li><a href="lia3.html" title="Style is ">style is ...</a></li>
	<li><a href="lia4.html" title="active focus">active focus</a></li>
	<li><a class="sub1" href="lia5.html" title="that s it">that's it<!--[if IE 7]><!--></a><!--<![endif]-->
	<!--[if lte IE 6]><table><tr><td><![endif]-->
		<ul>
			<li><a href="lili1.html" title="o temps">o temps</a></li>
			<li><a href="lili2.html" title="Suspends ton vol">Suspends ton vol</a></li>
			<li><a class="sub2" href="#nogo">Survol 3ème niveau<!--[if IE 7]><!--></a><!--<![endif]-->
			<!--[if lte IE 6]><table><tr><td><![endif]-->
				<ul>
					<li><a href="#nogo">Third level-1</a></li>
					<li><a href="#nogo">Third level-2</a></li>
					<li><a href="#nogo">Third level-3</a></li>
					<li><a href="#nogo">Third level-4</a></li>
				</ul>
			<!--[if lte IE 6]></td></tr></table></a><![endif]-->
			</li>
			<li><a href="gonogo.html" title="Go no Go">Go no Go</a></li>
		</ul>
	<!--[if lte IE 6]></td></tr></table></a><![endif]-->
	</li>
	<li><a href="what.html" title="so what">So what !</a></li>
	<li><a href="else.html" title="else ?">what else ?</a></li>
	<li><a href="mars.html" title="mars">Mars images</a></li>
	<li><a href="atack.html" title="attack">attack</a></li>
	<li><a href="arigato.html" title="arigato go">arigato go</a></li>
	</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="gridview.html" class="Current"><strong>Gridview</strong><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
	<ul>
	<li><a href="spies.html" title="a coded list of spies">a coded list of spies</a></li>
	<li><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li>
	<li><a href="expand.html" title="an enlarging unordered list">enlarging unordered list</a></li>
	<li><a href="enlarge.html" title="an unordered list with link images">link images</a></li>
	<li><a href="cross.html" title="non-rectangular links">non-rectangular</a></li>
	<li><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></li>
	<li><a href="circles.html" title="circular links">circular links</a></li>
	</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="../mozilla/index.html">Popups<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
	<ul>
	<li><a href="thewall.html" title="the wall">the wall</a></li>
	<li><a href="Starway.html" title="Starway to heaven">Starway to heaven</a></li>
	<li><a href="knocking.html" title="knocking on">knocking on</a></li>
	<li><a href="moxbox.html" title="mozzie box">mozzie box</a></li>
	<li><a href="rainbow.html" title="Somewhere over the rainbow">Somewhere over the rainbow</a></li>
	<li><a href="snooker.html" title="Snooker cue">a snooker cue</a></li>
	<li><a href="target.html" title="Target Practise">target practise</a></li>
	<li><a href="splittext.html" title="Two tone headings">two tone headings</a></li>
	<li><a href="shadow_text.html" title="Shadow text">shadow text</a></li>
	</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="Controls.html">Controls<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
	<ul>
	<li><a href="BB.html" title="Letter B">Letter B</a></li>
	<li><a href="CC.html" title="Letter C">Letter C</a></li>
	<li><a href="DD.html" title="Letter D">Letter D</a></li>
	</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="GG.html">Controls Populating<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
	<ul>
	<li><a href="HH.html" title="Letter H">Letter H using colours</a></li>
	<li><a href="picturemenu.html" title="a menu picture">a menu picture</a></li>
	<li><a href="LL.html" title="Letter L">Letter L</a></li>
	<li><a href="MM.html" title="Letter M">Letter M</a></li>
	<li><a class="sub1" href="NN.html" title="Letter N">Letter N<!--[if IE 7]><!--></a><!--<![endif]-->
	<!--[if lte IE 6]><table><tr><td><![endif]-->
		<ul class="left">
			<li><a href="form.html" title="Styling forms">styled form</a></li>
			<li><a href="robots.html" title="Robots">Robots</a></li>
			<li><a href="hover_click.html" title="Hover/click">hover/click</a></li>
		</ul>
	<!--[if lte IE 6]></td></tr></table></a><![endif]-->
	</li>
	</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>

</div>
</body>
</html>
Salut,

Juste une remarque au passage : Les menus déroulants full CSS trouvés sur le site cssplay.co.uk sont certes des prouesses CSS mais ne sont en aucun cas pertinents pour le cas d'utilisation en environnement de production.
Je fais un essai avec cette solution et je suis preneur de tous les conseils mais justement : peux-tu expliquer un peu ton propos ? Ces menus ont des "vices cachés" ? Smiley rolleyes