28172 sujets

CSS et mise en forme, CSS3

Bonjour, je suis nouveau ici et je vous écris car après de nombreuses recherches je ne trouve pas de réponse à mon problème.
J'ai créer un menu déroulant en css mais je n'arrive pas à y inclure de sous-menu; je vous joins ci-dessous le code de mon menu pour que vous y voyez plus clair.
Je cherche donc à inclure des sous-menus à mes menus pré-existants.
J'espère que vous pourrez m'aider.
Cordialement.
<ul id="menu">
  <li><a href="#" class="active"><span>Accueil</span></a></li>
  <li><a href="#"><span>Chronologie</span></a></li>
  <li><a href="#"><span>Diablo</span></a></li>
  <li><a href="#"><span>Starcraft</span></a></li>
  <li><a href="#"><span>Warcraft</span></a></li>
  <li><a href="#"><span>World Of Warcraft</span></a></li>
  <li><a href="#"><span>A venir ...</span></a></li>
</ul


Et le code css associé:
#menu{width: 100%; margin: 0 auto; padding: 0; height: 30px; position: absolute; top: 300px; width: 100%; display: block; background: url(../Images/menu_images.png) repeat-x; list-style-type: none; border: 0;}
#menu li{padding: 0; margin: 0; list-style: none; float: left; position: relative; left: 28%; border: 0;}
#menu li a{float: left; padding-left: 15px; display: block; color: rgb(255,255,255); text-decoration: none; font: 12px Verdana, Arial, Helvetica, sans-serif; cursor: pointer; background: url(../Images/menu_images.png) 0px -30px no-repeat;}
#menu li a span{line-height: 30px; float: left; display: block; padding-right: 15px; background: url(../Images/menu_images.png) 100% -30px no-repeat;}
#menu li a:hover{background-position: 0px -60px; color:rgb(255,255,255);}
#menu li a:hover span{background-position: 100% -60px;}
#menu li a.active, .menu li a.active:hover{line-height: 30px; font: 12px Verdana, Arial, Helvetica, sans-serif; background: url(../Images/menu_images.png) 0px -90px no-repeat; color: rgb(59,172,246);}
#menu li a.active span, .menu li a.active:hover span{background: url(../Images/menu_images.png) 100% -90px no-repeat;}