Выпадающее меню на css

<!-- Google Fonts -->
<link href='http://fonts.googleapis.com/css?family=Strait' rel='stylesheet' type='text/css'>

<!-- HTML -->

<div class="menu-container">
      
  <div class="nav">
      <div class="settings"></div>
  </div>
  
  <div class="menu">
      <ul>
        <li><a href="#" target="_blank"><img src="http://i.imgur.com/4JPrK.png"><p>Search</p></a></li>
        <li><a href="#" target="_blank"><img src="http://i.imgur.com/jHwHy.png"><p>Upload</p></a></li>
        <li><a href="#" target="_blank"><img src="http://i.imgur.com/Gyusy.png"><p>Location</p></a></li>
        <li><a href="#" target="_blank"><img src="http://i.imgur.com/mbWpc.png"><p>Contacts</p></a></li>
      </ul>
  </div>
  
</div>

* {
margin: 0;
padding: 0;
}

body {
 background-color: #a3cabd;
}

.menu-container {
  display: block;
  position: relative;
  width: 300px;
  background-color: #f3f0ef;
  margin: 5% auto 0;
  padding: 0;
  border-radius:5px;
  box-shadow:  inset 0 0 1px rgba(255,255,255,1);
  box-shadow:  5px 5px 15px 1px rgba(0,0,0,0.1);
}

.nav{
  background-color: #ed6b3a;
  height:40px;
  border-radius:5px 5px 0 0;
}

.settings {
  height:20px;
  float:right;
  background-image:url(http://i.imgur.com/CLs7u.png);
  width:20px;
  margin:10px;
}

.menu ul {
  list-style:none;
}

.menu ul li {
  border-top:1px solid rgba(0,0,0,0.1);
  padding:11px 10px;
  box-shadow:inset 0 1px 1px #fff;
  text-indent:10px;
  }

.menu ul li a {
  font-size:14px;
  color:#a4a3a3;
  font-family: 'Strait', sans-serif;
  font-size:14px;
  text-decoration:none;
  text-shadow: 1px 1px 1px #fff;
}

.menu ul li img {
  float:left;
  margin:-2px 0 0 0;
}

.menu ul li:hover {
  border-left:3px solid #ed6b3a;
  background-color:rgba(0,0,0,0.02);
}