Bonsoir à tous,

J'ai un menu déroulant sur le site que je suis entrain de réaliser.

Sur la version desktop aucun soucis, il est comme je le veux , voici l'image:

Mais sur la version mobile j'ai deux soucis, surtout un a vrai dire.

Voici l'image:

Donc d'une part il y a un espace entre le menu et l'onglet "Accueil" (le moins génant), mais surtout l'onglet Acceuil n'a pas de border-radius sur le coté droit ce qui fait moche et pas très homogène..

Voici les codes.

HTML:

<div class="md">
<ul id="menu-demo2">
    <li><a class="flech" href="#">Menu<a class="fleche"> ▼ </a>
        <ul>
            <li><a href="index.php">Accueil</a></li>
            <li><a href="varietes.php">Variétés</a></li>
            <li><a href="sommaire.php">Recettes</a></li>
            <li><a href="forum">Forum</a></li>
            <li><a href="galerie photo.php">Galerie photo</a></li>   
        </ul>
    </li>
</ul>
</div>

Le .css:

.md{
margin-top: 5.2%;
margin-left: 2%;
}
#menu-demo2, #menu-demo2 ul{
padding:0;
margin:0;
list-style:none;
position: fixed;
z-index: 1;	
}
#menu-demo2 li{
display:inline-block;
position:relative;
border-radius:5px;
}
#menu-demo2 ul li{
display:inherit;
border-radius:5px;
}
#menu-demo2 ul li:hover{
border-radius:5px;
}
#menu-demo2 ul li:last-child{
border-radius:5px;
}
#menu-demo2 ul{
position:absolute;
z-index: 1000;
max-height:0;
left: 0;
right: 0;
overflow:hidden;
-moz-transition: .8s all .3s;
-webkit-transition: .8s all .3s;
transition: .8s all .3s;
}
#menu-demo2 li:hover ul{
max-height:15em;
}
/* background des liens menus */
#menu-demo2 li:first-child{
background-image:-webkit-linear-gradient(top, #5FE225 0%, #10A89D 100%);
background-image: linear-gradient(to bottom, #5FE225 0%, #10A89D 100%);
background-color: #18A83D;
box-shadow: 3px 3px 0px black;
background-image:-webkit-linear-gradient(top, black);
background-image:linear-gradient(to bottom, black);
}
/* background des liens sous menus */
#menu-demo2 li:last-child li{
background:#5FE225;
box-shadow: 1px 1px 1px 1px black;
margin-bottom: 0.5%;
}
/* background des liens menus et sous menus au survol */
#menu-demo2 li:last-child:hover, #menu-demo2 li:last-child li:hover{
background-image:-webkit-linear-gradient(top, #5FE225 0%, #10A89D 100%);
background-image: linear-gradient(to bottom, #5FE225 0%, #10A89D 100%);
box-shadow: 1px 1px 1px 1px black;
margin-bottom: 0.5%;
}
/* les a href */
#menu-demo2 a{
text-decoration:none;
display:block;
padding:14px 115px;
color:black;
font-family: Georgia, Verdana, sans-serif;
}
#menu-demo2 ul a{
padding:8px 0;
}
#menu-demo2 li:hover li a{
color:black;
text-transform:inherit;
}
#menu-demo2 li:hover a, #menu-demo2 li li:hover a{
color:#000;
}

Et pour finir le css responsive:

.md{	
margin-left: 2%;
height: 10%;
width: auto;
}
#menu-demo2, #menu-demo2 ul{
margin-top: -3.5%;
}
#menu-demo2 li:first-child{
width: 400%;
height: 40px;
}
a.fleche{
padding: 12% !important;
font-size: 80%;	
}
a.flech{
padding: 4% !important;
margin-left: 33%;
}

Merci d'avance a ceux qui pourront m'aider.

Cordialement.

Bonjour, ton HTML n'est pas correct, L3 tu as deux ouverture de balise <a>, tu ne peux avoir un lien dans un lien.

>>Et pour finir le css responsive:

ou est la media queries? J’espère que tu n'as indiqué le CSS que tu appelles responsive juste après le précédant CSS sans indiquer une media queries. 

Et pourquoi surcharger avec des !important?

Ton premier <li> à une largeur de 400% et comme tu as un overflow:hidden; sur le parent tu ne vois pas la fin de cet élément. => tu ne vois pas le border radius de  droite, mais il est bien la.

Pour voir le problème utilise l'inspecteur des éléments (F12 sur la plupart des navigateur) Dans l'onglet HTML passe la souris sur le premier <li> et tu verras la place qu'il prend.

