[Résolu] Problème CSS /HTML menu déroulant bloqué et fixe

Salut peux tu poster le code s'il te plaît sa sera plus simple à étudier à bien tôt

Ha oui, le fait d'avoir posté deux fois cette question montre bien de l'urgence de la situation.



Dans une démarche tout à fait personnelle voici les barèmes que j'applique :
* Si le sujet est posté une fois, je le consulte
* Si le sujet est posté deux fois, j'y réfléchis
* Si le sujet est posté trois fois je produis un bout de code (max 70 caractères)
* Si le sujet est posté quatre fois je produit une fonction ou un élément entier
* Si le sujet est posté dix fois je transmet gratuitement une page de code.
Là où ça devient vraiment intéressant c'est à la 51ème itération d'une même question pour laquelle je fais le site de a à z sans aucune contrepartie.

A défaut d'avoir accès à votre code, au moins il me reste le sens de l'humour.

Et vous ?
Modifié par Greg_Lumiere (31 Jan 2017 - 08:57)

Merci pour vos réponses

Je vous ai répondu par message privé mais j'aurais peut-être du répondre ici (manque d’expérience forum, désolée...Allez promis j'arrête de poster double dés que j'ai compris comment le forum fonctionne...)

Le problème est sans doute dans les css de mon blog (pas encore en ligne)...mais je ne sais pas comment en partager le code source (par mail ?)

C'est un imprime-écran du menu bloqué:
<p><img src="https://4.bp.blogspot.com/-4Vj3EQXS2is/WJCYIkgiVMI/AAAAAAAAG68/crolfhn2H2Ai5muG1r6teeghvcgX5skDQCLcB/s1600/Shoppingdelaura%2BBLOGSPOT.jpg" alt="" width="1366" height="646" /></p>


Et voici déjà le code du menu-demo2

<style>

#menu-demo2, #menu-demo2 ul{
padding:0;
margin:0;
list-style:none;
text-align: distribute;
}

#menu-demo2 li{
display:inline-block;
position:relative;
border-radius:0px 0px 0 0;
margin:0
}

#menu-demo2 ul li{
display:inherit
border-radius:0;
}

#menu-demo2 ul li:hover{
border-radius:0 0 0px 0px;
}
#menu-demo2 ul li:last-child{
border-radius:0 0 0px 0px;
}
#menu-demo2 ul{
position:absolute;
z-index: -1000;
max-height:0;
top:2em;
left: 0;
right: 0;
overflow:hidden;
-moz-transition: .8s all .3s;
-webkit-transition: .8s all .3s;
transition: .8s all .3s;
white-space: nowrap;
}
#menu-demo2 li:hover ul{
max-height:0em;
}

/* background des liens menus */
#menu-demo2 li:first-child{
background-color: #F9899F;
background-image:-webkit-linear-gradient(top, #222222 0%, #222222 100%);
background-image:linear-gradient(to bottom, #222222 0%, #222222 100%);
}
#menu-demo2 li:nth-child(2){
background-color: #F9899F;
background-image:-webkit-linear-gradient(top, #222222 0%, #222222 100%);
background-image:linear-gradient(to bottom, #222222 0%, #222222 100%);
}
#menu-demo2 li:nth-child(3){
background-color: #F9899F;
background-image:-webkit-linear-gradient(top, #222222 0%, #222222 100%);
background-image:linear-gradient(to bottom, #222222 0%, #222222 100%);
}
#menu-demo2 li:nth-child(4){
background-color: #F9899F;
background-image:-webkit-linear-gradient(top, #222222 0%, #222222 100%);
background-image:linear-gradient(to bottom, #222222 0%, #222222 100%);
}
#menu-demo2 li:nth-child(5){
background-color: #F9899F;
background-image:-webkit-linear-gradient(top, #222222 0%, #222222 100%);
background-image:linear-gradient(to bottom, #222222 0%, #222222 100%);
}
#menu-demo2 li:nth-child(6){
background-color: #F9899F;
background-image:-webkit-linear-gradient(top, #222222 0%, #222222 100%);
background-image:linear-gradient(to bottom, #222222 0%, #222222 100%);
}
#menu-demo2 li:last-child{
background-color: #F9899F;
background-image:-webkit-linear-gradient(top, #222222 0%, #222222 100%);
background-image:linear-gradient(to bottom, #222222 0%, #222222 100%);
}

/* background des liens sous menus */
#menu-demo2 li:first-child li{
background:#FFDFDC;
}
#menu-demo2 li:nth-child(2) li{
background:#FFDFDC; width:275px;
}
#menu-demo2 li:nth-child(3) li{
background:#FFDFDC; width:163px;
}
#menu-demo2 li:nth-child(4) li{
background:#FFDFDC; width:150px;
}
#menu-demo2 li:nth-child(5) li{
background:#FFDFDC; width:180px;
}
#menu-demo2 li:nth-child(6) li{
background:#FFDFDC;
}
#menu-demo2 li:last-child li{
background:#FFDFDC;
}

