[Résolu] elargir le menu deroulant sur toute la largeur par EniRog - page 1

bonjour

je viens de faire le tuto suivant (très intéressant d'ailleurs )

https://www.youtube.com/watch?v=HNJDWcrhd7Y

mais j aimerais faire en sorte que les rubriques tiennent sur toute la page ( largeur) et pas bloquées à gauche comme sur le tuto

ça me paraissait simple au début mais à chaque fois que je change un attribut ca joue sur le @media , et je me perds un peu à la fin .

je precise que je débute en css , du coup si qqle un a une idée ou une direction a me donner ...

merci d'avance

code html

<!DOCTYPE html>
<html>
<head>
	<title>tuto menu deroulant</title>
	<link rel="stylesheet" type="text/css" href="tuto.css">
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<nav>
	<label for="menu-mobile" class="menu-mobile">menu</label>
	<input type="checkbox" id="menu-mobile" role="button">
	<ul>
		<li class="menu-html"><a href="#">creation</a>
			<ul class="submenu">
				<li><a href="#">cours html et css</a></li>
				<li><a href="#">element html</a></li>
				<li><a href="#"> attributs html</a></li>
				<li><a href="#">exercices</a></li>
			</ul>
		</li>		
		<li class="menu-css"><a href="#">css</a>
			<ul class="submenu">
				<li><a href="#">cours html et css</a></li>
				<li><a href="#">element html</a></li>
				<li><a href="#"> attributs html</a></li>
				<li><a href="#">exercices</a></li>
			</ul>
		</li>	
		<li class="menu-js"><a href="#">javascript</a>
			<ul class="submenu">
				<li><a href="#">cours html et css</a></li>
				<li><a href="#">element html</a></li>
				<li><a href="#"> attributs html</a></li>
				<li><a href="#">exercices</a></li>
			</ul>
		</li>	
		<li class="menu-contact"><a href="#">contact</a>
			
		</li>	


</body>
</html>

et le css

body
{
	font-family: verdana,sans-serif;
	margin: 0px;
	padding: 0px;
}
nav 
{
	width: 100%;
	background-color: #424558;
}

nav ul
{

	margin: 0px;
	padding:0px;
}
nav li
{
	list-style-type: none;

}

nav ul li 
{
	float: left;
	position: relative;

}

nav ul::after
{
	content: "";
	display: table;
	clear: both;
}
.submenu
{
	display: none;
}
nav input[type=checkbox]
{
	display: none;
}
nav label
{
	display: none;
}
nav a
{
	display: inline-block;
	text-decoration: none;
}
nav ul li a 
{
	padding:20px 30px;
	color: white;
}
nav ul li:hover a
{
	padding-top: 15px;
}
nav li:hover .submenu
{
	display: inline-block;
	position: absolute;
	top: 100%;
	left:0px;
	padding:0px;
	z-index: 1000; 
}
.submenu li a 
{
	padding: 15px 30px
	font-size:13px;
	color: grey;
	width: 270px;
}
.submenu li
{
	border-bottom: 1px solid #ccc;
}
.menu-html:hover
{
	border-top: 5px solid #c44d26;
	background-color: rgba(228,77,38,0.15);
}
.menu-css:hover
{
	border-top: 5px solid #0070bb;
	background-color: rgba(000,112,192,0.15);
}
.menu-js:hover
{
	border-top: 5px solid #f1dc4f;
	background-color: rgba(241,211,79,0.15);
}
.menu-contact:hover
{
	border-top: 5px solid #bbb;
	background-color: rgba(220,220,200,0.15);
}
.menu-html .submenu
{
	background-color: rgb(230,100,40);
}
.menu-css .submenu
{
	background-color: rgb(000,160,240);
}
.menu-js .submenu
{
	background-color: rgb(250,215,100);
}
.submenu li:hover a
{
color:#EEE;
font-weight: bold;
}
.menu-html .submenu li:hover
{
	background-color: rgb(210,77,60);
}
.menu-css .submenu li:hover
{
	background-color: rgb(000,115,200);
}
.menu-js .submenu li:hover
{
	background-color: rgb(200,165,75);
}
nav input[type=checkbox]:checked ~ ul
{
	display: block;
}
@media screen and (max-width: 780px){
	.menu-mobile
	{
		display: block;
		color: #FFF;
		background-color:rgba(29,197,151,0.97);
		text-align: center;
		padding: 12px 0px;
	}
	nav ul 
	{
		display: none;
	}
	nav ul li , nav ul li a 
	{
		width: 100%;
		text-align:center;
	}
	nav ul li a ,nav ul li:hover a 
	{
		padding: 10px 0px;
	}
	nav li:hover .submenu
	{
		display: block;
		position: static;
	}


}

EniRog

22 juin 2017 à 11:43:32