Je trouve ton menu déroulant un peu bizarre, je recommande d’aller voir http://www.frogweb.fr/   

-
Edité par AbcAbc6 5 février 2020 à 2:25:52

Merci beaucoups pour ta réponse AbcAbc6 .

Pour te répondre, oui j'avais une media queries mais je n'avais pas jugé nécessaire de la poster et merci pour ton lien, mon menu en était justement inspiré.

Aprés avoir un peu cherché et avoir réfléchi a ce menu, j'ai décider de le remplacer par un plus moderne avec du JS.

J'ai trouvé un menu sympaet je l'ai bien adapté à mon site.

Mais j'ai juste un petit soucis pour que tout soit parfait.

Je voudrais que le menu déroulant, pousse les éléments du dessous quant il s'ouvre.

Voici le HTML:

<div class="container"> 
      <div class="main">
        <div class="side">
          <nav class="dr-menu">
            <div class="dr-trigger"><span class="dr-icon dr-icon-menu"></span><a class="dr-label">Menu</a></div>
            <ul>
              <li><a class="dr-icon dr-icon-user" href="#">Accueil</a></li>
              <li><a class="dr-icon dr-icon-camera" href="#">Variétés</a></li>
              <li><a class="dr-icon dr-icon-heart" href="#">Multiplication</a></li>
              <li><a class="dr-icon dr-icon-bullhorn" href="#">Recettes</a></li>
              <li><a class="dr-icon dr-icon-download" href="#">Forum</a></li>
              <li><a class="dr-icon dr-icon-settings" href="#">Galerie photo</a></li>
            </ul>
          </nav>
        </div>
      </div>
    </div>

Les .css

@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);

body, html { font-size: 100%; padding: 0; margin: 0;}

