PROBLEMA IDENTIFICADO:
- Dropdown "Buscador General de Precios Unitarios" (18 elementos) NO se despliega en hover
- Usuario reportó: "el submenu no se despliega" en staging
- Inspeccionado con Chrome DevTools MCP: dropdown permanece display:none en hover
DIAGNÓSTICO:
✅ HTML correcto: <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown">
✅ Bootstrap 5 cargado: window.bootstrap existe
✅ Walker genera data-bs-toggle="dropdown" correctamente
❌ Bootstrap 5 usa CLICK por defecto, NO hover
❌ No había CSS para activar dropdown en hover
❌ Template base tampoco tiene dropdown hover
CAUSA RAÍZ:
Bootstrap 5 NUNCA ha usado hover por defecto. Requiere CSS adicional.
SOLUCIÓN IMPLEMENTADA (CSS > JavaScript):
Agregar 4 líneas CSS para dropdown hover SOLO en desktop (min-width: 992px)
Archivo: componente-navbar.css (líneas 136-144)
@media (min-width: 992px) {
.nav-item:hover > .dropdown-menu {
display: block;
}
}
POR QUÉ CSS vs JavaScript:
✅ Super simple: 4 líneas vs 20-30 líneas JS
✅ Performance perfecto: Sin event listeners
✅ Híbrido perfecto: Hover desktop + Click móvil (Bootstrap)
✅ Compatible: Funciona aunque JS esté deshabilitado
✅ Menos bugs: Menos código = menos errores
ARCHIVOS MODIFICADOS:
- componente-navbar.css: +9 líneas (CSS dropdown hover)
- functions.php: Version 1.0.15 → 1.0.16
RESULTADO:
✅ Desktop (>992px): Dropdown se despliega en hover instantáneamente
✅ Móvil (<992px): Sigue usando click nativo de Bootstrap
✅ Compatible con los 18 elementos + scroll del Issue #103✅ Sin conflictos con JavaScript existente
TESTING PENDIENTE:
- Verificar en staging que dropdown funciona en hover
- Confirmar que NO interfiere con móvil (debe seguir usando click)
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
