List items position absolute in single line - html

Question

Hello I am trying to create menu with absolute position CSS rule for each list item. display: inline-block for parent doesn't work. Here's an example of markup.
.menu-items{
}
.main-menu{
position: relative;
list-style:none;
}
.main-menu li {
position: absolute;
float:left;
}
.main-menu li a{
font-size: 12px;
color: rgba(1, 1, 1, 1);
}
.main-menu li a:hover{
font-size: 21px;
color: rgba(1, 1, 1, 1);
}
<div class="row">
<div class="menu-items">
<ul class="main-menu">
<li>index</li>
<li>shop</li>
<li>about</li>
<li>projects</li>
<li>contacts</li>
</ul>
</div>
</div>

Answer 1

You can use transform:scal(x); , it won't disturb the layout.
.menu-items {} .main-menu {
list-style: none;
}
.main-menu li {
display: inline-block;/*modified*/
padding-left: 10px;/* moved here*/
}
.main-menu li a {
font-size: 12px;
color: rgba(1, 1, 1, 1);
display: inline-block;/*added*/
background:white;/*added*/
transition: 0.25s;/*added*/
}
.main-menu li a:hover {
transform: scale(1.75);/*modified*/
}
<div class="row">
<div class="menu-items">
<ul class="main-menu">
<li>index
</li>
<li>shop
</li>
<li>about
</li>
<li>projects
</li>
<li>contacts
</li>
</ul>
</div>
</div>

Answer 2

.menu-items {}
.main-menu {
position: relative;
list-style: none;
}
.main-menu li {
position: relative;
float: left;
width: 100px;
}
.main-menu li a {
font-size: 12px;
padding-left: 10px;
color: rgba(1, 1, 1, 1);
}
.main-menu li a:hover {
font-size: 21px;
overflow: hidden;
color: rgba(1, 1, 1, 1);
}
<div class="row">
<div class="menu-items">
<ul class="main-menu">
<li>index</li>
<li>shop</li>
<li>about</li>
<li>projects</li>
<li>contacts</li>
</ul>
</div>
</div>

Answer 3

You can use position:absolute, too, but on a elements:
.menu-items{
}
.main-menu{
list-style:none;
}
.main-menu li {
position:relative;
display:inline-block;
padding:30px;
}
.main-menu a {
font-size: 12px;
color: rgba(1, 1, 1, 1);
position:absolute;
width:100%;
height:100%;
left:0;
top:0;
}
.main-menu a:hover{
font-size: 21px;
color: rgba(1, 1, 1, 1);
}
<div class="row">
<div class="menu-items">
<ul class="main-menu">
<li>index</li>
<li>shop</li>
<li>about</li>
<li>projects</li>
<li>contacts</li>
</ul>
</div>
</div>

Answer 4

You can hardcode a "left: XXXpx" for each li but then you will have issues based on screen sizes. If you really want that for some reason though let me know and I will send an example of that.
Another option is to use a flex box (assuming you do not need this to work with older versions of IE) like below. The spacing between items will change, but it will be responsive to the size of the text and screen , versus just pushing everything to the right.
.flex-container {
padding: 0;
margin: 0;
list-style: none;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
justify-content: space-around;
}
.flex-item {
padding: 5px;
margin-top: 10px;
color: white;
text-align: center;
font-size: 12px;
color: rgba(1, 1, 1, 1);
}
.flex-item:hover {
font-size: 21px;
}
<div class="row">
<div class="menu-items">
<ul class="flex-container">
<li class="flex-item">index</li>
<li class="flex-item">shop</li>
<li class="flex-item">about</li>
<li class="flex-item">projects</li>
<li class="flex-item">contacts</li>
</ul>
</div>
</div>