28220 sujets

CSS et mise en forme, CSS3

Un problème de CSS !

Bonjour !

Je voudrais que ceci : 
div#nav ul.level1 li.submenu:hover ul.level2, 
div#nav ul.level2 li.submenu:hover ul.level3 {display: block;}

qui sert à créer un menu avec des sous-menus s'ouvrant au survol et qui fonctionne dans cet exemple : 

<html>
<head>
<title>Project 6</title>
<style type="text/css">
body {background: #EEE; color: #000;
  behavior: url(csshover.htc);} /* WinIE behavior call */
h1 {color: #AAA; border-bottom: 1px solid; margin-bottom: 0;}
#main {color: #CCC; margin-left: 7em; padding: 1px 0 1px 5%;
  border-left: 1px solid;}
div#nav {float: left; width: 7em;
  background: #FDD;}
div#nav ul {margin: 0; padding: 0; width: 7em; background: white;
  border: 1px solid;}
div#nav li {position: relative; list-style: none; margin: 0;
  border-bottom: 1px solid #CCC;}
div#nav li:hover {background: #EBB;}
div#nav li.submenu {background: url(submenu.gif) 95% 50% no-repeat;}
div#nav li.submenu:hover {background-color: #EDD;}
div#nav li a {display: block; padding: 0.25em 0 0.25em 0.5em;
  text-decoration: none; width: 6.5em;}
div#nav>ul a {width: auto;}
div#nav ul ul {position: absolute; top: 0; left: 7em;
  display: none;}
div#nav ul.level1 li.submenu:hover ul.level2,
div#nav ul.level2 li.submenu:hover ul.level3 {display: block;}
</style>
</head>
<body>
<h1>Adipiscing Rhubarb</h1>

<div id="nav">
<ul class="level1">
 <li><a href="/">Home</a></li>
 <li class="submenu"><a href="/services/">Services</a>
  <ul class="level2">
   <li><a href="/services/strategy/">Strategy</a></li>
   <li><a href="/services/optimize/">Optimization</a></li>
   <li><a href="/services/guidance/">Guidance</a></li>
   <li><a href="/services/training/">Training</a></li>
  </ul>
 </li>
 <li><a href="/events/">Events</a></li>
 <li class="submenu"><a href="/pubs/">Publications</a>
  <ul class="level2">
   <li><a href="/pubs/articles/">Articles</a></li>
   <li class="submenu"><a href="/pubs/tuts/">Tutorials</a>
    <ul class="level3">
     <li><a href="/pubs/tuts/html/">HTML</a></li>
     <li><a href="/pubs/tuts/css/">CSS</a></li>
     <li><a href="/pubs/tuts/svg/">SVG</a></li>
     <li><a href="/pubs/tuts/xml/">XML</a></li>
    </ul>
   </li>
   <li><a href="/pubs/wpapers/">White Papers</a></li>
   <li><a href="/pubs/comment/">Commentary</a></li>
  </ul>
 </li>
 <li><a href="/contact/">Contact</a></li>
</ul>
</div>

<div id="main">
<p>
Lorem ipsum, dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
 Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Lorem ipsum, dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Lorem ipsum, dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Lorem ipsum, dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
 Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Lorem ipsum, dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Lorem ipsum, dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</p>

</div>

</body>
</html>


fonctionne sur cette page :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Project 6</title>
<style type="text/css">
<!--
body {padding: 0; margin: 1px; behavior: url(csshover.htc);}
dl, dt, dd, ul, li {margin: 0; padding: 0; list-style-type: none;}
#menu {width: 7em; position: absolute; top: 1px; left: 1px; border: 1px solid blue;}
#menu a {
text-align: center;
color: #000;
text-decoration: none;
height: 2em;
background: #2cd8e0;
width: 7em;
display: block;
}
#menu a:hover {text-decoration: underline;}
#menu dt {cursor: pointer;}
#menu dd {
width: 8em;
position: absolute;
left: 7em;
margin-top: -2em;
border: 1px solid blue;
display: none;
}
#menu dd a {width: 8em;}
#menu dd ul {position: absolute; left: 8em; border: 1px solid blue; width: 9em; margin-top: -2em;}
#menu li a {height: 2em; width: 9em;}

dl#menu dt a.submenu:hover dd.l2,
dl#menu dd.l2 a.submenu:hover ul.l3 {display: block;}
-->
</style>
</head>
<body>

<dl id="menu">
  <dt class="l1"><a href="#" class="submenu">Menu 1</a></dt>
    <dd class="l2">
      <a href="#">Sous-Menu 1.1</a>
      <a href="#">Sous-Menu 1.2</a>
      <a href="#">Sous-Menu 1.3</a>
    </dd>

  <dt><a href="#" class="submenu">Menu 2</a></dt>
    <dd class="l2">
      <a href="#" class="submenu">Sous-Menu 2.1</a>
        <ul class="l3">
          <li><a href="#">Sous-Sous-Menu 2.1.1</a></li>
        </ul>
      <a href="#">Sous-Menu 2.2</a>
    </dd>

  <dt><a href="#">Menu 3</a></dt>
    <dd>
      <a href="#">Sous-Menu 3.1</a>
      <a href="#">Sous-Menu 3.2</a>
      <a href="#">Sous-Menu 3.3</a>
      <a href="#">Sous-Menu 3.4</a>
      <a href="#">Sous-Menu 3.5</a>
      <a href="#">Sous-Menu 3.6</a>
    </dd>

  <dt><a href="#">Menu 4</a></dt>
    <dd>
      <a href="#">Sous-Menu 4.1</a>
      <a href="#">Sous-Menu 4.2</a>
    </dd>
</dl>

</body>
</html>



Comme vous pouvez le voir j'ai essayé cela : 
dl#menu dt a.submenu:hover dd.l2,
dl#menu dd.l2 a.submenu:hover ul.l3 {display: block;}

mais cela ne marche pas... où est l'erreur ?

Merci !
Modifié par CNeo (29 Oct 2005 - 12:38)
Modérateur
Bonjour CNeo,

Pourrais-tu présenter ton code avec le code approprié, tel qu'indiqué dans les aides et règles ? Suffit de mettre le code entre [ code] et [ /code] (sans les espaces)

Merci
Modérateur
Un peu de patience s'il-te-plaît. Les membres sont simplement indisponibles pour le moment, moi y compris. C'est vendredi après tout, faut profiter du week-end. Smiley smile
CNeo a écrit :
Personne n'a de solution !

Enlever Menu ! Urgent ! de ton titre comme demander dans les règles.

Notes que la communauté des membres d'Alsacréations n'est pas réactive à la moindre de tes demandes, il faut laisser passer calmement un peu de temps, tes premiers et derniers posts sont datés:
-28 Oct 2005 - 22:34:27
-28 Oct 2005 - 23:22:51

Smiley ohwell
Bonjour,
Je pense que ton problème vient du fait que le dd ne dépend pas du dt contrairement aux li ul
Sujet clos
Aller à