123

<!DOCTYPE html>

<head>

<meta ;

charset="UTF-8">

<title>Document</title>

<style>

* {

margin: 0;

padding: 0;

}

.menu {

padding-left: 20px;

padding-top: 20px;

position: absolute;

height: 230px;

width: 25%;

background: yellow;

border-bottom: 20px solid grey;

top: -250px;

transition-property: top;

transition-duration: 2s

}

.menu:hover{

top: 0;

}

a:link {

text-decoration: none;

display: block;

width: 90%;

border: 1px grey outset;

text-align: center;

border-radius: 12px;

background: linear-gradient(to top, #FF5454, #B63737);

padding: 3px;

color: white;

box-shadow: 4px 4px 3px rgba(0, 0 , 0, .5)

}

a:hover {

border: 1px grey inset;

box-shadow: none;

}

</style>

</head>

<body>

<a href="#link_1">Link_1 Lorem ipsum.</a><br>

<a href="#link_2">Link_2 Tempore, incidunt.</a><br>

<a href="#link_3">Link_3 Ipsum, porro.</a><br>

<a href="#link_4">Link_4 Aliquid, odio.</a><br>

<a href="#link_5">Link_5 Eligendi, quasi.</a><br><br><br>

Наведите, чтобы открыть меню!

</div>

</body>

</html>

123

Report Page