鼠标悬停时水平展开导航条

我有一个简单的导航栏，但我想改善导航栏，当我点击一个按钮，导航栏水平扩展通过从两侧的按钮。所以我将有一个按钮在中心，点击菜单将形成从左和右。

<nav align="middle">
<ul>
    <li><a href="#"><img src="images/video-1.png" class="video" style="width:100px;height:50px;"></a></li>
    <li><a href="#"><img src="images/news-1.png" class="news" style="width:100px;height:50px;"></a></li>
    <li><a href="#"><img src="images/logo-4.png" class="home" style="width:80px;height:80px;"onmouseover="this.src='images/logo-4-hover.png';"
 onmouseout="this.src='images/logo-4.png';"></a></li>
    <li><a href="#"><img src="images/games-1.png" class="games" style="width:100px;height:50px;"></a></li>
    <li><a href="#"><img src="images/music-1.png" class="music" style="width:100px;height:50px;"></a></li>
</ul>
</nav>

li {
display: inline;
margin-right: .75em;
list-style: none;
margin: 0;
padding: 0;
}
html,body {
height:100%;  /* new */
}

ul {
position: fixed;
bottom: 0;
width: 100%;
list-style: none;
margin: 0;
padding: 0;
border: 5px solid black;
border-width: 5px 0;  
background-color: #515151;
}