How to create a navigation like on the layout?

please help to create a navigation like on the layout.and when you hover the NAV did not jump5e4c0ce41ecf8326062374.png
April 7th 20 at 15:44
5 answers
April 7th 20 at 15:46
so (here at flex)
or this ready
thank you) - holden.Leuschke commented on April 7th 20 at 15:49
April 7th 20 at 15:48
you to freelancing
Oh, you need somebody else did (for free) ))) - Pascale_Fay commented on April 7th 20 at 15:51
@Maida54, Yes, for free, and chlorine-cheese - Otilia_Dooley commented on April 7th 20 at 15:54
thank you. I am learning to impose - holden.Leuschke commented on April 7th 20 at 15:57
@erna_Grant38, open YouTube there such lessons even though f..y chew - Otilia_Dooley commented on April 7th 20 at 16:00
@erna_Grant38, chikni code below to you with explanations left) - Pascale_Fay commented on April 7th 20 at 16:03
April 7th 20 at 15:50
There are also ready-made solutions, here is an example:
https://codepen.io/nz4/pen/xVyvmz
https://codepen.io/nz4/pen/bpQGGL
https://codepen.io/nz4/pen/mPzNQZ

And then the handles can be finished.

READY CODE
the <body>
the <ul>
 the <li><a href="#">HOME</a></li>
 the <li><a href="#">ABOUT</a></li>
 the <li><a href="#">WORK</a></li>
 the <li><a href="#">BLOG</a></li>
 the <li><a href="#">CONTACT</a></li>
</ul>
</body>


body {
 background-color: #86519d;
}

ul {
 list-style: none; /*we remove the markers list*/
 margin: 0; /*we remove indents*/
 padding-left: 0; /*we remove indents*/
 margin-top:25px; /*make the top margin*/
}
a {
 text-decoration: none; /*remove underlining of link text*/
 color:#fff; /*change color of links*/
 padding:10px; /*add indentation*/
 font-family: arial; /*change the font*/
 border-radius:4px; /*add rounding*/
 -moz-transition: all 0.3 s 0.01 s ease; /*make a smooth transition*/
 -o-transition: all 0.3 s 0.01 s ease;
 -webkit-transition: all 0.3 s 0.01 s ease;
}
a:hover {
 background:#653a79;/*add hover effect*/
}
li {
 float:left; /*place the list horizontally for the implementation of menu*/
 margin-right:5px; /*Add the indent of the menu items*/
}
thank you very much - holden.Leuschke commented on April 7th 20 at 15:53
April 7th 20 at 15:52
April 7th 20 at 15:54

Find more questions by tags HTML