Sujet Précédent Sujet Suivant

Menu déroulant à étages

Fermé
Utilisateur anonyme - 1 mai 2019 à 18:13
 Utilisateur anonyme - 7 mai 2019 à 08:55
Bonjour,

Dans le cadre de mon projet final d'ISN je réalise un site internet. J'ai souhaité insérer un menu déroulant au dessus d'un slideshow mais problème, le menu déroulant ne s'exécute pas normalement puisque les sous menu n'apparaissent que partiellement et en permanence au dessus mon slideshow au lieu d'être les uns sous les autres et uniquement lorsque la souris se place dessus. J'ai cherché différentes solutions mais rien de bien concluant. Je vous laisse ci-dessous les code html et css correspondant à cette partie :

• code html :
<li><a href="#">Ordinateur</a>
                        <ul>
                            <li><a href="histoire ordinateur.html">L'histoire</a></li>
                            <li><a href="composants ordinateur.html">Son fonctionnement</a></li>
                            <li><a href="#">Les systèmes d'exploitations</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Tablette</a>
                        <ul>
                            <li><a href="histoire tablette.html">L'histoire</a></li>
                            <li><a href="composants tablette.html">Son fonctionnement</a></li>
                            <li><a href="systèmes d'exploitation tablette.html">Les systèmes d'exploitation</a></li>
                        </ul>
                    </li>
                    <li><a href="que choisir.html">Que choisir ?</a>
                    </li>
                    <li><a href="#">Nos conseils</a>
                        <ul>
                            <li><a href="top tablette.html">Le top tablettes</a></li>
                            <li><a href="top PC portable.html">Le top PC portables</a></li>
                            <li><a href="top PC fixe.html">Le top PC de bureau</a></li>
                        </ul>
                    </li>
                </ul>



• code css : 
#menu-déroulant, #menu-déroulant ul{
	position : absolute; top: 62px; left: 306px;
    padding:20px;
    margin:0;
    list-style:none;
    text-align:center;
}
#menu-déroulant li{
    display:inline-block;
	position: relative;
    border-radius:6px 6px 0 0;
	box-shadow : 2px 2px 2px;
}
#menu-déroulant ul li{
    display:inherit;
    border-radius:0;
}
#menu-déroulant ul li:hover{
    border-radius:0;
}
#menu-déroulant ul li:last-child{
    border-radius:0 0 8px 8px;
}
#menu-déroulant ul{
    position:absolute;
	z-index:1;
    max-height:0;
    left: 0;
    right: 0;
    overflow:hidden;
    -moz-transition: .8s all .3s;
    -webkit-transition: .8s all .3s;
    transition: .8s all .3s;
}
#menu-déroulant li:hover ul{
    max-height:15em;
}

#menu-déroulant li:first-child{
    background-color: #CCCC99;
	background-image: -webkit-linear-gradient(top, #CCCC99 30%, #2A2333 100%);
	background-image:linear-gradient(to bottom, #CCCC99 30%, #2A2333 100%);
}
#menu-déroulant li:nth-child(2){
    background-color: #CCCC99;
	background-image: -webkit-linear-gradient(top, #CCCC99 30%, #2A2333 100%);
	background-image:linear-gradient(to bottom, #CCCC99 30%, #2A2333 100%);
}
#menu-déroulant li:nth-child(3){
    background-color: #CCCC99;
	background-image: -webkit-linear-gradient(top, #CCCC99 30%, #2A2333 100%);
	background-image:linear-gradient(to bottom, #CCCC99 30%, #2A2333 100%);
}
#menu-déroulant li:last-child{
    background-color: #CCCC99;
	background-image: -webkit-linear-gradient(top, #CCCC99 30%, #2A2333 100%);
	background-image:linear-gradient(to bottom, #CCCC99 30%, #2A2333 100%);
}

#menu-déroulant li:first-child li{
    background:#993333;
}
#menu-déroulant li:nth-child(2) li{
    background:#993333;
}
#menu-déroulant li:last-child li{
    background:#993333;
}

#menu-déroulant li:first-child:hover, #menu-déroulant li:first-child li:hover{
    background:#993333;
}
#menu-déroulant li:nth-child(2):hover, #menu-déroulant li:nth-child(2) li:hover{
    background:#993333;
}
#menu-déroulant li:last-child:hover, #menu-déroulant li:last-child li:hover{
    background:#993333;
}

