How to make a hover menu without horizontal scroll?

Question

I'm just a beginner and I've got a problem with an easy task. I need to make a side menu that is half-hidden behind the screen. Something like that Example of hover menu. I want it to appear from the right when I hover it. Using my code below, a horizontal scroll appears. I can't give overflow:hidden to body because I need to scroll the page later. Give me some hints, please Don't pay attention to styles, I need this task just for practice :)

<div class="wrapper">
    <div class="main-content">
        <h1> Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem, aliquam!</h1>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro assumenda sint totam fugiat earum fugit? Obcaecati
            blanditiis nobis voluptatum enim labore nihil amet inventore ad? Est perspiciatis nam amet dicta laudantium
            vel dolor rerum minima quas non excepturi, repellat sequi!</p>
    </div>
</div>
<div class="hover-menu">
    <a href="#">About Us</a>
    <a href="#">Contacts</a>
    <a href="#">Location</a>
    <a href="#">Price</a>
    <a href="#">Cooperation</a>
</div>

body{
    background: url('/images/broken-lights.jpg') no-repeat 0 0/cover;
    text-align: center;
    width: 100%;
    position: relative;
}
.wrapper{
    padding-top: 100px;
    width: 1200px;
    min-height: 400px;
    margin: 0 auto;
    background: linear-gradient(black 0px, rgba(0,0,0, 0) 90%);
    border-radius: 40px;
    box-shadow: 0 0 10px;
}
.hover-menu{
    position: absolute;
    display: inline-block;
    top: 50%;
    transform: translate(0,-50%);
    right: -40px;
} 
.hover-menu a{
    display: block;
    background: turquoise;
    padding: 10px 20px;
    margin-bottom: 10px;
    border-radius: 40px; 
}

Answer 1

You will need the side menu just when you are wishing to click. So using overflow:hidden; will help. You can keep vertical scroll while eliminating horizontal-scroll. Here's how I would do -

body{
    background: url('/images/broken-lights.jpg') no-repeat 0 0/cover;
    text-align: center;
    width: 100%;
    position: relative;
   overflow-X: hidden;
}
.wrapper{
    padding-top: 100px;
    width: 1200px;
    min-height: 400px;
    margin: 0 auto;
    background: linear-gradient(black 0px, rgba(0,0,0, 0) 90%);
    border-radius: 40px;
    box-shadow: 0 0 10px;
    overflow-X:hidden;
}
.hover-menu{
    position: absolute;
    display: block;
    top: 25%;
    right: -40px;
} 
.hover-menu a{
    display: block;
    background: turquoise;
    padding: 10px 20px;
    margin-bottom: 10px;
    border-radius: 40px; 
}

.hover-menu:hover{
  transform:translateX(-40px);
  transition-duration:1s;
}

.hover-menu a:hover{
  transform:translateX(-40px);
  transition-duration:1s;
}
.hover-menu a{
  transition-duration:0.5s;
}
.hover-menu{
  transition-duration:0.5s;
} 

<div class="wrapper">
    <div class="main-content">
        <h1> Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem, aliquam!</h1>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro assumenda sint totam fugiat earum fugit? Obcaecati
            blanditiis nobis voluptatum enim labore nihil amet inventore ad? Est perspiciatis nam amet dicta laudantium
            vel dolor rerum minima quas non excepturi, repellat sequi!</p>
    </div>
</div>
<div class="hover-menu">
    <a href="#">About Us</a>
    <a href="#">Contacts</a>
    <a href="#">Location</a>
    <a href="#">Price</a>
    <a href="#">Cooperation</a>
</div>

There's no scrollbar appearing. You probably would only need to scroll vertically. So you can just use overflow-X:hidden;. You code lacks responsiveness with screen-size, but with the above code , you can just hover on the menu to make it appear and you code would work fine for desktop screens.

I have made few changes to make the side-menu look appropriately located and the animations/transitions look smooth.

Hope this helps !