Partage
  • Partager sur Facebook
  • Partager sur Twitter

drop menu sub drop menu

xface07
    10 août 2017 à 13:01:27

    Bonjour, débutant dans le codage HTML/CSS avec openclassroom, je rencontre aujourd'hui un soucis sur lequel je bute depuis 24H, j'ai cherche sur internet mais je n'ai rien trouver qui m'ai permis de régler mon problème.

    je suis charger de faire le site pour un amis qui a une organisation ( guilde sur le jeu star citizen ), mais je ne réussi pas a répondre a un des souhait de mon pote concernant le menu qui ce déroule en hover.

    j'ai un menu de navigation dans le quel j'ai mis un sous menu jusque la tout ce passe bien mais dans le second sous menu du premier sous menu ( oulala même moi en me lisant écrire sa je trouve ça confus ^^ ) j'aimerai qu'il décale a droite de son hover mais j'ai essayé tout ce que j'ai comme connaissance et de mes recherche sur le net rien ne fonctionne

    <!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>Omega Protectora</title>
</head>

<body>
	<header>
		<img src="ban.png" class="ban">
		<nav>
			<ul id="menu"><!--liste non ordonnée-->
					<li><a href="#">accueil</a></li> 
					<li><a href="#">Actualités</a></li>
					<li><a href="#">qui sommes-nous?</a>
						<ul>
							<li><a href="#">La Corporation</a></li>
							<li><a href="#">Notre Projet</a></li>
							<li><a href="#">Nos Services</a></li>
							<li><a href="#">Nos Activités</a>
								<ul class="sm">
									<li><a href="#">Harfang</a></li>
									<li><a href="#">Raven</a></li>
									<li><a href="#">Wind Rose</a></li>						
									<li><a href="#">Taranis</a></li>
									<li><a href="#">Star Of Life</a></li>						
									<li><a href="#">Caduceus</a></li>
								</ul>
							</li>	
						</ul>
					</li>			
					<li><a href="#">Liens utiles</a>
						<ul>
							<li><a href="#">Liens</a></li>
							<li><a href="#">Partenaires</a></li>
							<li><a href="#">Outils</a></li>						
						</ul>	
					</li>				
					<li><a href="#">Contact</a></li>
					<li><a href="https://robertsspaceindustries.com/orgs/PROTECTORA" target="_blank">nous rejoindre</a></li>
			</ul>	
			</nav>
	</header>
	<iframe src="https://discordapp.com/widget?id=164810215538032640&theme=dark" width="250" height="370" allowtransparency="true" frameborder="0" align="right" class="discord"></iframe>
</body>
</html>

    @font-face {
	font-family: "spaceage";
	src: url(spaceage.ttf);
}
body {
	background-color: black;
	background-repeat: no-repeat;
	background-image: url(background.jpg);
}
.ban {
	top:0px;
	left:0px;
	background-repeat: no-repeat;
	background-position: left bottom ;
	position:absolute;
}
#menu{
        width: 100%;
        margin-top: 225px;
        padding: 10px 0 0 0;
        list-style: none;
        background: #111;
        background: -moz-linear-gradient(#444, #111);
        background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
        background: -webkit-linear-gradient(#444, #111);
        background: -o-linear-gradient(#444, #111);
        background: -ms-linear-gradient(#444, #111);
        background: linear-gradient(#444, #111);
        -moz-border-radius: 50px;
        border-radius: 50px;
        -moz-box-shadow: 0 2px 1px #00FF24;
        -webkit-box-shadow: 0 2px 1px #00FF24;
        box-shadow: 0 2px 1px #00FF24;
	 	opacity: 0.7;
}

#menu li{
        float: left;
        padding: 0 0 10px 0;
        position: relative;
}

#menu a{
        float: left;
        height: 25px;
        padding: 0 25px;
        color: #FFFFFF;
        text-transform: uppercase;
        font: bold 18px/20px spaceage;
        text-decoration: none;
        text-shadow: 0 1px 0 #000;
}

#menu li:hover > a{
        color: #00FF24;
}

*html #menu li a:hover{ /* IE6 */
        color: #fafafa;
}