#menu-déroulant a{
    text-decoration:none;
    display:block;
    padding:10px 70px;
    color:#FFFFFF;
    font-family:Cantarell;
}
#menu-déroulant ul a{
    padding:8px 0;
}
#menu-déroulant li:hover li a{
    color:#FFFFFF;
    text-transform:inherit;
}
#menu-déroulant li:hover a, #menu-déroulant li li:hover a{
    color:#000;
}


Voilà j'espère que vous pourrez me venir en aide rapidement.
Bonne soirée à vous
A voir également:

1 réponse

Réponse 1 / 1
jordane45 Messages postés 38301 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 22 novembre 2024 4 704
2 mai 2019 à 08:42
Bonjour,

Je pense que tu ne nous as pas donné le code html complet de ton menu.
Je doute qu'il commence par un <li>
et sans le code complet de ta page, de tout ton css ... je pense qu'il sera compliqué de te donner une réponse.
A la limite, si ton site est accessible par internet, n'hésites pas à nous donner le lien vers celui-ci
0
Utilisateur anonyme
4 mai 2019 à 21:57
Bonsoir,

Tout d'abord merci de votre réponse. Effectivement je me suis aperçue que j'avais oublié une ligne de code. Ma page n'est malheureusement pas accessible par internet mais je peux envoyer les codes complets par mail
0
jordane45 Messages postés 38301 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 22 novembre 2024 4 704 > Utilisateur anonyme
4 mai 2019 à 22:44
Tu peux aussi coller ton code complet ici...
0
Utilisateur anonyme
7 mai 2019 à 08:55 
<DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="style.css"/>
        <title></title>
    </head>
    
    <body>
        <div id="bloc_page">
            <header>
                <div id="titre_principal">
                    <div id="logo">
                        <a href="index.html"><img src="https://image.noelshack.com/fichiers/2019/17/6/1556400426-concepts-conception-chimie-1284-3956.gif" alt="logo"/></a>
                        <h1>Informatiko</h1>   
                    </div>						
                    <h2>site d'informatique</h2>
                </div>
            <nav>   
			    <ul id="menu-déroulant">
                    <li><a href="#">Ordinateur</a>
                        <ul>
                            <li><a href="histoire ordinateur.html">L'histoire</a></li>
                            <li><a href="composants ordinateur.html">Son fonctionnement</a></li>
                            <li><a href="#">Les systèmes d'exploitations</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Tablette</a>
                        <ul>
                            <li><a href="histoire tablette.html">L'histoire</a></li>
                            <li><a href="composants tablette.html">Son fonctionnement</a></li>
                            <li><a href="systèmes d'exploitation tablette.html">Les systèmes d'exploitation</a></li>
                        </ul>
                    </li>
                    <li><a href="que choisir.html">Que choisir ?</a>
                    </li>
                    <li><a href="#">Nos conseils</a>
                        <ul>
                            <li><a href="top tablette.html">Le top tablettes</a></li>
                            <li><a href="top PC portable.html">Le top PC portables</a></li>
                            <li><a href="top PC fixe.html">Le top PC de bureau</a></li>
                        </ul>
                    </li>
                </ul>
           </nav>
		   </header>
            
			<div align="center">
			  <div class="contener_slideshow">
		       <div class="contener_slide">
			    <div class="slid_1"><img src="https://image.noelshack.com/fichiers/2019/15/5/1555100821-chemistry-874157664.jpg" alt="chimie"></div>
                <div class="slid_2"><img src="https://image.noelshack.com/fichiers/2019/15/5/1555101244-physics-header.jpg" alt="formules"></div>
				<div class="slid_3"><img src="https://image.noelshack.com/fichiers/2019/15/6/1555184421-14763-math-news.jpg"alt="goutte"></div>
               </div>
              </div>
            </div>
            <div id="descriptionbannière">
                    <u>Notre top PC portable du mois</u>
                    <a href="top PC portable.html" class="bouton"></a>
                </div>
            </div>
            
            <section>
                <article>
                    <h1><center><strong><u>Informatiko</u></strong></center></h1>
                    <p>Bienvenue à toutes et à tous</p>
		            <p>Ce site d'informatique français a été conçu dans le but d'aiguiller aussi bien les professionnels que les particuliers dans leur
					choix en matière d'informatique. Bien souvent, les acheteurs se retrouvent perdus et ne savent pas quel produit répondra le mieux
					à leurs besoins et à leurs attentes.</p>
					<p>Afin de mettre fin à ce calvaire, nous avons décidé de créer ce site dans l'optique d'apporter des réponses aux questions que vous
					pouvez vous poser et surtout pour vous aider à faire votre choix.</p>
					<p>Ainsi, vous trouverez ici les différents caractéristiques propres à tous les ordinateurs ainsi qu'aux tablettes tactiles. Mais également
					les différences et similitudes entre ces deux grandes gammes de produits informatiques.</p>
					<p>Petit bonus : chaque mois nous créons notre top 3 des meilleurs produits afin que vous fassiez le meilleur achat possible.</p>
		        </article>
                <aside>
                    <h1><center><b><u>Pour nous contacter</u></b> :</center></h1>
					<p>• <u>Téléphone</u> : 02 32 27 69 80<p>
					<p>• <u>Adresse</u> : 23 rue d'Eragny</p>
					<p>• <u>Fax</u> : +41217211111</p>
					<center><img src="http://image.noelshack.com/fichiers/2018/45/5/1541796037-sans-titre-2.jpg"><center>
                </aside>
            </section>
			<footer>
				<div id=>
				<h1>Mon dernier tweet</h1>
                    <p>Hii haaaaaan !</p>
                    <p>le 12 mai à 23h12</p>
                </div>
				<div>
				<hr class="separation" />
				</div>
                <div id="mes_photos">
                    <h1>Mes photos</h1>
                    <p></p>
                </div>
                <div id="réseaux_sociaux">
                    <h1>Nos réseaux sociaux</h1>
                    <p><img src="https://image.noelshack.com/fichiers/2019/16/5/1555695715-sans-titre-4.gif" alt="facebook" /><img src="https://image.noelshack.com/fichiers/2019/16/5/1555695755-sans-titre-1.gif" alt="instagram" /><img src="https://image.noelshack.com/fichiers/2019/16/5/1555695795-sans-titre-2.gif" alt="twitter" /><img src="https://image.noelshack.com/fichiers/2019/16/5/1555695838-sans-titre-3.gif" alt="snapchat" /></p>
                </div>
            </footer>
        </div>
    </body>