/* Reset */
*,
*:after,
*:before {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before,
.clearfix:after {
	content: " ";
	display: table;
}

.clearfix:after {
	clear: both;
}

body {
	font-family: 'Lato', Calibri, Arial, sans-serif;
	font-weight: 400;
}

a {
	text-decoration: none;
    color: white;
}

a:hover {
	color: white;
}
.main,
.container > header {
	width: 100%;
	margin: 0 auto;
	padding: 0 1.875em 3.125em 1.875em;
	position: absolute;
}

.main {
	max-width: 69em;
	min-height: 600px;
	padding: 2em 0 0 0;
	position: absolute;

}
.side {
	position: fixed;
	width: 1%;
	padding-right: 0px;
	box-shadow: 1px 0 rgba(0,0,0,0.1);
	margin-top: -25%;
    margin-left: 1%;
    margin-bottom: 0% !important;
  
}

.main p {
	font-size: 2em;
	padding: 0 1em;
	margin: 0;
	line-height: 1.5;
	float: right;
	width: 70%;
}

.container > header {
	padding: 2.875em 1.875em 2.875em;
	text-align: center;
	background: rgba(0,0,0,0.02);
	position: relative;
}

.container > header h1 {
	font-size: 2.625em;
	line-height: 1.3;
	margin: 0;
	color: #fff;
	font-weight: 300;
}

.container > header span {
	display: block;
	font-size: 60%;
	color: rgba(255,255,255,0.7);
	padding: 0 0 0.6em 0.1em;
}

@media screen and (max-width: 66.9375em) {
	.side, .main p {
		float: none;
		width: 100%;
		box-shadow: none;
		padding: 1em;
	}

	.main p {
		font-size: 130%;
	}
}

@font-face {
	font-family: 'icomoon';
	src:url('../fonts/icomoon.eot');
	src:url('../fonts/icomoon.eot?#iefix') format('embedded-opentype'),
		url('../fonts/icomoon.woff') format('woff'),
		url('../fonts/icomoon.ttf') format('truetype'),
		url('../fonts/icomoon.svg#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;
}
.dr-menu {
	width: 100%;
	max-width: 400px;
	min-width: 300px;
	position: relative;
	font-size: 1.3em;
	line-height: 2.5;
	font-weight: 400;
	color: white;
	padding-top: 2em;
}

.dr-menu > div  {
	cursor: pointer;
	position: absolute;
	width: 100%;
	z-index: 100;
}

.dr-menu > div .dr-icon {
	top: 0;
	left: 0;
	position: absolute;
	font-size: 150%;
	line-height: 1.6;
	padding: 0 10px;
	-webkit-transition: all 0.2s ease;
	-moz-transition: all 0.2s ease;
	transition: all 0.2s ease;
}

.dr-menu.dr-menu-open > div .dr-icon {
	color: white;
	left: 100%;
	-webkit-transform: translateX(-100%);
	-moz-transform: translateX(-100%);
	-ms-transform: translateX(-100%);
	transform: translateX(-100%);
}

.dr-menu > div .dr-icon:after {
	content: "\e008";
	position: absolute;
	font-size: 50%;
	line-height: 3.25;
	left: -10%;
	opacity: 0;
}

.dr-menu.dr-menu-open > div .dr-icon:after {
	opacity: 1;
}

.dr-menu > div .dr-label {
	padding-left: 3em;
	position: relative;
	display: block;
	color: #18A83D;
	font-size: 0.9em;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	line-height: 2.75;
	-webkit-transition: all 0.2s ease;
	-moz-transition: all 0.2s ease;
	transition: all 0.2s ease;
}

.dr-menu.dr-menu-open > div .dr-label {
	-webkit-transform: translateY(-90%);
	-moz-transform: translateY(-90%);
	-ms-transform: translateY(-90%);
	transform: translateY(-90%);
}

.dr-menu ul {
	padding: 0;
	margin: 0 3em 0 0;
	list-style: none;
	opacity: 0;
	position: relative;
	z-index: 0;
	pointer-events: none;
	-webkit-transition: opacity 0s linear 205ms;
	-moz-transition: opacity 0s linear 205ms;
	transition: opacity 0s linear 205ms;
}

.dr-menu.dr-menu-open ul {
	opacity: 1;
	z-index: 200;
	pointer-events: auto;
	-webkit-transition: opacity 0s linear 0s;
	-moz-transition: opacity 0s linear 0s;
	transition: opacity 0s linear 0s;
}

.dr-menu ul li {
	display: block;
	margin: 0 0 5px 0;
	opacity: 0;	
	-webkit-transition: opacity 0.3s ease;
	-moz-transition: opacity 0.3s ease;
	transition: opacity 0.3s ease;
}

.dr-menu.dr-menu-open ul li {
	opacity: 1;	
}

.dr-menu.dr-menu-open ul li:nth-child(2) {
	-webkit-transition-delay: 35ms;
	-moz-transition-delay: 35ms;
	transition-delay: 35ms;
}

.dr-menu.dr-menu-open ul li:nth-child(3) {
	-webkit-transition-delay: 70ms;
	-moz-transition-delay: 70ms;
	transition-delay: 70ms;
}

.dr-menu.dr-menu-open ul li:nth-child(4) {
	-webkit-transition-delay: 105ms;
	-moz-transition-delay: 105ms;
	transition-delay: 105ms;
}

.dr-menu.dr-menu-open ul li:nth-child(5) {
	-webkit-transition-delay: 140ms;
	-moz-transition-delay: 140ms;
	transition-delay: 140ms;
}

.dr-menu.dr-menu-open ul li:nth-child(6) {
	-webkit-transition-delay: 175ms;
	-moz-transition-delay: 175ms;
	transition-delay: 175ms;
}

.dr-menu.dr-menu-open ul li:nth-child(7) {
	-webkit-transition-delay: 205ms;
	-moz-transition-delay: 205ms;
	transition-delay: 205ms;
}

.dr-menu ul li a {
	display: inline-block;
	padding: 0 20px;
	color: #18A83D;
}

.dr-menu ul li a:hover {
	color: white;
}

.dr-icon:before, 
.dr-icon:after {
	position: relative;
	font-family: 'icomoon';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	-webkit-font-smoothing: antialiased;
}

.dr-menu ul .dr-icon:before {
	margin-right: 15px;
}

.dr-icon-bullhorn:before {
	content: "\e000";
}

.dr-icon-camera:before {
	content: "\e002";
}

.dr-icon-heart:before {
	content: "\e003";
}

.dr-icon-settings:before {
	content: "\e004";
}

.dr-icon-switch:before {
	content: "\e005";
}

.dr-icon-download:before {
	content: "\e006";
}

.dr-icon-user:before {
	content: "\e001";
}

.dr-icon-menu:before {
	content: "\e007";
}

Si nécéssaire je peut également fournir les deux codes JS qui vont avec.

Merci d'avance a ceux qui prendront le temps de m'aider.

(Le soucis n'étant pas le mème, si je dois créer un nouveau sujet, merci de me le dire mais je post cela ici dans un premier temps afin de ne pas ouvrir de sujet a tout va.. )

Jean.