/* background des liens menus et sous menus au survol */
#menu-demo2 li:first-child:hover, #menu-demo2 li:first-child li:hover{
background:#Ffa1ae;
}
#menu-demo2 li:nth-child(2):hover, #menu-demo2 li:nth-child(2) li:hover{
background:#Ffa1ae;
}
#menu-demo2 li:nth-child(3):hover, #menu-demo2 li:nth-child(3) li:hover{
background:#Ffa1ae;
}
#menu-demo2 li:nth-child(4):hover, #menu-demo2 li:nth-child(4) li:hover{
background:#Ffa1ae;
}
#menu-demo2 li:nth-child(5):hover, #menu-demo2 li:nth-child(5) li:hover{
background:#Ffa1ae;
}
#menu-demo2 li:nth-child(6):hover, #menu-demo2 li:nth-child(6) li:hover{
background:#Ffa1ae;
}
#menu-demo2 li:last-child:hover, #menu-demo2 li:last-child li:hover{
background:#Ffa1ae;
}

/* les a href */
#menu-demo2 a{
text-decoration:none;
display:block;
padding:12px 0px;
margin:0 0 0;
color:#ffffff;
font-size: 14px ;
font-family:century gothic;
text-transform: uppercase;
text-align: center;
width: 120px;
line-height: 4px;
}

