Menu deroulant vertical hover
Résolu
moon136
Messages postés
71
Date d'inscription
Statut
Membre
Dernière intervention
-
moon136 Messages postés 71 Date d'inscription Statut Membre Dernière intervention -
moon136 Messages postés 71 Date d'inscription Statut Membre Dernière intervention -
Bonjour
J'ai un soucis avec mon menu deroulant le sousmenu ne se deroule pas à la vertical, il se déroule mais décalé à l'horizontal.
voici mes codes :
je bug completement je ne vois pas ce qu'il manque ou ce qui n'est pas correct
merci de votre aide
J'ai un soucis avec mon menu deroulant le sousmenu ne se deroule pas à la vertical, il se déroule mais décalé à l'horizontal.
voici mes codes :
<!DOCTYPE html> <html lang="fr"> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Test </title> <meta charset="utf-8"> <link href="http://fonts.googleapis.com/css?family=Audiowide" rel="stylesheet" type="text/css"> <meta name="viewport" content="width=device-width, initiale-scale=1" /> <link rel="stylesheet" href="css/reset.css"> <link rel="stylesheet" href="css/style.css"> <link </head> <body> <div id="wrapper"> <header><img src="img/bandeau.jpg"> <a class="open" href="#js-menu">Menu</a> </header> <div id="container"> <a class="open" href="#js-menu" title="bouton menu">Menu</a> <nav id="js-menu" class="menu"> <h2>Menu principal</h2> <ul id="menu"> <li><a href="index.html" title="retour accueil">Accueil</a></li> <li><a href="presentation.html" title="présentation">Présentation</a></li> <li id="nomobile"> <a href="#" title="catégorie les planètes">Les planètes</a> <ul id="sousmenu"> <li><a href="animation.html" title="planètes intérieures">Intérieures</a></li> <li><a href="geantes.html" title="planètes géantes">Géantes</a></li> </ul> </li> <li><a href="contact.html" title="nous contacter">Contact</a></li> </ul> </nav> </div> </body> </html>
html { font-size: 100%; } html, body { height: 100%; } body { max-width: 940px; width: 96%; margin: 0 auto; padding: 0px 2%; box-shadow: 0 0 1px #999; font-size: 1em; font-family: 'Audiowide'; line-height: 1.5em; background-color: #000; } img{max-width:100%;} #wrapper{ max-width:1024px; width:100%; margin: 0 auto; overflow:hidden; box-shadow:0 0 5px #ccc; } header { width: 100%; } img { width: 100%; height: auto; } .open { display: none; width: 40px; height: 30px; background: url(../images/menu.png) center no-repeat #999; border-radius: 8px; text-indent: -999em; } h1 { margin-bottom: 30px; } .menu a { float: left; width: 20%; height:25px; padding: 0; background-color: #ff9900; color: #FFF; text-decoration: none; text-align: center; background-image: -moz-linear-gradient(left, #557, #111); background-image: -ms-linear-gradient(left, #557, #111); background-image: -o-linear-gradient(left, #557, #111); background-image: -webkit-linear-gradient(left, #557, #111); background-image: linear-gradient(left, #557, #111); border: 1px solid white; -webkit-border-radius:2em 2em 0 2em; -moz-border-radius:2em 2em 0 2em; -ms-border-radius:2em 2em 2em 2em; -o-border-radius:2em 2em 2em 2em; border-radius: 2em 2em 0 2em; margin-left:30px; padding:0; } a:hover { opacity: 0.7; } .menu { display: none; text-align:center; } #pageslide .menu { display: none; } #pageslide .menu a { float: none; display: none; width: 100%; color: #FFF; border-bottom: 1px solid #000; box-shadow: 0 1px 0 #555; border-radius: 10px 10px 10px 10px; background: none; text-align: left; padding: 0; } ul{ margin:0; padding:0; } #sousmenu li{ width: 100%; margin-top:0.5em; float:none; margin-left:0; } #sousmenu{ height:0; overflow:hidden; -webkit-transition: height 0.5s; } #menu li:hover > #sousmenu { height:4em; } #actu{ list-style-type: none; width: 100%; } #actu li{ /* height: 50px; */ overflow: hidden; -webkit-transition: height 0.5s ease-in; transition: height 0.5s ease-in; } #actu h2{ background-color: #4c4c4c; border-radius: 20px; padding-left: 10px; font-size:16px; } #actu li:hover{ cursor: pointer; } #actu p{ display:none; } #cosmonaute{ background: url(../img/cosmonaute.png) no-repeat; width: 84px; height: 88px; position: absolute; z-index:1000; right:0; top: 0; text-align:center; padding-top:40px; -webkit-animation: cosmonaute 10s alternate infinite; animation: cosmonaute 10s alternate infinite; } #cosmonaute:hover{ -webkit-animation-play-state:paused; animation-play-state:paused; } #cosmonaute:hover::after{ content:"Hello"; margin-left:84px; } @-webkit-keyframes cosmonaute{ from{ right:1000px; top:380px; -webkit-transform: rotate(0deg) scale(0.2); transform: rotate(0deg) scale(0.2); } to{ right:100px; top: 100px; -webkit-transform: rotate(360deg) scale(1); transform: rotate(360deg) scale(1); } } @keyframes cosmonaute{ from{ right:1000px; top:380px; -webkit-transform: rotate(0deg) scale(0.2); transform: rotate(0deg) scale(0.2); } to{ right:100px; top: 100px; -webkit-transform: rotate(360deg) scale(1); transform: rotate(360deg) scale(1); } } .ImgAcueil{ float:left; width:30%; margin:0 1%; -webkit-transition:0.2s; transition:0.2s; } .ImgAcueil a{color:white;} .ImgAcueil:first-of-type{ margin-left:3%; } .ImgAcueil:hover{ -webkit-transform: rotate(30deg); transform: rotate(30deg); } footer { background: url(../img/footer.jpg) no-repeat; background-size: auto; width: 100%; height: 57px; min-height: 57px; float: left; color: #FFF; font-size: 18px; text-align: center; padding-top: 20px; margin-top: 30px; } .frame { width:80%; height:250px; margin:10%; } .frame2 { width:100%; height:250px; } .top30{ margin-top:30px; } .top40{ margin-top:40px; } label{ width:25%; float:left; color:#FFF; font-weight:bold; padding-top:10px; padding-left:20px; } .dx-input{ width:75%; float:left; padding-top:10px; } input[type="text"], textarea{ width:100%; } input[type="checkbox"] { color:#FFF; } nav { float: left; width: 100%; } .dv-4 a { color:#FFF; font-weight:bold; text-align:center; } /*div#imageContainer { vertical-align: bottom; display: table-cell; align-items: flex-end; display: flex; flex-direction: column; }*/ .TextContainer { width:100%; padding:10px; color:#FFF; text-align:center; } #nomobile{display: block;} nav{display:none;} h1{ font-size:1em; } .open{ display:block;} .menu h2{ display:block; } }
je bug completement je ne vois pas ce qu'il manque ou ce qui n'est pas correct
merci de votre aide
A voir également:
- Menu deroulant vertical hover
- Menu déroulant excel - Guide
- Excel menu déroulant en cascade - Guide
- Menu déroulant google sheet - Accueil - Guide bureautique
- Trait vertical clavier - Forum Windows
- Menu caché tv continental edison ✓ - Forum Téléviseurs