IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

[Débutant inside]Menu horizontal déroulant


Sujet :

CSS

  1. #1
    Membre régulier
    Homme Profil pro
    Développeur .NET
    Inscrit en
    Mai 2010
    Messages
    347
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Développeur .NET
    Secteur : Finance

    Informations forums :
    Inscription : Mai 2010
    Messages : 347
    Points : 121
    Points
    121
    Par défaut [Débutant inside]Menu horizontal déroulant
    Bonjour à tous,

    j'aimerais faire un menu horizontal et déroulant.
    Et j'arrive donc à ceci :
    Code php : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
     
    <div id="menu">
    <ul>
    	<li><a href="page_principale.php">Accueil</a>
    		<ul>
    			<li><a href="page_principale.php">Présentation générale</a></li>
    		</ul>
    	</li>
    	<li><a href="presentationTechniqueEau.php">Eau</a>
    		<ul>
    		  <li><a href="presentationTechniqueEau.php">Présentation technique</a></li>
    		  <li><a href="tarifEau.php">Tarif de l'eau potable</a></li>
    		  <li><a href="reglementService.php">Règlement de service</a></li>
    		  <li><a href="rapportAnnuel.php">Rapport annuel</a></li>
    		</ul>
    	</li>
    	<li><a href="presentationTechniqueElectricite.php">Electricité</a>
    		<ul>
    			<li><a href="presentationTechniqueElectricite.php">Présentation technique</a></li>
    			<li><a href="tarifsReglementes.php">Tarifs règlementés</a></li>
    			<li><a href="http://www.ejp.es-energies.fr/internet/ejp.nsf/wContenu/U15D0T10Q0.htm">Infos EJP</a></li>
    			<li><a href="infosFactures.php">Infos factures</a></li>
    			<li><a href="statistiquesCoupures.php">Statistiques coupures</a></li>
    		</ul>
    	</li>
    	<li><a href="dematerialisationMarchesPublics.php">Marché public</a>
    		<ul>
    		  <li><a href="dematerialisationMarchesPublics.php">Dématérialisation des marchés publics</a></li>
    		</ul>
    	</li>
    	<li><a href="photovoltaique.php">GRD</a>
    		<ul>
    		  <li><a href="photovoltaique.php">Photovoltaïque</a></li>
    		  <li><a href="cataloguePrestations.php">Catalogue des prestations</a></li>
    		  <li><a href="baremeRaccordement.php">Barème de raccordement</a></li>
    		</ul>
    	</li>
    	<li><a href="interlocuteurs.php">Contact</a>
    		<ul>
    		  <li><a href="interlocuteurs.php">Vos interlocuteurs</a></li>
    		  <li><a href="mailto:ume@ume.fr">E-mail</a></li>
    		  <li><a href="horairesOuverture.php">Horaires d'ouvertures</a></li>
    		</ul>
    	</li>
    	<li><a href="liensUtiles.php">Liens utiles</a>
    		<ul>
    		  <li><a href="liensUtiles.php">Liens utiles</a></li>
    		  <li><a href="releveIndex.php">Relevés d'index en cas d'absence</a></li>
    		</ul>
    	</li>
    	<li><a href="qualite_eau.php">Relevés et qualité</a>
    		<ul>
    		  <li><a href="qualite_eau.php">Analyse et qualité de l'eau</a></li>
    		</ul>
    	</li>
    </ul>
    </div>

    avec le code CSS :
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
     
    #menu ul {
     margin:0;
     padding:0;
     list-style-type:none;
     text-align:center;
     }
    #menu li {
     float:left;
     margin:auto;
     padding:0;
     background-color:white;
     }
    #menu li a {
     display:block;
     width:100px;
     color:black;
     text-decoration:none;
     padding:5px;
     }
    #menu li a:hover {
     color:lightblue;
     }
    #menu ul li ul {
     display:none;
     }
    #menu ul li:hover ul {
     display:block;
     }
    #menu li:hover ul li {
     float:none;
     }
    #menu li ul {
     position:absolute;
     }
    #menu {
     height:50px;
     }

    J'ai bien fait le lien :
    Code php : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
     
    <link rel="stylesheet" media="screen" type="text/css" href="test.css" />

    Donc le menu est bien horizontal, écris en noir sur fond blanc et devenant bleu en passant la souris dessus (hover) quant aux sous-menus... la liste ne se déroule pas !

    Je suis sous IE 7 si ça peut aider.

    Merci !

  2. #2
    Membre régulier
    Homme Profil pro
    Développeur .NET
    Inscrit en
    Mai 2010
    Messages
    347
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Développeur .NET
    Secteur : Finance

    Informations forums :
    Inscription : Mai 2010
    Messages : 347
    Points : 121
    Points
    121
    Par défaut
    Cette fois ci j'ai fais comme indiquer dans le tuto de développez.com : http://css.developpez.com/tutoriels/menu-deroulant/

    Et pareil, le menu déroulant ne se déroule pas, je ne vois pas les sous-menus.

    Est-ce que ça vient de IE 7 ? Pourtant le cours indiquait que IE6 posait problème, pas IE 7...

    Je vais installer IE 8 et je vérifierais.

  3. #3
    Membre régulier
    Homme Profil pro
    Développeur .NET
    Inscrit en
    Mai 2010
    Messages
    347
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Développeur .NET
    Secteur : Finance

    Informations forums :
    Inscription : Mai 2010
    Messages : 347
    Points : 121
    Points
    121
    Par défaut
    Bon, je continue de me répondre seul vu que personne d'autre n'a l'air motivé.

    J'ai testé sous IE 8 : fonctionne pas
    J'ai testé sour firefox : fonctionne ! (à peu près)

    -> quand je dis à peu près, c'est parce que sans aller dans affichage -> encodage -> utf8, les caractères sont un peu... space.

    Donc je cherche désespérement une solution pour faire fonction ce ****** sur IE !

    Si quelqu'un à une idée...

  4. #4
    Membre régulier
    Homme Profil pro
    Développeur .NET
    Inscrit en
    Mai 2010
    Messages
    347
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Développeur .NET
    Secteur : Finance

    Informations forums :
    Inscription : Mai 2010
    Messages : 347
    Points : 121
    Points
    121
    Par défaut
    ENFIN !!!!

    pu****, j'ai cherché pendant des heures pour ça ! :
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
     
    <meta http-equiv="X-UA-Compatible" content="IE=8" />

    Donc maintenant mon menu fonctionne correctement avec IE 8, et y a intérêt qu'il fonctionne aussi avec le reste !
    J'essaierais de vous tenir au courant de mon combat contre les navigateurs récalcitrants !

Discussions similaires

  1. Menu horizontal déroulant FF - IE
    Par khany dans le forum Mise en page CSS
    Réponses: 4
    Dernier message: 20/10/2009, 14h45
  2. Menu horizontal déroulant 2
    Par afrodje dans le forum Mise en page CSS
    Réponses: 1
    Dernier message: 21/02/2009, 17h44
  3. indiquer la rubrique courante dans un menu horizontal déroulant
    Par marion5515 dans le forum Général JavaScript
    Réponses: 11
    Dernier message: 05/09/2008, 12h58
  4. Menu horizontal déroulant 1 et timer
    Par zaldiko dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 27/06/2008, 13h25
  5. Menu horizontal déroulant 1
    Par zaldiko dans le forum Mise en page CSS
    Réponses: 3
    Dernier message: 21/06/2008, 13h32

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo