[monolithed]

Спасибо за работающий пример, но он семантически невере

Пример представлен наиболее семантично, корректно и логично чем могло бы быть (с любой стороны).

Элемент <div/> не имеет никакого отношения к <li/>, за исключением того что он является родительским для элементов <a/>, которые в свою очередь имеют прямое отношение к <li/>.

Часто встречающиеся структуры для табов и пр. меню.

1.

<div>
    <ul>
        <div>
             <a></a>
         </div>
         <li></li>
    </ul>
</div>

2.

<div>
    <ul>
         <li>
              <div>
                  <a></a>
              </div> 
         </li>
         <li>
             <ul>
                 <li></li>
             </ul>
         </li>
    </ul>
</div>

и теперь моя структура:

<div id="#">
     <div>
         <a></a> - каждый элемент 'a' соответствует элементу 'li'
     <div>
     <ul>
         <li></li>
     </ul>
</div>

Что в ней нелогичного, то разве она не прозрачней или семантически не связана?
Если вас смущает что элементы а не являются дочерними 'ul', то переместите их туда, в чем проблема?