body, html {
height : 100%;
margin : 0;
padding : 0;
background-image : linear-gradient(to right, #66ff66 0%, #00cc00 100%);
}
body {
display : flex;
flex-direction : column;
}
a:hover {
color : white;
text-decoration : none;
}
a:active, a:focus {
color : yellow;
}
p > a:link {
color : red;
text-decoration : none;
}
p > a:visited {
color : red;
}
#haut {
position : sticky;
top : 0;
}
div > a:link {
color : white;
text-decoration : none;
}
div > a:visited {
color : white;
}
nav {
width : 100%;
background-color : #A0A0A0;
}
nav > ul {
margin : 0;
padding : 0;
}
nav > ul::after {
content : "";
display : block;
clear : both;
}
nav > ul > li {
float : left;
position : relative;
}
nav > ul > li a {
padding : 10px 45px;
color : #FFF;
}
nav > ul > li:hover a {
padding : 7px 45px 10px 45px;
}
.menu:hover {
border-top : 3px solid green;
}
nav li {
list-style-type : none;
}
.submenu {
display : none;
}
nav a {
display : inline-block;
text-decoration : none;
}
nav li:hover .submenu {
display : inline-block;
position : absolute;
top : 100%;
left : 0;
padding : 0;
z-index : 1000;
}
.menu a {
color : #fff;
}
.menu a:hover {
color : #fff;
}
.submenu li {
border-bottom : 1px solid #CCC;
}
.submenu li a {
padding : 50px 50px;
font-size : 15px;
width : 300px;
color : #220000;
}
.submenu {
background-color : gray;
}
.submenu li:hover a {
color : #EEE;
font-weight : bold;
}
nav > div {
position : absolute;
top : 10px;
right : 10px;
text-align : right;
color : white;
font-weight : bold;
}
.element {
margin-top : 50vh;
transform : translateY(-50%);
}
#bas {
position : sticky;
bottom : 0;
}
#footer {
margin-top : auto;
font-size : small;
text-align : center;
vertical-align : center;
background : #808080;
color : #fff;
padding : 8px 0;
width : 100%;
}
#footer a {
font-size : small;
vertical-align : text-top;
color : #fff;
}