#menu-demo2 ul a{
padding-right :10px;
padding-left: 10px;
padding-top:4px;
padding-bottom:4px;
color:#000000;
text-transform: lowercase;
text-transform:initial;
text-align: left;important!
font-size: 13px;
font-feature-settings: inherit;
line-height: normal;
text-align: distribute;
width: auto;

}
#menu-demo2 li:hover li a{
color:#000000;
text-transform:initial;
text-align: distribute;
width: auto;

}
#menu-demo2 li:hover a, #menu-demo2 li li:hover a{
color:#ffffff;

}
</style>
</head>
<!--<body>-->
<body>
<div class='top_header clearfix'>
<div class='ct-wrapper'>
<!-- blog_main_navigation_menu -->
<div class='nav-menu'>
<ul id='menu-demo2'>
<li><a href='http://blog-mode-tendance.blogspot.fr/'>ACCUEIL</a></li>
<li><a>VETEMENTS</a>
<ul>
<li><a href='http://www.shoppingdelaura.com/search/label/Haut%20et%20top%20femme'>Haut et top</a></li>
<li><a href='http://www.shoppingdelaura.com/search/label/Jeans%20Femme'>Jeans</a></li>
<li><a href='http://www.shoppingdelaura.com/search/label/Jupe%20courte'>Jupe courte</a></li>
<li><a href='http://www.shoppingdelaura.com/search/label/Jupe%20longue'>Jupe longue</a></li>
<li><a href='http://www.shoppingdelaura.com/search/label/Lingerie%20et%20sous-vêtement%20femme'>Lingerie et sous-vêtements</a></li>
<li><a href='http://www.shoppingdelaura.com/search/label/Maillot%20de%20bain%20et%20bikini%20femme'>Maillots de bain et bikini</a></li>
<li><a href='http://www.shoppingdelaura.com/search/label/Manteaux%20et%20Blousons'>Manteaux et Blousons</a></li>
<li><a href='http://www.shoppingdelaura.com/search/label/Pantalons%20femme'>Pantalons</a></li>
<li><a href='http://www.shoppingdelaura.com/search/label/Pulls%20et%20Gilets'>Pulls et Gilets</a></li>
<li><a href='http://www.shoppingdelaura.com/search/label/Robe%20courte'>Robe courte</a></li>
<li><a href='http://www.shoppingdelaura.com/search/label/Robe%20longue'>Robe longue</a></li>
<li><a href='http://www.shoppingdelaura.com/search/label/Robe%20de%20mariée'>Robe de mariée</a></li>
<li><a href='http://www.shoppingdelaura.com/search/label/Robe%20de%20soirée%20mariage%20ou%20baptême'>Robe de soirée mariage ou baptême</a></li>
<li><a href='http://www.shoppingdelaura.com/search/label/Combis-Shorts'>Combis/Shorts</a></li>
<li><a href='http://www.shoppingdelaura.com/search/label/Vestes-Tailleurs'>Vestes/Tailleurs</a></li>
</ul>
</li>
<li><a href='http://www.shoppingdelaura.com/search/label/Chaussures%20femme/' rel='ddsubmenu2'>CHAUSSURES</a>
<ul>
<li><a href='http://www.shoppingdelaura.com/search/label/Baskets'>Baskets</a></li>
<li><a href='http://www.shoppingdelaura.com/search/label/Boots%20et%20Bottines'>Boots et bottines</a></li>
<li><a href='http://www.shoppingdelaura.com/search/label/Bottes'>Bottes</a></li>
<li><a href='http://www.shoppingdelaura.com/search/label/Escarpins'>Escarpins</a></li>
<li><a href='http://www.shoppingdelaura.com/search/label/Sandales%20et%20Nu-pieds/'>Sandales et Nu-pieds</a>
</li>
</ul>
</li>
<li><a>ACCESSOIRES</a>
<ul>
<li><a href='http://www.shoppingdelaura.com/search/label/Lunettes%20de%20soleil%20femme'>Lunettes de soleil</a></li>
<li><a href='http://www.shoppingdelaura.com/search/label/Montres%20et%20bijoux'>Montres et bijoux</a></li>
<li><a href='http://www.shoppingdelaura.com/search/label/Sacs%20et%20accessoires'>Sacs et accessoires</a></li>
</ul>
</li>
<li><a>BEAUTE</a>
<ul>
<li><a href='http://www.shoppingdelaura.com/search/label/Parfums'>Parfums</a></li>
<li><a href='http://www.shoppingdelaura.com/search/label/Soins%20corps%20et%20solaires'>Soins du corps et solaire</a></li>
<li><a href='http://www.shoppingdelaura.com/search/label/Soins%20du%20visage'>Soins du visage</a></li>
</ul>
</li>
<li><a href='http://www.shoppingdelaura.com/search/label/Loobook'>LOOKBOOK</a></li>
<li><a href='https://goo.gl/oNCrPi' rel='nofollow' target='blank'>PROMOS</a></li>
</ul>
</div>

lolomiaou83 a écrit :
Merci pour vos réponses

Je vous ai répondu par message privé mais j'aurais peut-être du répondre ici (manque d’expérience forum, désolée...Allez promis j'arrête de poster double dés que j'ai compris comment le forum fonctionne...)

Content que vous n'ayez pris la mouche.
Oui il est préférable de rendre notre conversation publique, l'aide d'autres intervenants peut nous être précieuse.

lolomiaou83 a écrit :

Le problème est sans doute dans les css de mon blog (pas encore en ligne)...mais je ne sais pas comment en partager le code source (par mail ?)

Surtout pas par mail. Le plus pratique serait de poster le code sur un éditeur en ligne comme Codepen.io et de poster le lien ici même.

Sinon au sein du forum il est possible d'utiliser du balisage pour signaler les zones de codes qui permettent de le formater et d'en rendre l'affichage bien plus agréable qu'en mode texte.

A priori il s'agirait d'un problème simple mais qui se cache dans l'une de ces nombreuses lignes et je dois avouer que tenter de reproduire votre situation en solo de mon côté ne m'enchante guère car fort chronophage.

Pourriez-vous s'il vous plaît, vu que votre site n'est pas en ligne, avoir la bienveillance de le recopier sur Codepen que nous puissions le consulter sereinement et nous permettre de nous concentré sur le fond plus que sur la forme ?

Merci et bon courage !

Encore merci pour votre bienveillance.
...Codepen ? une première pour moi...
Est-ce que cela irait ?

https://codepen.io/lolomiaou83/pen/KaQqop/

lolomiaou83 a écrit :
Encore merci pour votre bienveillance.
...Codepen ? une première pour moi...
Est-ce que cela irait ?

