Si va a https://www.handy.com/ y pasa el cursor sobre el enlace Todos los servicios, podrá ver una superposición con un montón de categorías.
¿Cómo puedo hacer esto para que sea compatible con SEO?
Ver imagen adjunta
Lo estructuraría así, que en mi opinión sería lo más semánticamente correcto. El hecho de que todo esté envuelto en un <div> , no significa que no tenga valor semántico. Siempre que los elementos secundarios tengan la estructura HTML adecuada, está bien.
div>nav>ul>li { font-size: 25px; } nav>ul>li>ul>li { font-size: 15px; } div>nav { display: none; } div:hover nav { display: block; } ul { list-style-type: none; } <div><span>menu</span> <nav> <ul> <li><span>category 1</span> <ul> <li><a>item 1</a></li> <li><a>item 2</a></li> <li><a>item 3</a></li> <li><a>item 4</a></li> <li><a>item 5</a></li> </ul> </li> <li><span>category 2</span> <ul> <li><a>item 1</a></li> <li><a>item 2</a></li> <li><a>item 3</a></li> <li><a>item 4</a></li> <li><a>item 5</a></li> </ul> </li> <li><span>category 3</span> <ul> <li><a>item 1</a></li> <li><a>item 2</a></li> <li><a>item 3</a></li> <li><a>item 4</a></li> <li><a>item 5</a></li> </ul> </li> </ul> </nav> </div>