#menu li:hover > ul{
        display: block;
}

/* Sous-menu */

#menu ul{
	position: absolute;
    list-style: none;
    margin: 0;
    padding: 0;
    display: none;
    top: 35px;
    left: 0;
    z-index: 99999;
    background: #444;
    background: -moz-linear-gradient(#444, #111);
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
    background: -webkit-linear-gradient(#444, #111);
    background: -o-linear-gradient(#444, #111);
    background: -ms-linear-gradient(#444, #111);
    background: linear-gradient(#444, #111);
    -moz-border-radius: 5px;
    border-radius: 5px;
}

#menu ul li{
    float: none;
	position: relative;
    margin: 0;
    padding: 0;
    display: block;
    -moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
    -webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
    box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
}

#menu ul li:last-child{
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

#menu ul a{
    padding: 10px;
	position: relative;
    height: auto;
    line-height: 1;
    display: block;
    white-space: nowrap;
    float: none;
    text-transform: none;
}

#menu ul a:hover{
        background: #00FF24;
        background: -moz-linear-gradient(#007A11,  #00FF24);
        background: -webkit-gradient(linear, left top, left bottom, from(#007A11), to(#00FF24));
        background: -webkit-linear-gradient(#007A11,  #00FF24);
        background: -o-linear-gradient(#007A11,  #00FF24);
        background: -ms-linear-gradient(#007A11,  #00FF24);
        background: linear-gradient(#007A11,  #00FF24);
}

#menu ul li:first-child a{
    -moz-border-radius: 5px 5px 0 0;
    -webkit-border-radius: 5px 5px 0 0;
    border-radius: 5px 5px 0 0;
}

#menu ul li:first-child a:after{
    content: '';
    position: absolute;
    left: 30px;
    top: -8px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 8px solid #444;
}

#menu ul li:first-child a:hover:after{
    border-bottom-color: #007a11;
}

#menu ul li:last-child a{
    -moz-border-radius: 0 0 5px 5px;
    -webkit-border-radius: 0 0 5px 5px;
    border-radius: 0 0 5px 5px;
}
.sm {
	 margin-left: 150px;
	 top: 0px;
	 position: absolute;
}

/* Rétablissement du flottement */
#menu:after{
        visibility: hidden;
        display: block;
        font-size: 0;
        content: " ";
        clear: both;
        height: 0;
}

.discord {
	margin-right: auto;
}

    voila j’espère que quelqu'un sera m'aide a régler mon soucis.

    merci d'avance

    -
    Edité par xface07 10 août 2017 à 13:02:14

    • Partager sur Facebook
    • Partager sur Twitter
    Pitet
      10 août 2017 à 14:35:43

      Salut,

      Ton code est presque bon mais ton problème viens d'un soucis de poids des sélecteurs css.

      Modifie ta classe ".sm" comme ceci :

      /* il faut donner un poids plus important à ce sélecteur pour ne pas qu'il soit écrasé par le css du sélecteur "#menu ul" */
#menu ul.sm {
     left: 100%;
     top: 0;
     position: absolute;
}

      Je t'invite a te renseigner sur le "poids des sélecteurs css" si tu veux mieux comprendre ton problème.

      Bonne journée,

      • Partager sur Facebook
      • Partager sur Twitter
      xface07
        10 août 2017 à 15:50:10

        punaise je me suis arracher la tête depuis hier pour un truc aussi simple lol, bon en même temps je m'en doutais que ce serait un truc bateau...

        now je rencontre un nouveau problem, j'ai un border-bottom en forme de pointe normalement il pointe vers le haut, mais pour le menu glissant a droite j'aimerai qu'il ce position sur la gauche du bouton, aurais tu une idée?

        En tout cas merci a toi ^^ j'irais donc me renseigner sur le poids des selecteurs css

        -
        Edité par xface07 10 août 2017 à 16:00:49

        • Partager sur Facebook
        • Partager sur Twitter
        Pitet
          10 août 2017 à 16:24:42

          Pour la bordure en forme de pointe, il faut adapter le css de "#menu ul li:first-child a:after" pour le sous-menu, par exemple :

          #menu ul.sm {
    left: calc(100% + 8px);
    top: 0;
    position: absolute;
}

#menu ul.sm li:first-child a:after{
    content: '';
    position: absolute;
    left: -8px;
    top: 8px;
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-left: 5px solid transparent;
    border-right: 8px solid #444;
    border-bottom: 5px solid transparent;
}



          • Partager sur Facebook
          • Partager sur Twitter
          xface07
            10 août 2017 à 16:35:38

            parfait , now j'essais de faire que la pointe change de couleur en hover , mais quand je reprend le code que j'ai déjà mis précédemment sa rajoute une pointe en plus bizarre
            • Partager sur Facebook
            • Partager sur Twitter
            Pitet
              11 août 2017 à 16:25:15

              N'oublie pas de nous montrer ton code, plus facile de t'aider en voyant où est ton problème.

              Tu veux changer la couleur de la pointe sur le hover de quel élément ? Si tu veux le faire sur le hover des liens du sous-menu, une solution possible :

              #menu ul.sm:hover li:first-child a:after {
  border-right: 8px solid red;
}



              • Partager sur Facebook
              • Partager sur Twitter
              xface07
                12 août 2017 à 9:36:17

                j'aimerais que la fleche du sous menu lié au sous menu activité devienne verte quand je hover le premier lien de ce sous menu mais malheureusement j'ai test plein de chose meme ta ligne la elle ne change pas de couleur en hover  
                <!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>Omega Protectora</title>
