Juguemos a Diagramar 3

[ryugen]

A mi manera de entender, yo maquetaría el diagrama de la siguiente manera:

Código HTML:

<nav role="navigation">
    <ul>
        <li>
            <a href="#ABC">ABC</a>
            <ul id="ABC">
                <li><a href="#JKL">JKL</a></li>
                <li><a href="#RST">RST</a></li>
                <li><a href="#XYZ">XYZ</a></li>
            </ul>
        </li>
        <li>
            <a href="#DEF">DEF</a>
            <ul id="DEF">
                <li><a href="#MNÑ">MNÑ</a></li>
                <li><a href="#UVW">UVW</a></li>
            </ul>
        </li>
        <li>
             <a href="#GHI">GHI</a>
        </li>
    </ul>
</nav>
 

Me parece que esa manera desde mi punto de vista es la manera más semántica y accesible para maquetarlo.

Semántico: porque estamos frente a la navegación del contenido en forma de listas desordenadas

Accesible, porque el elemento padre enlaza a la sublista.

Visualmente dejaría claro, que links generan dropdown y cuales no.

A nivel interración permitiría tanto la posibilidad de despegar los menu "hover" o "clickeando"