Скрыть текст внутри элемента списка

Question

У меня возникли проблемы с этой штукой прямо здесь.

HTML

<div class="navbar slide-menu"> 
<div class="container"> 
    <ul class="nav navbar-default"> 
     <li class="brand"><a href="#">Menu</a></li> 
     <li class="make-hidden"><a href="#">Home-to landing page</a></li> 
     <li class="make-hidden"><a href="#">More-find out more</a></li> 
     <li class="make-hidden"><a href="#">Social-connect with us</a></li> 
     <li class="make-hidden"><a href="#">Contact-find us near you</a></li> 
    </ul> 
</div> 

CSS

.slide-menu{ 
float:left; 
width:50%; 
height: 100%; 
margin-left:0px; 
margin-top:100px; 
} 
.container{ 
margin-left:0; 
padding: 0; 
} 
.nav{ 
width:25%; 
margin-left:0; 
} 
.make-hidden{ 
position: absolute; 
width:15%; 
z-index: 1; 
overflow: hidden; 
} 
.make-visible{ 
width:100%; 
transition:width 0.7s linear; 
} 

И есть еще некоторые JQuery сделать литиево элементы преобразовать ширину до 100% при мыши ввода. Но моя проблема в том, что я хочу, чтобы текст отображался только частично внутри элемента li, когда он скрыт. не изменять размер и ширину. Кто-нибудь знает, как это сделать? Благодаря

Для справки:

Answer 1

.slide-menu { 
 
    float: left; 
 
    width: 50%; 
 
    height: 100%; 
 
} 
 
.container { 
 
    margin-left: 0; 
 
    padding: 0; 
 
} 
 
.make-hidden { 
 
    /* position: absolute; */ /* <------------- removed */ 
 
    width: 15%; 
 
    white-space: nowrap; /* <----------------- this is key */ 
 
    z-index: 1; 
 
    overflow: hidden; 
 
    transition: width 0.7s linear; /* <--------- this has been moved */ 
 
} 
 
.make-hidden:hover { 
 
    width: 100%; 
 
}

<div class="navbar slide-menu"> 
 
    <div class="container"> 
 
     <ul class="nav navbar-default"> 
 
      <li class="brand"><a href="#">Menu</a></li> 
 
      <li class="make-hidden"><a href="#">Home-to landing page</a></li> 
 
      <li class="make-hidden"><a href="#">More-find out more</a></li> 
 
      <li class="make-hidden"><a href="#">Social-connect with us</a></li> 
 
      <li class="make-hidden"><a href="#">Contact-find us near you</a></li> 
 
     </ul> 
 
    </div> 
 
</div>