</head>

<body>
	<header>
		<img src="ban.png" class="ban">
		<nav>
			<ul id="menu"><!--liste non ordonnée-->
					<li><a href="#">accueil</a></li> 
					<li><a href="#">Actualités</a></li>
					<li><a href="#">qui sommes-nous?</a>
						<ul>
							<li><a href="#">La Corporation</a></li>
							<li><a href="#">Notre Projet</a></li>
							<li><a href="#">Nos Services</a></li>
							<li><a href="#">Nos Activités</a>
								<ul class="sm">
									<li><a href="#">Harfang</a></li>
									<li><a href="#">Raven</a></li>
									<li><a href="#">Wind Rose</a></li>						
									<li><a href="#">Taranis</a></li>
									<li><a href="#">Star Of Life</a></li>						
									<li><a href="#">Caduceus</a></li>
								</ul>
							</li>	
						</ul>
					</li>			
					<li><a href="#">Liens utiles</a>
						<ul>
							<li><a href="#">Liens</a></li>
							<li><a href="#">Partenaires</a></li>
							<li><a href="#">Outils</a></li>						
						</ul>	
					</li>				
					<li><a href="#">Contact</a></li>
					<li><a href="https://robertsspaceindustries.com/orgs/PROTECTORA" target="_blank">nous rejoindre</a></li>
			</ul>	
			</nav>
	</header>
	<iframe src="https://discordapp.com/widget?id=164810215538032640&theme=dark" width="250" height="370" allowtransparency="true" frameborder="0" align="right" class="discord"></iframe>
</body>
</html>

                @font-face {
	font-family: "spaceage";
	src: url(spaceage.ttf);
}
body {
	background-color: black;
	background-repeat: no-repeat;
	background-image: url(background.jpg);
}
.ban {
	top:0px;
	left:0px;
	background-repeat: no-repeat;
	background-position: left bottom ;
	position:absolute;
}
#menu{
        width: 100%;
        margin-top: 225px;
        padding: 10px 0 0 0;
        list-style: none;
        background: #111;
        background: -moz-linear-gradient(#444, #111);
        background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
        background: -webkit-linear-gradient(#444, #111);
        background: -o-linear-gradient(#444, #111);
        background: -ms-linear-gradient(#444, #111);
        background: linear-gradient(#444, #111);
        -moz-border-radius: 50px;
        border-radius: 50px;
        -moz-box-shadow: 0 2px 1px #00FF24;
        -webkit-box-shadow: 0 2px 1px #00FF24;
        box-shadow: 0 2px 1px #00FF24;
	 	opacity: 0.7;
}

#menu li{
        float: left;
        padding: 0 0 10px 0;
        position: relative;
}

#menu a{
        float: left;
        height: 25px;
        padding: 0 25px;
        color: #FFFFFF;
        text-transform: uppercase;
        font: bold 18px/20px spaceage;
        text-decoration: none;
        text-shadow: 0 1px 0 #000;
}

#menu li:hover > a{
        color: #00FF24;
}

#menu li:hover > ul{
        display: block;
}