</html>


body{
    background-color: #ECDEBB;
	width : 100%;
	height : 100%;
    font-family: 'Cantarell';
    color: #000000;
}

#bloc_page{
    width: 900px;
    margin: auto;
}

header{
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

#titre_principal{
    display: flex;
    flex-direction: column;
	position: absolute; top: 10px; left: 30px;
	
}

#logo{
    display: flex;
    flex-direction: row;
    align-items: baseline;
}

#logo img{
    width: 60px;
    height: 60px;
	vertical-align: middle;
}

header h1{
    font-family: 'hestina';
	color : black;
	text-shadow : 2px 2px 4px #000000;
    font-size: 2.8em;
    font-weight: normal;
    margin: 0 0 0 10px;
}

header h2{
    font-family: 'hestina';
	color : black;
    font-size: 1.2em;
	padding-left : 70px;
    margin-top: -13px;
    font-weight: normal;
}

nav ul{
    list-style-type: none;
    display: flex;
}

nav li{
    margin-right: 15px;
}

nav a{
    font-size: 11px;
    color: #663333;
    padding-bottom: 5px;
    text-decoration: none;
}

nav a:hover{
    color: #181818;
    border-bottom: 3px solid #760001;
}

#menu-déroulant, #menu-déroulant ul{
	position : absolute; top: 50px; left: 350px;
    padding:20px;
    margin:0;
    list-style:none;
    text-align:center;
}
#menu-déroulant li{
    display:inline-block;
    position:relative;
    border-radius:8px 8px 0 0;
}
#menu-déroulant ul li{
    display:inherit;
    border-radius:0;
}
#menu-déroulant ul li:hover{
    border-radius:0;
}
#menu-déroulant ul li:last-child{
    border-radius:0 0 8px 8px;
}
#menu-déroulant ul{
    position:absolute;
	z-index:3;
    max-height:0;
    left: 0;
    right: 0;
    overflow:hidden;
    -moz-transition: .8s all .3s;
    -webkit-transition: .8s all .3s;
    transition: .8s all .3s;
}
#menu-déroulant li:hover ul{
    max-height:15em;
}

