How to make scroll down option in HTML/CSS // add text without breaking menu

Hi!

In advance - I’m sorry for my english. I have a problem with my website (HTML/CSS), I have created a small menu that you can see when you open the site. But I don’t know how can I make that if I click on any button, the site will scroll down to text about this (what is in button). Even if I’m adding any text, it’s to the right for menu, and menu get bugged. I wanted to make nice site, with Something looks like that: 

                     MENU

           (Choose an button)

-Now scroll to text about this button.

  • Now menu with uniform background - changes to something like that :

1 color - white background with text and photos - 1 color. I have made it before but now I dont know how to do it without destroying my MENU.

And that’s all ( I will add photo how i want to it looks). Can someone give me any advice how can I make this? Thanks !

<!doctype html>
<html>
<head>
    <title> Testuje druga wersje strony </title>
    <link rel="stylesheet" type="text/css" href="drugicss.css">
</head>
    <body>
    <ul>
            <li data-text="O serwerze"><a href="#"> O serwerze </a> </li>
            <li data-text="Zdjecia"><a href="#"> Zdjęcia </a> </li>
            <li data-text="Kiedy i jak"><a href="#"> Kiedy będzie można grać i jak zagrać? </a> </li>
            <li data-text="Tworca"><a href="#"> Twórca </a> </li>
    </ul>
    </body>
</html>

@import url('https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900&display=swap');

html {
  scroll-behavior: smooth;
 }

 a {
  text-decoration: none;
  color: black;
 }

 #down {
  margin-top: 100%;
  padding-bottom: 25%;
 }

*{
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
}

body{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #0d0f1b;
    /overflow: hidden; */
}

ul{
    position: relative;
    display: flex;
    flex-direction: column;
}

ul li{
    list-style: none;
}

ul li:before{
    content:attr(data-text);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    color: #fff;
    font-size: 6em;
    font-weight: 700;
    pointer-events: none;
    opacity: 0;
    letter-spacing: 20px;
    transition: 0.5s;
    white-space: nowrap;
}

ul li:hover:before{
    opacity: 0.05;
    letter-spacing: 0px;


}

ul li a{
    position: relative;
    display: inline-block;
    padding: 6px 15px;
    text-decoration: none;
    background: #2196f3;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 2px;
    overflow: hidden;
    transition: 0.5s;
    z-index: 1;
}

ul:hover li a{
    opacity: 0;

}

ul li a:hover{
    transform: scale(1.4);
    z-index: 1000;
    background: #ff3f81;
    opacity: 1;
}

ul li a:before{
    content: '';
    position: absolute;
    top: 0;
    left: -100px;
    width 80px;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.8), transparent);
    transform: skewX(35deg);
    transition: 0s;
}

ul li a:hover:before{
    left: calc(100% + 100px);
    transition: 0.5s;
    transition-delay: 0.2s;
}

test.png

In general: Put an anchor tag like <a id=“my-id”> around the text you want to scroll to, and then use the id value in your link, like <a href="#my-id">. If that doesn’t work it would probably help how things go wrong.