/* Sous-menu */

#menu ul{
    list-style: none;
    margin: 0;
    padding: 0;
    display: none;
    position: absolute;
    top: 35px;
    left: 0;
    z-index: 99999;
    background: #444;
    background: -moz-linear-gradient(#444, #111);
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
    background: -webkit-linear-gradient(#444, #111);
    background: -o-linear-gradient(#444, #111);
    background: -ms-linear-gradient(#444, #111);
    background: linear-gradient(#444, #111);
    -moz-border-radius: 5px;
    border-radius: 5px;
}

#menu ul li{
    float: none;
    margin: 0;
    padding: 0;
    display: block;
    -moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
    -webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
    box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
}

#menu ul li:last-child{
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

#menu ul a{
    padding: 10px;
    height: auto;
    line-height: 1;
    display: block;
    white-space: nowrap;
    float: none;
    text-transform: none;
}

#menu ul a:hover{
        background: #00FF24;
        background: -moz-linear-gradient(#007A11,  #00FF24);
        background: -webkit-gradient(linear, left top, left bottom, from(#007A11), to(#00FF24));
        background: -webkit-linear-gradient(#007A11,  #00FF24);
        background: -o-linear-gradient(#007A11,  #00FF24);
        background: -ms-linear-gradient(#007A11,  #00FF24);
        background: linear-gradient(#007A11,  #00FF24);
}

#menu ul li:first-child a{
    -moz-border-radius: 5px 5px 0 0;
    -webkit-border-radius: 5px 5px 0 0;
    border-radius: 5px 5px 0 0;
}

#menu ul li:first-child a:after{
    content: '';
    position: absolute;
    left: 30px;
    top: -8px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 8px solid #444;
}

#menu ul li:first-child a:hover:after{
    border-bottom-color: #007a11;
}

#menu ul li:last-child a{
    -moz-border-radius: 0 0 5px 5px;
    -webkit-border-radius: 0 0 5px 5px;
    border-radius: 0 0 5px 5px;
}
#menu ul.sm {
     left: 100%;
     top: 0;
     position: absolute;
}
#menu ul.sm li:first-child a:after{
    content: '';
    position: absolute;
    left: -13px;
    top: 8px;
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-left: 5px solid transparent;
    border-right: 8px solid #444;
    border-bottom: 5px solid transparent;
}
#menu ul.sm:hover li:first-child a:after {
  border-right: 8px solid red;
}

/* Rétablissement du flottement */
#menu:after{
        visibility: hidden;
        display: block;
        font-size: 0;
        content: " ";
        clear: both;
        height: 0;
}

.discord {
	margin-right: auto;
}


                • Partager sur Facebook
                • Partager sur Twitter
                Pitet
                  16 août 2017 à 14:09:07

                  Pourtant le code de ton précédent message semble fonctionner : https://jsfiddle.net/Lxqrqqpe/


                  Si tu veux appliquer ce style uniquement sur le hover du premier lien du sous-menu (et pas sur tous les liens du sous-menu), tu peux changer le sélecteur #menu ul.sm:hover li:first-child a:after en #menu ul.sm li:first-child:hover a:after

                  Bonne journée,

                  • Partager sur Facebook
                  • Partager sur Twitter

                  drop menu sub drop menu

                  × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
                  × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
                  • Editeur ●
                  • Markdown