I have a side bar (<div>) in my asp.net page. It is on the left side of the page. It has some <ul> items which contains the hyperlinks.

The width of that div should be changed whenever user clicks on a button in that div tag. Before clicking by default the width of the tag is less. So whenever I change the width of the div to less (min size required in my page) in CSS the hyperlinks alignment get disturbed. I want the hyperlinks to be hidden when width is less and to be visible when the displayed when width is increased.

HTML:

<div class="sidebar">
    <ul>
        <br />
        <li>
            <i class="fa fa-navicon"></i>
        </li>
        <li>
            <i class="fa fa-home"></i>
            <a href="#">Home</a>
        </li>
        <li>
            <i class="fa fa-user"></i>
            <a href="#">Students</a>
            <ul>
                <li><i class="fa fa-info"></i></li>
                <li><a href="#">View</a></li>
            </ul>
            <ul>
                <li><i class="fa fa-plus"></i></li>
                <li><a href="#">Add</a></li>
            </ul>
            <ul>
                <li><i class="fa fa-edit"></i></li>
                <li><a href="#">Edit</a></li>
            </ul>
            <ul>
                <li><i class="fa fa-remove"></i></li>
                <li><a href="#">Delete</a></li>
            </ul>
        </li>
        <li>
            <i class="fa fa-book"></i>
            <a href="#">Subjects</a>
             <ul>
                <li><i class="fa fa-info"></i></li>
                <li><a href="#">View</a></li>
            </ul>
            <ul>
                <li><i class="fa fa-plus"></i></li>
                <li><a href="#">Add</a></li>
            </ul>
            <ul>
                <li><i class="fa fa-edit"></i></li>
                <li><a href="#">Edit</a></li>
            </ul>
            <ul>
                <li><i class="fa fa-remove"></i></li>
                <li><a href="#">Delete</a></li>
            </ul>
        </li>
        <li>
            <i class="fa fa-building"></i>
            <a href="#">Departments</a>
             <ul>
                <li><i class="fa fa-info"></i></li>
                <li><a href="#">View</a></li>
            </ul>
            <ul>
                <li><i class="fa fa-plus"></i></li>
                <li><a href="#">Add</a></li>
            </ul>
            <ul>
                <li><i class="fa fa-edit"></i></li>
                <li><a href="#">Edit</a></li>
            <<ul>
                <li><i class="fa fa-remove"></i></li>
                <li><a href="#">Delete</a></li>
            </ul>
        </li>
        <li>
            <i class="fa fa-users"></i>
            <a href="#">Users</a>
            <ul>
                <li><i class="fa fa-info"></i></li>
                <li><a href="#">View</a></li>
            </ul>
            <ul>
                <li><i class="fa fa-plus"></i></li>
                <li><a href="#">Add</a></li>
            </ul>
            <ul>
                <li><i class="fa fa-remove"></i></li>
                <li><a href="#">Delete</a></li>
            </ul>
        </li>
    </ul>
</div>`

CSS:

.sidebar
{
overflow:hidden;
width:250px;
background-color:dimgray;
}

.sidebar ul
{
list-style:none;
}
.sidebar ul li
 {
  display:block;
 margin-top:10px;
 margin-left:-20px;
}
.sidebar ul li i
{
  color:white;
  font-size:30px;
  padding:7px;
}
 .sidebar ul li a
  {
    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida       Sans Unicode', Geneva, Verdana, sans-serif;
    margin-left:10px;
    color:white;
    text-decoration:none;
    font-size:20px;
    width:150px;
    padding:7px;
    }
    .sidebar ul li ul
    {
     list-style:none;
     margin-left:25px;
     display:none;
    }
    .sidebar ul li:hover ul
     {
     display:inline-block;
     }
     .sidebar ul li ul li
     {
        display :inline-block;
     }
    .sidebar ul li ul li a
    {
      font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
     margin-left:15px;
    color:white;
    text-decoration:none;
    font-size:17px;
    width:150px;
   padding:7px;
   }
  .sidebar ul li ul li i
  {
  color:white;
  font-size:20px;
  padding:7px;
 }

So, when I have add overflow:hidden to sidebar the entire div disappears. How can I fix this?