Ver elementos adicionales en herramientas de desarrollador

Question

Código:

<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>

Herramientas de desarrollo :

¿Por qué estoy viendo elementos adicionales? (por debajo sub_menu y primero li de sub_menu

Answer 1

No puedes anidar el ancla (<a>) elementos.
En el encuentro de una nueva etiqueta de anclaje, el navegador intenta arreglar la estructura, posiblemente cerrando la etiqueta anterior.

Eche un vistazo a este violín simplificado: http://jsfiddle.net/jzr3z/

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