Activate drop-down menu when the mouse passes

First, I recommend the following structure. It's much more semantic.

<nav class="menu">
  <div class="icon-list" text-decoration-style:none;>
    <ul class="main-list">
      <li>
        <a href="#"><i class="fa fa-fw fa-star-o"></i><span>Mantenimiento</span></a>
        <ul>
          <li><a href="/Cliente/index">Cliente</a></li>
          <li><a href="#">Jackets</a></li>
          <li><a href="#">Chinos &amp; Trousers</a></li>
          <li><a href="#">Jeans</a></li>
          <li><a href="#">T-Shirts</a></li>
          <li><a href="#">Underwear</a></li>
        </ul>
      </li>
      <li>
        <a href="#"><i class="fa fa-fw fa-bell-o"></i><span>Alerts</span></a>
      </li>
      <li>
        <a href="#"><i class="fa fa-fw fa-envelope-o"></i><span>Messages</span></a>
      </li>
      <li>
        <a href="#"><i class="fa fa-fw fa-comment-o"></i><span>Comments</span></a>
      </li>
      <li>
        <a href="#"><i class="fa fa-fw fa-bar-chart-o"></i><span>Analytics</span></a>
      </li>
      <li>
        <a href="#"><i class="fa fa-fw fa-newspaper-o"></i><span>Reading List</span></a>
      </li>
    </ul>
  </div>
</nav>

Second, we must eliminate the position: absolute of both the ul and the li . Also, as now a and ul are siblings, the :hover should be applied to the parent, that is, to the li , since, if we leave it in a:hover + ul , when removing the pointer from a will hide the submenu.

.menu li:hover > ul { 
  display: block; 
} 

.menu a + ul { 
  display: none; 
} 

.menu li:hover > a { 
  text-decoration:none; 
  background-color:#434343;
} 

.menu a + ul > li 
  display: block; 
  min-width:140px; 
}

Keep in mind that you can not do :hover on an element that is hidden, in your case you are pointing the :hover on the li that you have started as hidden

<style> 
    .menu a:hover + ul {
            background-color:red;
            display: block;
        }

    .menu ul{
            display:none;
            position:absolute;
            min-width:140px;
        }   
</style>

I would hide the ul and I would append the: hover on the <a> that is always visible and above all because it is a brother element and it is found before the element that you want to modify, an essential rule.

EDIT:

In case you do not want the list to overlap what is below, remove the position:absolute; , ending up like this:

<style> 
    .menu a:hover + ul {
            display: block;
        }

    .menu ul{
            display:none;
            min-width:140px;
        }   
</style>