<ul> <li class="left">abc</li> <li class="middle" id="middle" > def <div> <ul style="border:1px solid red;"> <li>l1</li> <li>l1</li> <li>l1</li> </ul> </div> </li> <li class="right">hjk</li> </ul>
ul{ list-style-type: none; } .left, .middle,.right{ float:left; width:120px; border:1px solid red; margin-right:2px; position:relative; } ul li#middle > div { box-sizing: border-box; position:absolute; display:block; left:-10%; width:120%; top:100%; margin-top:4px; border:2px solid green; }