Kategoriler Menu Tasarımı Red Style

WebForm Ekranı
<div class="header_bottom_left">    
    <div class="categories">
      <ul>
       <h3>Categories</h3>
          <li><a href="#">Mobile Phones</a></li>
          <li><a href="#">Desktop</a></li>
          <li><a href="#">Laptop</a></li>
          <li><a href="#">Accessories</a></li>
          <li><a href="#">Software</a></li>
           <li><a href="#">Sports &amp; Fitness</a></li>
           <li><a href="#">Footwear</a></li>
           <li><a href="#">Jewellery</a></li>
           <li><a href="#">Clothing</a></li>
           <li><a href="#">Home Decor &amp; Kitchen</a></li>
           <li><a href="#">Beauty &amp; Healthcare</a></li>
           <li><a href="#">Toys, Kids &amp; Babies</a></li>
      </ul>
    </div>     
         </div>

CSS Formu
@font-face {
    font-family: 'ambleregular';
    src:url(../font/Amble-Regular-webfont.ttf) format('truetype'); 
}
ol,ul{list-style:none;margin:0;padding:0;}
a{text-decoration:none;}
.header_bottom_left{
 float:left;
 width:250px;
}
@media only screen and (max-width: 640px) { 
 .header_bottom_left
 {
  float:none;
  width:100%;
  
 }
}
.categories{
 border:1px solid #EEE;
}
.categories h3{
 font-size:1.2em;
 color:#FFF;
 padding:10px;
 background:#B81D22;
 text-transform:uppercase;
 font-family: 'ambleregular';
  
}
.categories li a{
 display:block;
 font-size:0.8em;
 padding:8px 15px;
   
 font-weight:bold;
  color:#000;
    font-family: 'ambleregular';
    margin:0 20px;
    background:url(../images/drop_arrow.png) no-repeat 0;
    border-bottom: 1px solid #EEE;
    text-transform:uppercase; 
}
.categories li:last-child a{
 border:none;
}
.categories li a:hover{
 color:#B81D22;
}