#menu-déroulant li:first-child{
    background-color: #CCCC99;
}
#menu-déroulant li:nth-child(2){
    background-color: #CCCC99;
}
#menu-déroulant li:nth-child(3){
    background-color: #CCCC99;
}
#menu-déroulant li:last-child{
    background-color: #CCCC99;
}

#menu-déroulant li:first-child li{
    background:#993333;
}
#menu-déroulant li:nth-child(2) li{
    background:#993333;
}
#menu-déroulant li:last-child li{
    background:#993333;
}

#menu-déroulant li:first-child:hover, #menu-déroulant li:first-child li:hover{
    background:#993333;
}
#menu-déroulant li:nth-child(2):hover, #menu-déroulant li:nth-child(2) li:hover{
    background:#993333;
}
#menu-déroulant li:last-child:hover, #menu-déroulant li:last-child li:hover{
    background:#993333;
}

#menu-déroulant a{
    text-decoration:none;
    display:block;
    padding:10px 50px;
    color:#FFFFFF;
    font-family:Cantarell;
}
#menu-déroulant ul a{
    padding:8px 0;
}
#menu-déroulant li:hover li a{
    color:#FFFFFF;
    text-transform:inherit;
}
#menu-déroulant li:hover a, #menu-déroulant li li:hover a{
    color:#000;
}

.contener_slideshow
{
  width:1100px;
  height:200px;
  margin-top: 110px;
  margin-left: -100px;
  overflow: hidden;
  position: relative;
 }
.slid_1, .slid_2, .slid_3
{
  position: absolute;
  width:1100px;
  height:200px;
}
.slid_1{left: 0px;}
.slid_2{left: 1100px;}
.slid_3{left: 2200px;}

