padding parentage not work - html

Question

I am design a responsive menu. so i will add padding with parentage value. But Padding left right not working with parentage value and Privacy Policy menu will break.
.menu {
width: auto;
}
.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.menu ul li {
display: inline-table;
}
.menu a:link,
.menu a:visited {
padding: 12px 10%;
display: block;
text-decoration: none;
color: black;
text-transform: none;
border-bottom: 2px solid white;
transition: all .3s;
-webkit-transition: all .3s;
border: 1px solid red;
width: auto;
}
<div class="menu">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Privacy Policy</li>
</ul>
</div>
Results:
Where is the problem?
I want to make this such bellow image with responsive:
How can I do this?
Thanks in advance.

Answer 1

The padding will not work as a % as the parent element has no defined width, try:
.menu ul li {
display: inline-table;
width: 100px;
}
to see that the 10% is then 10% of the parent element, if it has a fixed width.

Answer 2

If, you no defined parent width, the definition of percentual in a, not wrks like you want, there is no relative witdh to make percentual it.
so try to make previous ansswer, define width in parent, or make this :
.menu a, .menu a:link, .menu a:visited {
padding: 12px 10px;
Define the padding with px and not with %
Even here is a fiddle with parent dwidth definitio, i prefer to do this
in ul and not in li.
.menu {
width: auto;
background: grey;
}
.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
display:table;
width:100%;
background: green;
}
.menu ul li {
display: table-cell;
width:auto;
}
.menu a, .menu a:link, .menu a:visited {
padding: 12px 10%;
margin:auto;
display: block;
text-decoration: none;
color: black;
text-transform: none;
border-bottom: 2px solid white;
transition: all .3s;
-webkit-transition: all .3s;
border: 1px solid red;
}
Or you can change the padding with px:
.menu {
width: auto;
background: grey;
}
.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
display:table;
width:auto;
background: green;
}
.menu ul li {
display: table-cell;
width:auto;
}
.menu a, .menu a:link, .menu a:visited {
padding: 12px 10px;
margin:auto;
display: block;
text-decoration: none;
color: black;
text-transform: none;
border-bottom: 2px solid white;
transition: all .3s;
-webkit-transition: all .3s;
border: 1px solid red;
}

Answer 3

Try changing those properties to the containing li elements, and removing from the menu a elements:
.menu ul li {
display: inline-table;
padding: 12px 10%;
border: 1px solid red;
}
*EDIT: Although, if a responsive menu is what you're after, you may want to go a different route, such as setting the width of the container li elements to a %, such as 24% or something like that.
.menu ul li {
display: inline-table;
width: 24%;
}