How To Make UL List With Hover Background CSS3 Effect

The UL List Animations uses CSS3 which works in Mozilla Firfox, Google Chrome, Safari, IE10+,Opera Mini Browsers.

Live Demo

• Log in www.blogger.com
• Goto Template>>Edit HTML>>Press Ctrl+F and Find ]]></b:skin>
• Copy Below Code and Paste before/above ]]></b:skin> 
• And Save Your Template

HTML Code

.post ul{
margin: 0;
padding: 0;
list-style: none;
}

.post ul li{
width: 100%;
clear:left;
overflow: hidden;
}

.post ul li:hover{
color: #fff;
background: #ce3e3e;
border-left: 8px solid darkred;
min-width: 450px;
-webkit-box-shadow: 0 0 5px gray;
-moz-box-shadow: 0 0 5px gray;
box-shadow: 0 0 5px gray;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}

• Now Create New Post and Hit HTML Button 
• Now add ul li list in Post section

HTML Code For Post Section

<ul>
<li>List Test 1</li>
<li>List Test 2</li>
<li>List Test 3</li>
<li>List Test 4</li>
</ul>

Customization

• To Change Text Color Replace HTML Colour Code 
• To Change Side Bordered Color Replace HTML Colour Code 
• To Change Width Color Replace HTML Colour Code 
• To Change Background Color HTML Colour Colour Code