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 :

Style d'éléments de menu


Sujet :

CSS

  1. #1
    Débutant  
    Profil pro
    Inscrit en
    Février 2007
    Messages
    356
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2007
    Messages : 356
    Points : 97
    Points
    97
    Par défaut Style d'éléments de menu
    Bonjour à tous

    je viens vers vous car j'ai un soucis de présentation sur ce site :

    http://www.cerclehippiquechoukasserie.com/
    dans le menu, en passant la souris sur CHOUKASSERIE CARE, il y a un sous menu sui s'affiche.
    La 1er ligne est ok, mais la 2eme et 3eme sont sur fond blanc, lignes rouges et avec du texte avec une autre police.
    Ca fait 6mois que je n'ai pas touché à ce site et là je découvre ce problème.
    Du coup j'ai beau chercher dans mon css et je ne trouve absolument rien d'anormal.

    Pourriez vous m'aider svp ! ?

    Je vous donne le code concerné :

    Code html : 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
    	<nav role="navigation">
     
    		<div class="content">
     
    			<ul>
    <li><a href="http://www.cerclehippiquechoukasserie.com"/>Accueil</a></li>            
    <li><a href="http://www.cerclehippiquechoukasserie.com/categorie2/actualite"/>Actualité</a></li>
    <li><a href="http://www.cerclehippiquechoukasserie.com/static2/domaine"/>Le Domaine</a></li>
    <li><a href="http://www.cerclehippiquechoukasserie.com/static3/pension"/>Pension</a></li>
    <li><a href="http://www.cerclehippiquechoukasserie.com/static4/centre-equestre"/>Centre Équestre</a></li>
     
    <li class="drop"><a>Choukasserie Care</a>
    <div class="dropdownContain">
    <div class="dropOut">
    <ul>
    <li><a href="http://www.cerclehippiquechoukasserie.com/static8/centre-soins"/>Centre de Soins</a></li>
    <li><a href="http://www.cerclehippiquechoukasserie.com/static9/valerie-ganassi"/>Docteur Valérie Ganassi</a></li>
    <li><a href="http://www.cerclehippiquechoukasserie.com/static10/tarifs-choukasserie-care"/>Tarifs Choukasserie Care</a></li>
    </ul></div></div></li>
     
    <li><a href="http://www.cerclehippiquechoukasserie.com/static6/ethologie"/>Éthologie</a></li>
    <li><a href="http://www.cerclehippiquechoukasserie.com/static7/videos"/>Vidéos</a></li>
    <li><a href="http://www.cerclehippiquechoukasserie.com/contact"/>Contact</a></li>
     
    			</ul>
     
    		</div>
    	</nav>


    Code : 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
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    .nav ul li.drop {
    	position: relative;
    }
    .nav ul > li {
    	display: inline-block;
    }
    .nav ul li a {
    	line-height: 45px;
    	padding: 0 20px;
    	height: 45px;
    }
    .nav ul li a:hover {
    	color:#D1B561;
    }
    .dropdownContain {
    	width: 200px;
    	position: absolute;
    	z-index: 2;
    	top: -400px;
    }
    .dropOut {
    	width: 225px;
    	background: white;
    	float: left;
    	position: relative;
    	margin-top: 0px;
    	opacity: 0;
    	-webkit-box-shadow: 0 1px 6px rgba(0,0,0,.15);
    	-moz-box-shadow: 0 1px 6px rgba(0,0,0,.15);
    	box-shadow: 0 1px 6px rgba(0,0,0,.15);
    	-webkit-transition: all .2s ease-out;
    	-moz-transition: all .2s ease-out;
    	-ms-transition: all .2s ease-out;
    	-o-transition: all .2s ease-out;
    	transition: all .2s ease-out;
      -webkit-backface-visibility: hidden;
      -moz-backface-visibility:    hidden;
      -ms-backface-visibility:     hidden;
    }
     
    .dropOut ul {
    	float: left;
    	padding: 0 0;
    }
    .dropOut ul li{
    	text-align: left;
    	background: transparent url(http://s15.postimg.org/p6rvo45l3/dropborder.png) center top repeat-x;
    	float: left;
    	width: 220px;
    	padding: 12px 0 10px 15px;
    	margin: 0px 5px;
    	color: white;
     
    }
    .dropOut li:first-child
    {
    background:none;
    }
     
    .dropOut ul li:hover {
    	color:#D1B561;
    	-webkit-transition: all 200ms ease-in;
        -o-transition: all 200ms ease-in;
        -moz-transition: all 200ms ease-in;
    }
     
    ul li:hover a { 
    	-webkit-transition: all 200ms ease-in;
        -o-transition: all 200ms ease-in;
        -moz-transition: all 200ms ease-in;
     }
    ul li:hover .dropdownContain { top: 32px;
    margin-left:-23px;
     
    border-bottom:22px transparent solid; }
    ul li:hover .underline { border-bottom-color: #777; }
    ul li:hover .dropOut { opacity: 1; margin-top: 8px; }
    /*menu style*/

  2. #2
    Expert confirmé
    Avatar de TiranusKBX
    Homme Profil pro
    Développeur C, C++, C#, Python, PHP, HTML, JS, Laravel, Vue.js
    Inscrit en
    Avril 2013
    Messages
    1 476
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 34
    Localisation : France, Seine et Marne (Île de France)

    Informations professionnelles :
    Activité : Développeur C, C++, C#, Python, PHP, HTML, JS, Laravel, Vue.js
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Avril 2013
    Messages : 1 476
    Points : 4 805
    Points
    4 805
    Billets dans le blog
    6
    Par défaut
    normal ton image à l'adresse http://s15.postimg.org/p6rvo45l3/dropborder.png n'existe plus
    pour m'avoir fait trouver le problème en 30 secondes tu mérite une fessée
    Rien, je n'ai plus rien de pertinent à ajouter

  3. #3
    Débutant  
    Profil pro
    Inscrit en
    Février 2007
    Messages
    356
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2007
    Messages : 356
    Points : 97
    Points
    97
    Par défaut
    aha ! merci, ca m'apprendra a copier du code d'internautes sans vérifier ce qu'il y a dedans.

  4. #4
    Membre habitué
    Homme Profil pro
    Intégrateur Web
    Inscrit en
    Juillet 2014
    Messages
    92
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : France, Hérault (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Intégrateur Web
    Secteur : Boutique - Magasin

    Informations forums :
    Inscription : Juillet 2014
    Messages : 92
    Points : 152
    Points
    152
    Par défaut
    Citation Envoyé par ickyknox Voir le message
    aha ! merci, ca m'apprendra a copier du code d'internautes sans vérifier ce qu'il y a dedans.
    Il mériterai plutôt ça pour ne pas avoir cherché à comprendre un code copié :

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Signaler le survol de la souris sur un élément de menu
    Par hellspawn_ludo dans le forum Mise en page CSS
    Réponses: 9
    Dernier message: 05/05/2008, 15h56
  2. Réponses: 2
    Dernier message: 21/09/2007, 12h21
  3. Les styles des éléments avant/après compilation
    Par Mysti¢ dans le forum wxPython
    Réponses: 2
    Dernier message: 14/06/2007, 17h07
  4. comment laisser actif un élément de menu
    Par fomazou dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 04/06/2007, 18h15
  5. Réponses: 4
    Dernier message: 16/04/2005, 16h54

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