<style>
.flexMenu > li > a {display:block; font:normal 18px/50px 'lucida sans', verdana, sans-serif; background:#69c; position:relative; 
z-index:100; text-align:center; color:#fff; text-decoration:none;
-webkit-transition: 1s;
-moz-transition: 1s;
-ms-transition: 1s;
-o-transition: 1s;
transition: 1s;
}
.flexMenu li span {color:#333; font:normal 14px/18px 'lucida sans', verdana, sans-serif; padding:0 10px;}
.flexMenu {padding:0; margin:30px auto; list-style:none; width:200px; height:600px;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: flex;
text-align:center;
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
.item {border:1px solid #fff; border-width:1px 0; position:relative; overflow:hidden; border-radius:10px 10px 0 0; background:#69c;
-webkit-flex: 1;
-moz-flex: 1;
-ms-flex: 1;
flex: 1;
text-align:center;
-webkit-transition: 1s;
-moz-transition: 1s;
-ms-transition: 1s;
-o-transition: 1s;
transition: 1s;
}
.sub {position:absolute; top:-100%; height:87%; width:100%; padding:0; margin:0; list-style:none; background:#eee8e8;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: flex;
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-transition: 1s;
-moz-transition: 1s;
-ms-transition: 1s;
-o-transition: 1s;
transition: 1s;
}
.sub li {color:#000; border:1px solid #fff; border-width:1px 0;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: flex;
-webkit-flex-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
-webkit-flex: 1;
-moz-flex: 1;
-ms-flex: 1;
flex: 1;
}
.sub li a {display:block; margin:0 auto; text-decoration:none; color:#666; font:normal 14px 'lucida sans', verdana, sans-serif;}
.item:hover {
-webkit-flex: 8;
-moz-flex: 8;
-ms-flex: 8;
flex: 8;
}
.item:hover .sub {top:13%;}
.item:hover > a {box-shadow:0 10px 10px -10px rgba(0,0,0,0.5);}
.flexMenu a:hover {text-decoration:underline;}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.item {
min-height:10px;
max-height:120px;
}
.item:hover {
-webkit-flex: 1;
-moz-flex: 1;
-ms-flex: 1;
flex: 1;
min-height:400px;
max-height:400px;
}
}
</style><ul class ="flexMenu">
    <li class ="item">
	   <a href="#url">Products</a><img src="camera.png" alt="">
	   <ul class ="sub">
		  <li><a href="#sub">Cameras</a></li>
		  <li><a href="#sub">Video Recorders</a></li>
		  <li><a href="#sub">Telescopes</a></li>
	   </ul>
    </li>
    <li class ="item">
	   <a href="#url">Services</a><img src="printer.png" alt="">
	   <ul class ="sub">
		  <li><a href="#sub">Photography</a></li>
		  <li><a href="#sub">Video Editing</a></li>
		  <li><a href="#sub">Web Design</a></li>
		  <li><a href="#sub">Guides</a></li>
		  <li><a href="#sub">Tutorials</a></li> 
		  <li><a href="#sub">Picture Framing</a></li> 
	   </ul>
    </li>
    <li class ="item">
	   <a href="#url">Special Offers</a><img src="offers.png" alt="">
	   <ul class ="sub">
		  <li><a href="#sub">Cameras</a></li>
		  <li><a href="#sub">Mobile Phones</a></li>
		  <li><a href="#sub">Web Design</a></li>
		  <li><a href="#sub">Accessories</a></li>
	   </ul>
    </li>
    <li class ="item">
	   <a href="#url">Portfolio</a><img src="case.png" alt="">
	   <ul class ="sub">
		  <li><a href="#sub">Web Sites</a></li>
		  <li><a href="#sub">Photo Galleries</a></li>
		  <li><a href="#sub">Videos</a></li>
		  <li><a href="#sub">Animation</a></li>
		  <li><a href="#sub">Banner Design</a></li> 
		  <li><a href="#sub">Logo Design</a></li> 
		  <li><a href="#sub">SEO</a></li> 
	   </ul>
    </li>
    <li class ="item">
	   <a href="#url">Offices</a><img src="offices.png" alt="">
	   <ul class ="sub">
		  <li><a href="#sub">Bristol</a></li>
		  <li><a href="#sub">Bath</a></li>
		  <li><a href="#sub">Coventry</a></li>
		  <li><a href="#sub">Derby</a></li>
		  <li><a href="#sub">London</a></li> 
	   </ul>
    </li>
</ul>