QbPGLZ

index.html

<div class="wrapper">
    <ul>
        <li>Toto.docx</li>
        <li>Tutu.docx</li>
        <li>Tata.docx</li>
        <li>foo.pouf</li>
        <li>bar.rtf</li>
        <li>machin.doc</li>
        <li>truc.pif</li>
        <li>bla.docx</li>
        <li>Toto</li>
        <li>Tutu</li>
        <li>Tata</li>
        <li>foo</li>
        <li>bar</li>
        <li>machin</li>
        <li>truc</li>
        <li>bla</li>
        <li>Toto</li>
        <li>Tutu</li>
        <li>Tata</li>
        <li>foo</li>
        <li>bar</li>
        <li>machin</li>
        <li>truc</li>
        <li>bla</li>
    </ul>
    <br />
</div>
<!-- .wrapper -->

QbPGLZ.markdown

Demo

style.css

body {
    font-family:"Helvetica neue", helvetica, sans-serif
}



/* allow room for 3 columns */
 ul {
    width: 540px;
}
/* float & allow room for the widest item */
 ul li {
    float: left;
    width: 100px;
    margin:2px;
    padding:28px 2px 28px 64px;
    text-indent:12px;
    list-style:none;
    background-position:4px 4px;
    background-repeat:no-repeat;
    background-image:url('https://cdn2.iconfinder.com/data/icons/windows-8-metro-style/64/word.png');
    cursor:pointer;
    -moz-box-sizing: inherit;
    box-sizing: inherit;
    -webkit-transition-property: all;
    transition-property: all;
    -webkit-transition-duration: .4s;
    transition-duration: .4s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}

/* cadeau ! un super effet css */
ul li:hover {
    background-color: #d1d1d1;
    color:#fff;
}

/* stop the float */
 br {
    clear: left;
}
/* separate the list from subsequent markup */
 div.wrapper {
    margin-bottom: 1em;
}