How do i achieve this output in my menu dropdown - html

Question

I dont really no how to explain my question to get my expected result from readers but in soluction i need idea or soluction on How to code my css to output like this picture below in html menu dropdown
this my tried code:
a {
color: #4C9CF1;
text-decoration: none;
font-weight: bold;
}
a:hover {
color: #555;
}
nav {
float: left;
padding: 20px;
}
#menu-icon {
display: hidden;
width: 40px;
height: 40px;
background: #4C8FEC url(menu-icon.png) right;
border: 2px solid #000;
border-radius: 4px 0 4px 4px;
}
a:hover#menu-icon {
background-color: #444;
border-radius: 4px 4px 0 0;
}
ul {
list-style: none;
}
li {
display: inline-block;
float: right;
}
section {
margin: 80px auto 40px;
max-width: 980px;
position: relative;
padding: 20px
}
/*MEDIA QUERY*/
#media only screen and (max-width: 640px) {
header {
position: absolute;
}
#menu-icon {
display: inline-block;
}
nav ul,
nav:active ul {
display: none;
position: absolute;
padding: 2px;
border: 2px solid #000;
center: 20px;
width: 100%;
border-radius: 4px 0 4px 4px;
}
nav li {
text-align: center;
width: 100%;
padding: 2px 0;
margin: 0;
}
nav:hover ul {
display: block;
}
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</nav>
but it output my menu dropdown like this
what should i do big thanks for your time and impact in my soluction

Answer 1

First One:
https://jsfiddle.net/Liamm12/9wkavvd0/1/
Second One:
https://jsfiddle.net/Liamm12/9wkavvd0/2/
Hello There!
Maybe this what you are looking to do
First One
a {
color: #4C9CF1;
text-decoration: none;
font-weight: bold;
}
a:hover {
color: #555;
}
nav {
float: left;
padding: 20px;
}
#menu-icon {
display: hidden;
width: 40px;
height: 40px;
background: #4C8FEC url(menu-icon.png) right;
border: 2px solid #000;
border-radius: 4px 0 4px 4px;
}
a:hover#menu-icon {
background-color: #444;
border-radius: 4px 4px 0 0;
}
ul {
list-style: none;
}
li {
display: inline-block;
float: right;
}
section {
margin: 80px auto 40px;
max-width: 980px;
position: relative;
padding: 20px
}
/*MEDIA QUERY*/
#media only screen and (max-width: 640px) {
header {
position: absolute;
}
#menu-icon {
display: inline-block;
}
nav{
display:flex;
}
nav ul,
nav:active ul {
display: none;
padding: 6px 0px 0px 1px;
margin-left: 15px;
margin-top: 0px;
border: 2px solid #000;
border-radius: 4px 0 4px 4px;
}
nav li {
text-align: center;
width: 100%;
padding: 2px 0;
margin: 0;
}
nav:hover ul {
display: block;
}
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</nav>
Second One:
a {
color: #4C9CF1;
text-decoration: none;
font-weight: bold;
}
a:hover {
color: #555;
}
nav {
float: left;
padding: 20px;
}
#menu-icon {
display: hidden;
width: 40px;
height: 40px;
background: #4C8FEC url(menu-icon.png) right;
border: 2px solid #000;
border-radius: 4px 0 4px 4px;
}
a:hover#menu-icon {
background-color: #444;
border-radius: 4px 4px 0 0;
}
ul {
list-style: none;
}
li {
display: inline-block;
float: right;
}
section {
margin: 80px auto 40px;
max-width: 980px;
position: relative;
padding: 20px
}
/*MEDIA QUERY*/
#media only screen and (max-width: 640px) {
header {
position: absolute;
}
#menu-icon {
display: inline-block;
}
nav{
display:flex;
}
nav ul,
nav:active ul {
display: none;
padding: 6px 0px 0px 1px;
margin-left: 15px;
margin-top: 0px;
border: 2px solid #000;
border-radius: 4px 0 4px 4px;
}
nav li {
padding: 4px 8px 10px 5px;
margin: 0;
}
nav:hover ul {
display: block;
}
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</nav>

Answer 2

To solve your problem just use the flexbox!
.nav {
display: flex;
padding: 20px
}
nav li {
flex: 1
}
Set the nav to display: flex to show both elements in one line. Remove width of 100% from li and set a flex:1 so it expands to the given space. If you want to set a max-width - just set it with a value of your joice to bind it to a max expand range.
Remove the following
li {
display: inline-block;
float: right;
}
Further infos about the flexbox: https://www.w3schools.com/css/css3_flexbox.asp