how to keep position of other link when mouse is over a link-html Css?

I have a ul list with float:right for li. I want to set this to center of page. margin and left doesnt work well.

I want when mouse is over a link ,keep position of other link and dont move forward.

My css code is this:

#menu2 li a {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
#menu2 li a:hover {
  border: none;
  font-size: 30px;
}
<!--===============================================================<!--===============================================================--> --> ul,
li {
  display: inline-block;
}
#menu2 ul {
  list-style-type: none;
  background-color: #003;
  text-align: center;
}
#menu2 li {
  float: left;
  list-style-type: none;
  padding: 15px 15px;
}
#menu2 {
  min-width: 800px;
  margin-top: 15%;
  right: 65% !important;
}
#menu2 li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  background-color: #093;
  transition: all 0.5s ease 0s;
  font-size: 18px;
  min-width: 95px;
  border-radius: 50px;
}

<div align="center" style="height:100%;width:100%;">
  <div class="menu" id="menu2" align="center">
    <ul>
      <li><a href="brands.php">Brands</a></li>
      <li><a href="contact.php">&nbsp;&nbsp;&nbsp;Contact&nbsp;&nbsp;&nbsp;</a></li>
      <li><a href="price.php">&nbsp;&nbsp;&nbsp;Price List&nbsp;&nbsp;&nbsp;</a></li>
      <li><a href="about.php">&nbsp;&nbsp;&nbsp;About&nbsp;&nbsp;&nbsp;</a></li>
      <li><a href="index0.php">&nbsp;&nbsp;&nbsp;Home&nbsp;&nbsp;&nbsp;</a></li>
    </ul>
  </div>
</div>

How can I solve this??? I use a:after but doesnt work.

Solution

By replacing the li with div and write CSS style with the following attributes and change CSS Codes for div the problem was solved. Thanks all

   <div align="center" style="height:100%;width:100%;">
              <div class="menu" id="menu2" align="center"   >
                                <div  style="z-index:18;position:absolute;margin-right:25px;text-align:center;vertical-align:middle;" align="center" ><a href="brands.php">Brands</a></div>
                                <div style="z-index:17;position:absolute;margin-right:155px;"><a href="contact.php">&nbsp;&nbsp;&nbsp;Contact&nbsp;&nbsp;&nbsp;</a></div>
                                <div style="z-index:16;position:absolute;margin-right:265px;"><a href="price.php">&nbsp;&nbsp;&nbsp;Price List&nbsp;&nbsp;&nbsp;</a></div>
                                <div style="z-index:15;position:absolute;margin-right:405px;"><a href="about.php">&nbsp;&nbsp;&nbsp;About&nbsp;&nbsp;&nbsp;</a></div>
                                <div style="z-index:14;position:absolute;margin-right:520px;"><a href="index0.php">&nbsp;&nbsp;&nbsp;Home&nbsp;&nbsp;&nbsp;</a></div>

              </div>
 </div>