https://codepen.io/lolomiaou83/pen/KaQqop/

Pas vraiment, mais nous y sommes presque.

En fait Codepen se divise en 4 parties :
* HTML : qui doit contenir le code html qui se trouve entre vos balises <body> et </body>
* CSS : qui doit contenir d'une part le code css inclus entre les balises <style> et </style>
ET le code contenu dans les fichiers css liés par une balise <link>
* JS : qui doit contenir d'une par le code Javascript contenu entre les balises <script> et </script> ET le code inclus dans les fichiers externes
* Zone d'affichage qui permet d'observer le rendu des 3 premières zones après traitement.

Concernant Jquery, il faut aller dans les paramètres et indiquer la librairie à utiliser.

Il est bon aussi de cibler le code à y insérer. En l’occurrence, dans le problème qui nous occupe nous n'avons besoin uniquement que du header qui contient le menu. La suite du site ne nous intéresse pas (même si Miss Selfridge est très attirante mais là je m'égare).
Pour ce faire copiez-collez par morceaux après avoir jugé de leur pertinence et non une copie intégrale de la source sans discernement (il me semblait bien que vous aviez répondu trop vite )
Modifié par Greg_Lumiere (31 Jan 2017 - 18:46)

c'est bien penaude que je reviens vers vous car à ce stade votre aisance est largement au dessus de mes compétences...(j'en suis confuse et un peu jalouse aussi ...)

J'ignore si vous avez eu accès à tout mon code...je serais tentée de dire oui si vous estimez qu'il est intégral...

J'en viens à me demander si j'ai bien collé les codes CSS ET HTML du menu-demo2 au bon endroit car une chose me perturbe...
Il existait bien un menu d'origine dans mon blog :indications main menu ligne 266 à 312

Puis il y a mon nouveau menu-demo 2
ligne 1531 à 1718 (style/style) donc CSS du menudemo2
ligne 1724 à 17791, le code HTML du menudemo2

Du coup quand vous me demandez de couper les parties qui nous interresse...je suis perplexe sur la partie body/body à coller

Quant à la partie JS ? alors là je suis perdue.

J'aimerais tellement repondre à votre demande mais je ne sais pas comment ?
Cordialement
laure

VOUS ETES UN MAGICIEN !!!!!
c'est merveilleux de voir mon menu caché et remplissant sa fonction
J'étais sûre que cela était possible !!!!!!

Bon rien n'est encore installé mais je devais vous exprimer ma joie !!!!
Merci du fond de mon coeur
Je comprend mieux votre pseudo : Greg la LUMIERE !!!

De flatterie, il n'en faut point. N'en jetez plus la coupe est pleine

Toutefois cette astuce en l'état n'est valable que pour un menu à 2 niveaux (à cause du choix des sélecteurs).

Le principe du Css est d'appliquer les règles en cascade ce qui signifie que la règle suivante prend le pas sur la précédente (sauf cas particulier bien sûr). C'est pourquoi je vous suggère de placer ce "correctif" le plus bas possible.

Malgré tout le principe est là ; c'est le jeu du j'te vois - j'te vois pas ou devrais-je dire l'inverse.
Au stade inerte le sous menu est en mode "j'te vois pas" et passe en mode "j'te vois" au survol de son cadet (li).

Rien de magique en somme, uniquement de la logique.

Heureux d'avoir pus vous libérer de ce vilain baobab greffé à votre pied, je vous souhaites une bonne continuation.

Et n'hésitez pas à revenir parmi nous, la connaissance n'est utile que lorsqu'elle est partagée et mise en pratique !


PS : J'adore le "voir mon menu caché"
Modifié par Greg_Lumiere (31 Jan 2017 - 20:43)

Cette fois ça y est c 'est installé !!!! et ça marche !
C'est vraiment un grand moment pour moi.
Merci infiniment Greg

PS: si vous aviez besoin de quoi que ce soit en design de site, ou photoshop...je me ferais une joie de vous rendre service
Laure

Vous m'en voyez ravi et vous remercie pour votre proposition.

Il ne vous reste plus qu'une toute dernière chose à faire :
éditer votre sujet afin de cocher la petite case "Sujet résolu"
qui aura pour effet de clore nos ébats.

..Avec plaisir !
Sujet résolu grâce à vous
N'hésitez surtout en cas de besoin
Bien cordialement