Problème affichage menu déroulant

Résolu
Bonjour,
j'ai un petit problème concernant l'affichage du menu déroulant horizontal de mon site.
(http://sportix.fr).

J'aimerais que ça fasse comme sur: https://www.vulgarisation-informatique.com/ c'est à dire que les éléments du menu ne passent pas en dessous de mes cadres mais au dessus parce-que là on le les voit pas!!
merci d'avance pour votre aide!
Configuration: Windows XP
Firefox 2.0.0.13

2 réponses

  1. La fenêtre C:windows/system32 apparait au demarrage de XP
    Comment la supprimer
    Merci
    Roger
    1. Bon bah voilà j'ai fais quelques modifications, notamment le <li> et l'image en jpg. Voilà le code html et css:

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
      <title>Sportix.fr - Paris, son histoire, ses monuments et édifices</title>
      <META NAME="description" CONTENT="Sportix.fr - Présentation intégrale de Paris, son histoire, son actualité, ses monuments et édifices...">
      <META NAME="keywords" CONTENT="Sportix.fr, paris, tour eiffel, arc de triomphe, invalides, montmartre, place du Tertre, la concorde, colonne de juillet, bastille, parisien, Lutèce, psg.">
      <META NAME="dc.keywords" CONTENT="Sportix.fr, paris, tour eiffel, arc de triomphe, invalides, montmartre, place du Tertre, la concorde, colonne de juillet, bastille, parisien, Lutèce, psg.">
      <META NAME="subject" CONTENT="Toute l'info concernant Paris">
      <META NAME="author" CONTENT="A.Verm">
      <META NAME="copyright" CONTENT="©Sportix.fr 2008">
      <META NAME="revisit-after" CONTENT="1 day">
      <META NAME="identifier-url" CONTENT="http://sportix.fr">
      <META NAME="reply-to" CONTENT="sportix@free.fr">
      <META NAME="Robots" CONTENT="all">
      <META NAME="Rating" CONTENT="General">
      <META NAME="Classification" CONTENT="Sportix Paris Tour Eiffel Montmartre">
      <META http-equiv="Content-Language" CONTENT="fr">
      <META http-equiv="Content-type" CONTENT="text/html;charset=iso-8859-1">
      <META NAME="location" CONTENT="France, FRANCE">
      <META NAME="expires" CONTENT="never">
      <META NAME="date-revision-ddmmyyyy" CONTENT="">
      <META NAME="Distribution" CONTENT="Global">
      <META NAME="Audience" CONTENT="General">
      <META http-equiv="Content-Script-Type" CONTENT="text/javascript">
      <META http-equiv="Content-Style-Type" CONTENT="text/ccs">
      <link rel="stylesheet" href="style.css" />

      <script type="text/javascript">
      sfHover = function() {
      var sfEls = document.getElementById("menu").getElementsByTagName("li");
      for (var i=0; i<sfEls.length; i++) {
      sfEls[i].onmouseover=function() {
      this.className+=" sfhover";
      }
      sfEls[i].onmouseout=function() {
      this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
      }
      }
      }
      if (window.attachEvent) window.attachEvent("onload", sfHover);

      </script>

      </head>

      <body>
      <div id="banniere">
      <img src="images/banniere.jpg" width="100%" />
      </div>

      <ul id="menunav">

      <li class="rubrique">
      <a href="#" title="Accueil" class="first-rub">Accueil</a>

      <ul>
      <li class="rubrique">
      <a href="index.html" title="Accueil" class="second-rub">Accueil</a></li>
      <li class="rubrique">
      <a href="#" title="Forum" class="second-rub">Forum</a></li>

      <li class="rubrique">
      <a href="#" title="Quizz" class="second-rub">Quizz sur Paris</a></li>
      <li class="rubrique">
      <a href="#" title="Livre d'or" class="second-rub">Livre d'or</a></li>
      <li class="rubrique">
      <a href="#" title="Contact" class="second-rub">Contact</a></li>
      </ul>
      </li>

      <li class="rubrique">
      <a href="#" title="Histoire" class="first-rub">Histoire</a>

      <ul>
      <li class="rubrique">
      <a href="#" title="Au Moyen-Age" class="second-rub">Au Moyen-Age</a></li>

      <li class="rubrique">
      <a href="#" title="Renaissance" class="second-rub">Renaissance</a></li>
      <li class="rubrique">
      <a href="#" title="Révolution" class="second-rub">Révolution</a></li>
      <li class="rubrique">
      <a href="#" title="Paris Contemporain" class="second-rub">Contemporain</a></li>

      </ul>
      </li>

      <li class="rubrique">
      <a href="#" title="Edifices" class="first-rub">Edifices</a>

      <ul>
      <li class="rubrique">
      <a href="#" title="Les Invalides" class="second-rub">Les Invalides</a></li>
      <li class="rubrique">
      <a href="#" title="Tour Eiffel" class="second-rub">Tour Eiffel</a></li>
      <li class="rubrique">
      <a href="#" title="L'Arc de Triomphe" class="second-rub">Arc de Triomphe</a></li>

      <li class="rubrique">
      <a href="#" title="l'Opéra Garnier" class="second-rub">Opéra Garnier</a></li>
      <li class="rubrique">
      <a href="#" title="Le Sacré Coeur" class="second-rub">Le Sacré Coeur</a></li>
      <li class="rubrique">
      <a href="#" title="Notre-Dame de Paris" class="second-rub">Notre-Dame</a></li>
      <li class="rubrique">
      <a href="#" title="La Madeleine" class="second-rub">La Madeleine</a></li>
      <li class="rubrique">
      <a href="#" title="La Basilique Saint-Denis" class="second-rub">Bas Saint-Denis</a></li>

      <li class="rubrique">
      <a href="#" title="Le Centre Pompidou" class="second-rub">Centre Pompidou</a></li>
      <li class="rubrique">
      <a href="#" title="Panthéon" class="second-rub">Panthéon</a></li>
      <li class="rubrique">
      <a href="#" title="Le Centre Pompidou" class="second-rub">Centre Pompidou</a></li>
      <li class="rubrique">
      <a href="#" title="Grand Palais" class="second-rub">Le Grand Palais</a></li>
      <li class="rubrique">
      <a href="#" title="Hôtel de Ville" class="second-rub">Hôtel de Ville</a></li>
      </ul>
      </li>

      <li class="rubrique">
      <a href="#" title="Les Musées Parisiens" class="first-rub">Musées</a>

      <ul>
      <li class="rubrique">
      <a href="#" title="Musée d'Orsay" class="second-rub">Musée d'Orsay</a></li>
      <li class="rubrique">
      <a href="#" title="Louvre" class="second-rub">Louvre</a></li>
      <li class="rubrique">
      <a href="#" title="Musée Picasso" class="second-rub">Musée Picasso</a></li>

      <li class="rubrique">
      <a href="#" title="L'Orangerie" class="second-rub">L'Orangerie</a></li>
      <li class="rubrique">
      <a href="#" title="IMA" class="second-rub">IMA</a></li>
      <li class="rubrique">
      <a href="#" title="Musée Marmottan" class="second-rub">Musée Marmottan</a></li>

      <li class="rubrique">
      <a href="#" title="Musée Rodin" class="second-rub">Musée Rodin</a></li>
      <li class="rubrique">
      <a href="#" title="Musée Grévin" class="second-rub">Musée Grévin</a></li>
      <li class="rubrique">
      <a href="#" title="Musée Carnavalet" class="second-rub">Musée Carnavalet</a></li>
      <li class="rubrique">
      <a href="#" title="Petit Palais" class="second-rub">Le Petit Palais</a></li>
      <li class="rubrique">
      <a href="#" title="Musée du Quai Branly" class="second-rub">Quai Branly</a></li>
      </ul>
      </li>

      <li class="rubrique">
      <a href="#" title="Parcs & Jardins" class="first-rub">Nature</a>

      <ul>
      <li class="rubrique">
      <a href="#" title="Les Tuileries" class="second-rub">Les Tuileries</a></li>
      <li class="rubrique">
      <a href="#" title="Jardin des Plantes" class="second-rub">Jardin des plantes</a></li>

      <li class="rubrique">
      <a href="#" title="Jardin du Luxembourg" class="second-rub">Luxembourg</a></li>
      <li class="rubrique">
      <a href="#" title="Parc Floral" class="second-rub">Parc Floral</a></li>
      <li class="rubrique">
      <a href="#" title="Parc Monceau" class="second-rub">Parc Monceau</a></li>
      <li class="rubrique">
      <a href="#" title="Parc de la Villette" class="second-rub">La Villette</a></li>
      <li class="rubrique">
      <a href="#" title="Bois de Boulogne" class="second-rub">Bois de Boulogne</a></li>

      <li class="rubrique">
      <a href="#" title="Bois de Vincennes" class="second-rub">Bois de Vincennes</a></li>
      <li class="rubrique">
      <a href="#" title="Zoo de Vincennes" class="second-rub">Zoo de Vincennes</a></li>

      </ul>
      </li>

      <li class="rubrique">
      <a href="#" title="Quartiers parisiens" class="first-rub">Quartiers</a>

      <ul>
      <li class="rubrique">
      <a href="#" title="Le Marais" class="second-rub">Le Marais</a></li>
      <li class="rubrique">
      <a href="#" title="Quartier Latin" class="second-rub">Le Quartier Latin</a></li>

      <li class="rubrique">
      <a href="#" title="Les Halles" class="second-rub">Les Halles</a></li>

      </ul>
      </li>

      <li class="rubrique">
      <a href="#" title="Places parisiennes" class="first-rub">Places</a>

      <ul>
      <li class="rubrique">
      <a href="#" title="Place des Vosges" class="second-rub">Des Vosges</a></li>
      <li class="rubrique">
      <a href="#" title="Place Vendôme" class="second-rub">Vendôme</a></li>

      <li class="rubrique">
      <a href="#" title="Place Charles de Gaulle" class="second-rub">Charles de Gaulle</a></li>
      <li class="rubrique">
      <a href="#" title="Place du Tertre" class="second-rub">Du Tertre</a></li>
      <li class="rubrique">
      <a href="#" title="Place de la Concorde" class="second-rub">Concorde</a></li>
      <li class="rubrique">
      <a href="#" title="Place de la Bastille" class="second-rub">Bastille</a></li>
      </ul>
      </li>
      </ul>

      <div id="boite1">
      <h4><font color="black"><u>News</u></font></h4>
      <font color="red"><b>15/04:</b></font> Création de Sportix.fr<br />
      <font color="red"><b>16/04:</b></font> Nouveaux Quizz sur Paris<br />
      <font color="red"><b>16/04:</b></font> Création page de contact <br />

      </div>
      <div id="boite2"></div>
      <div id="boite3">
      </div>
      <div id="boite4">
      </div>
      <div id="boite5">
      </div>
      <div id="boite6">
      </div>
      <div id="boite7">
      </div>
      <div id="boite8">
      <h4><font color="black"><u>Le Saviez-vous?</u></font></h4>

      - La Tour Eiffel, devait être détruite 20 ans après sa construction! <br /><br/>
      - Elle mesure plus de 300m de haut et sa construction n'a duré que deux ans!

      </div>
      <div id="footer">Copyright @2008 Sportix.fr | Plan du Site | Design par A.Verm</div>

      </body>
      </html>


      CSS:

      body
      {
      background-color: black;
      color: white;
      margin: 0px;
      font-family: Georgia, "Times New Roman", Times, serif;
      font-size: 0.8em;
      }

      #banniere
      {
      border-style: groove;
      border-width: 1px;
      border-color: white;
      text-decoration: none;
      }

      #footer
      {
      margin-top: 400px;
      color: black;
      }

      #menunav {

      width: 100%;
      height: 30px;
      margin: 0;
      padding: 0;
      border: 0;

      }

      #menunav li {

      float: left;
      width: 140px; !important;
      margin: 0;
      padding: 0;
      border: 0;
      text-align: center;
      line-height: 15px;
      font-size:0.9em;
      font-weight: bold;
      letter-spacing: 1px;
      display: block;
      text-decoration: none;
      background-color: #FFFFFF;
      font-family:Verdana, Arial, Helvetica, sans-serif;

      }

      ul,li,a {
      display:block;
      margin:0;
      padding:0;
      border:0;
      text-decoration:none;
      }

      li.rubrique
      {
      background:white;
      }

      li.rubrique>ul { left:140px; }

      a {
      padding:2px;
      /* margin:2px; */
      text-decoration:none;
      color: black;
      font-weight:bold;
      border: 1px solid #FFFFFF;
      width:100%; /* IE */
      }

      li>a { width:auto; }

      li a.first-rub {
      background-image: url("images/menu.jpg");
      }

      li a.second-rub
      {
      font-size:1em;
      background-image: url("images/menu3.jpg");
      }

      li a.second-rub:hover
      {
      font-size:1em;
      background-image: url("images/menu.jpg");
      }

      /* regular hovers */

      a:hover {
      border: 1px solid gray;
      }

      li.rubrique a:hover {
      background-color: gray;
      border: 1px groove black;
      }

      /* hovers with specificity */

      li.rubrique:hover { z-index:10; }

      ul ul, li:hover ul ul {
      display:none;
      }

      li:hover ul, li:hover li:hover ul {
      display:block;
      }

      #footer
      {
      text-align: center;
      }

      #haut
      {

      width:25%;
      height:100px;
      border-style: solid;
      border-color: gray;
      border-width: 1px;
      }

      #boite1
      {
      text-align:center;
      color: #4B4B4B;
      background-color:#e0e0e0;
      padding-top: 0;
      padding-left: 15px;
      padding-right: 15px;
      padding-bottom: 15px;
      position: absolute;
      top: 180px;
      left: 3px;
      width: 130px;
      height: 170px;
      border-color: black;
      border-width: 4px;
      border-style: double;
      }

      #boite2
      {
      color: #900;
      background-image:url('images/boite2.jpg');
      padding: 15px;
      position: absolute;
      top: 180px;
      left: 174px;
      width: 625px;
      height: 180px;
      border-color:white;
      border-width: 2px;
      border-style: solid;
      }

      #boite3
      {
      color: #900;
      background-color:#e0e0e0;
      padding: 15px;
      position: absolute;
      top: 180px;
      left: 840px;
      width: 120px;
      height: 140px;
      border-color:black;
      border-width: 4px;
      border-style: double;
      }

      #boite4
      {
      color: #900;
      background-color:#e0e0e0;
      padding: 15px;
      position: absolute;
      top: 360px;
      left: 3px;
      width: 130px;
      height: 150px;
      border-color: black;
      border-width: 4px;
      border-style: double;
      }

      #boite5
      {
      color: #900;
      background-color:#e0e0e0;
      padding: 15px;
      position: absolute;
      top: 360px;
      left: 840px;
      width: 120px;
      height: 150px;
      border-color:black;
      border-width: 4px;
      border-style: double;
      }

      #boite6
      {
      text-align:center;
      color: #4B4B4B;
      background-color:#e0e0e0;
      padding-top: 0;
      padding-left: 15px;
      padding-right: 15px;
      paddind-bottom: 15px;
      position: absolute;
      top: 400px;
      left: 174px;
      width: 625px;
      height: 380px;
      border-color: black;
      border-width: 4px;
      border-style: double;
      }

      #boite7
      {
      color: #900;
      background-color:#e0e0e0;
      padding: 15px;
      position: absolute;
      top: 550px;
      left: 3px;
      width: 130px;
      height: 200px;
      border-color: black;
      border-width: 4px;
      border-style: double;
      }
      #boite8
      {
      color: #4B4B4B;
      background-color:#e0e0e0;
      padding-top: auto;
      padding-left: 15px;
      padding-right: 15px;
      padding-bottom: 15px;
      position: absolute;
      top: 550px;
      left: 840px;
      width: 120px;
      height: 230px;
      border-color:black;
      border-width: 4px;
      border-style: double;
      }

      #footer
      {
      color: black;
      font-family: Comic Sans Ms;
      background-color:#e0e0e0;
      padding: 15px;
      position: absolute;
      top: 390px;
      left: 3px;
      width: 958px;
      height: 30px;
      border-color:black;
      border-width: 4px;
      border-style: double;

      }

      Merci d'avance pour vos réponses