├── README.md
├── index.html
└── style.css


/README.md:
--------------------------------------------------------------------------------
1 | **Красивый меню с анимацией.**
2 | 
3 | # Подписывайте:
4 | [![Instagram](https://img.shields.io/badge/INSTAGRAM-FOLLOW-red?style=for-the-badge&logo=instagram)](https://instagram.com/cs.mer6)
5 | [![Instagram](https://img.shields.io/badge/TELEGRAM-CHANNEL-red?style=for-the-badge&logo=telegram)](https://t.me/Muhammedov)
6 | <a href="https://youtube.com/@nukotz?si=1Z6uz0wO2NpOeJUY"><img title="YouTube" src="https://img.shields.io/badge/YouTube-Channel-red?style=for-the-badge&logo=Youtube"></a>
7 | 
8 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <ul class="hList">
 2 |   <li>
 3 |     <a href="#click" class="menu">
 4 |       <h2 class="menu-title">animals</h2>
 5 |       <ul class="menu-dropdown">
 6 |         <li>cat</li>
 7 |         <li>dog</li>
 8 |         <li>horse</li>
 9 |         <li>cow</li>
10 |         <li>pig</li>
11 |       </ul>
12 |     </a>
13 |   </li>
14 |   <li>
15 |     <a href="#click" class="menu">
16 |       <h2 class="menu-title menu-title_2nd">names</h2>
17 |       <ul class="menu-dropdown">
18 |         <li>Kevin</li>
19 |         <li>Jim</li>
20 |         <li>Andy</li>
21 | 
22 |       </ul>
23 |     </a>
24 |   </li>
25 |   <li>
26 |     <a href="#click" class="menu">
27 |       <h2 class="menu-title menu-title_3rd">things</h2>
28 |       <ul class="menu-dropdown">
29 |         <li>bench</li>
30 |         <li>pizza</li>
31 |         <li>Honda CB125</li>
32 |         <li>space</li>
33 |         <li>black matter</li>
34 |         <li>apple</li>
35 |         <li>philodendron</li>
36 |         <li>liver</li>
37 |         <li>brass</li>
38 |       </ul>
39 |     </a>
40 |   </li>
41 |   <li>
42 |     <a href="#click" class="menu">
43 |       <h2 class="menu-title menu-title_4th">Movies</h2>
44 |       <ul class="menu-dropdown">
45 |         <li>Godzilla</li>
46 |         <li>Man on Wire</li>
47 |         <li>Spirited Away</li>
48 |         <li>Interstellar</li>
49 |       </ul>
50 |     </a>
51 |   </li>
52 | </ul>
53 | 


--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
 1 | @import url(https://fonts.googleapis.com/css?family=Roboto:400,700);
 2 | 
 3 | html {
 4 |   height: 100%;
 5 |   background-color: #f8f8f8;
 6 | }
 7 | 
 8 | body {
 9 |   overflow: hidden;
10 |   height: 100%;
11 |   width: 600px;
12 |   margin: 0 auto;
13 |   background-color: #ffffff;
14 |   font-family: 'Roboto', sans-serif;
15 |   color: #555555;
16 | }
17 | 
18 | a {
19 |   text-decoration: none;
20 |   color: inherit;
21 | }
22 | 
23 | * {
24 |   box-sizing: border-box;
25 | }
26 | 
27 | $menu_WIDTH: 150px;
28 | 
29 | .menu {
30 |   display: block;
31 |   position: relative;
32 |   cursor: pointer;
33 | }
34 | 
35 | .menu-title {
36 |   display: block;
37 | 


--------------------------------------------------------------------------------