non-standard li layout

HTML

<ul>
    <li id="AA">AA</li>
    <li id="BB">BB</li>
    <li id="CC">CC</li>
    <li id="DD">DD</li>
    <li id="EE">EE</li>
    <li id="FF">FF</li>
    <li id="GG">GG</li>
    <li id="HH">HH</li>
    <li id="II">II</li>
    <li id="JJ">JJ</li>
    <li id="KK">KK</li>
</ul>

CSS

ul {
    padding-top: 40px;
    width: 220px;
    height: 220px;
   
    left: 50%;
    top: 50%;
    margin-left: -150px;
    margin-top: -150px;
    background: SkyBlue;
    text-align: center;
}
li {
    float: left;
    margin: 2px;
    list-style-type: none;
    border: 1px solid #222;
    display: inline-block;
}
#AA {
    width: 40px;
    height: 80px;
}
#BB {
    width: 40px;
    height: 40px;
}
#CC {
    width: 40px;
    height: 40px;
}
#DD {
    width: 40px;
    height: 80px;
}
#EE {
    width: 40px;
    height: 40px;
}
#FF {
    margin-top: -38px;
    margin-left: 2px;
    width: 86px;
    height: 80px;
}
#GG {
    width: 40px;
    height: 40px;
}
#HH {
    width: 40px;
    height: 40px;
}
#II {
    width: 40px;
    height: 40px;
}
#JJ {
    width: 40px;
    height: 40px;
}
#KK {
    width: 40px;
    height: 40px;
}
li:hover {
    background: deeppink;
    cursor: pointer;
}