видеть дополнительные элементы в инструментах разработчика

Question

код:

<li> 
    <a href="#" id="CustomDecor">
        <ul id="sub_menu">
            <li><a href="#" id="Carpets"></a></li>
            <li><a href="#" id="Storage_Solutions"></a></li>
            <li><a href="#" id="Flooring"></a></li>
            <li><a href="#" id="Interior_Painting"></a></li>
            <li><a href="#" id="Kitchen_Cabinet_Refacing"></a></li>
            <li><a href="#" id="Shutters"></a></li>
            <li><a href="#" id="Window_Treatments"></a></li>
            <li><a href="#" id="Window_Blinds"></a></li>
        </ul>
    </a>
</li>

Инструменты разработчика:

Почему я вижу дополнительные элементы?(под sub_menu и первым li из sub_menu

Answer 1

Нельзя вкладывать якорные (<a>) элементы.
При обнаружении нового тега привязки браузер пытается исправить структуру, возможно, закрыв предыдущий тег.

Посмотрите на эту упрощенную скрипку: http://jsfiddle.net/jZr3Z/

<li> 
    <a href="#" id="CustomDecor">                  <----- Anchor 1
        <ul id="sub_menu">
            <li><a href="#" id="Carpets"></a></li> <----- Anchor 2