body { margin: 0; font-size: 1.1em; } #bloc_page { width: 70%; margin: 0 auto auto auto; } #div1, #div2{ margin: 0px; padding: 0px; } figure { text-align: center; } header h1 { font-family: arial; text-align: center; color: white; font-size: 6em; text-shadow: 2pt 2pt 4pt black; background-color: rgba(255,255,255,0.5); background-image: url(louvre1.jpg); } /* création du menu nav */ nav{ width: 80%; margin: 0 auto; margin-top:-50px; background-color: white; position: sticky; top: 0px; background-color: rgba(184, 151, 124, 0.8); } nav ul{ list-style-type: none; } nav ul li{ float: left; width: 25%; text-align: center; } nav ul::after{ content: ""; display: table; clear: both; } nav a{ display: block; text-decoration: none; color: black; border-bottom: 2px solid transparent; padding: 10px 0px; } nav a:hover{ color: red; border-bottom: 2px solid gold; } .sous{ display: none; box-shadow: 0px 1px 2px #CCC; background-color: white; position: absolute; width: 100%; z-index: 1000; } nav > ul li:hover .sous{ display: block; } .sous li{ float: none; width: 100%; text-align: left; background-color: rgba(184, 151, 124, 0.8); } .sous a{ padding: 10px; border-bottom: none; background-color: rgba(184, 151, 124, 0.8)); } .sous a:hover{ border-bottom: none; } .deroulant > a::after{ content:" ▼"; font-size: 12px; } p { margin: 20px } img{ width:300; height: 250; margin: 20px; }