.contener_slide
{
  width: 1100px;
  height: 200px;
  left:0px;
  position: absolute;
  -webkit-animation-duration: 8s;
  -webkit-animation-iteration-count:infinite;
  -webkit-animation-name: anim_slide;
  -moz-animation-duration: 8s;
  -moz-animation-iteration-count:infinite;
  -moz-animation-name: anim_slide;
  -ms-animation-duration: 8s;
  -ms-animation-iteration-count:infinite;
  -ms-animation-name: anim_slide;
  animation-duration: 8s;
  animation-iteration-count:infinite;
  animation-name: anim_slide;
}
@-webkit-keyframes anim_slide 
{
  0% {left:0px;}
  22% {left:0px;}
  33% {left:-1100px;}
  45% {left:-1100px;}
  66% {left:-2200px;}
  90% {left:-2200px;}
}
@-moz-keyframes anim_slide 
{
  0% {left:0px;}
  22% {left:0px;}
  33% {left:-1100px;}
  45% {left:-1100px;}
  66% {left:-2200px;}
  90% {left:-2200px;}
}
@-ms-keyframes anim_slide 
{
  0% {left:0px;}
  22% {left:0px;}
  33% {left:-1100px;}
  45% {left:-1100px;}
  66% {left:-2200px;}
  90% {left:-2200px;}
}
@keyframes anim_slide 
{
  0% {left:0px;}
  22% {left:0px;}
  33% {left:-1100px;}
  45% {left:-1100px;}
  66% {left:-2200px;}
  90% {left:-2200px;}
}

#descriptionbannière{
	position: absolute;
	z-index: 2;
    border-radius: 5px 5px 5px 5px;
    width: 1090px;
    height: 33px;
	margin-top:-55px;
	margin-left:-100px;
    padding-top: 15px;
    padding-left: 10px;
    background-color: rgba(24,24,24,0.8);
    color: white;
    font-size: 0.8em;    
}

.bouton{
    height: 26px;
	width : 80px;
    position: absolute;
    right: 10px;
    bottom: 8px;
    background: #333366;
	border : 1px solid #ccc;
    font-size: 1.2em;
	border-radius : 4px;
    text-align: center;
    padding: 3px 0px 3px 0px;
    color: black;
    box-shadow: 2px 2px 4px #999;
}

section{
    display: flex;
    margin-bottom: 20px;
}

section h1, nav a{
    font-family: Caratell;
    font-weight: normal;
    text-transform: uppercase;
}

article, aside{
    text-align: justify;
}

article{
	height: 100%x;
	width : 500px;
	margin-top: 8px;
    margin-left: 125px;
	margin-right : 125px;
	padding : 10px;
	border-radius : 8px 8px 8px 8px;
	border-image: url('https://image.noelshack.com/fichiers/2019/15/6/1555191568-sans-titre-3.jpg');
    flex: 3;
	background-color:rgba(255,255,255,0.6);
}

.ico_categorie{
    vertical-align: middle;
    margin-right: 8px;
}

article p{
    font-size: 16px;
}
aside{
	margin-top: 8px;
	margin-right: 125px;
    flex: 1.2;
    position: relative;
    background-color: #CCCC99;
    box-shadow: 0px 2px 5px #1c1a19;
    border-radius: 5px;
    padding: 10px;
    color: white;
    font-size: 0.9em;
	height: 275px;
}

footer
{
    display: flex;
    background-color: #FFFFFF;
    padding-top: 30px;
	width: 100%;
	height: 120px;
	text-align: center;
}

footer p
{
	display: inline-block;
    font-size: 0.8em;
	margin-right: auto;
	margin-left: auto;
	vertical-align: center;
}
.separation{
	position: absolute;
	margin-top :10px;
	margin-left: 250px;
	height: 100px;
	width : 1px;
	color: #000000;
	}

footer h1
{
    font-size: 1.1em;
	margin-top: -10px;
	vertical-align: center;
}

#tweet
{
    width: 28%;
}

#mes_photos
{
    width: 35%;
}

#réseaux_sociaux
{
    display: flex;
	margin-right: 100px;
	justify-content: space-between;
	
}

#réseaux_sociaux img
{
    margin-right: 2px;
}
0

Discussions similaires

Suppression listes déroulantes
Archa -
Sam -

5 réponses
Supprimer liste déroulante Excel
SamAlex -
b@bd -

8 réponses
Effacer liste déroulante
gabrielle -
jmps -

3 réponses
supprimer une liste déroulante
fred94 -
m@rina -

3 réponses
les entrées et les sortées
oussman -
MarsuGL -

2 réponses