Deshabilitar el flujo en el menú con CSS

Question

He estado tratando de resolver este por una semana, ¡estoy seguro de que es simple, pero estoy realmente luchando con eso!

Estoy tratando de cambiar mi navegación para que los usuarios tengan que hacer clic en él para que aparezca. Creo que el defecto magento es que simplemente se ciernen, al menos eso es lo que está sucediendo en el mío. Alguien me dijo que creen que esto se ve afectado con las clases CSS que creo que podría ser correcto. Vale la pena señalar que mi versión móvil (cuando se ve en un escritorio) permite clics, pero los programas de escritorio se muestran en el flujo.

Aquí está mi CSS para NAV-PRIMARS:

.nav-primary a {
color:#9a9a9a;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
text-transform: uppercase;
}

.nav-primary a:hover {
color:#000;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
text-transform: uppercase;
}

#header-account li a,
.nav-primary a.level0 {
width: 200px;
text-align: left;
color: #636363;
text-transform: uppercase;
line-height: 20px;
padding-top: 0;
padding-right: 15px;
padding-bottom: 0;
margin-left: 300px;
}

#header-account li:last-child a,
.nav-primary li.level0:last-child a.level0 {
border-bottom: 0;
}

.no-touch #header-account a:hover,
.no-touch .nav-primary a:hover {
text-decoration: none;
}

.nav-primary {
display: block;
padding-top: 30px;
}

.nav-primary a {
text-decoration: none;
position: relative;
display: block;
color: #636363;
line-height: 30px;
font-family: "Raleway", "Helvetica Neue", Verdana, Arial, sans-serif;
}

.nav-primary li {
position: relative;
}

.nav-primary li.level1 a {
margin-left: 350px;
}

.nav-primary .menu-active > ul.level0,
.nav-primary li.level0 li.sub-menu-active > ul {
 display: block;
 }

.nav-primary li.level0 > a {
text-transform: uppercase;
}

/* ============================================ *
* Small Viewports - Accordion Style Menu
* ============================================ */
.nav-primary a.level0,
.nav-primary a {
 line-height: 25px;
 }
 .nav-primary li.level0 ul {
 display: none;
 }
.nav-primary li.level0 li {
 padding: 0 0 0 25px;
 }
 .nav-primary li.level1 a {
 padding: 0 15px 0 25px;
 }
.nav-primary li.parent > a:after {
 content: '';
 position: absolute;
 width: 0;
 height: 0;
 display: block;
 border-top: 5px solid transparent;
 border-bottom: 5px solid transparent;
 border-left: 5px solid #cccccc;
 border-right: none;
 top: 50%;
 left: 10px;
 right: auto;
 margin-top: -5px;
 }
 .nav-primary li.parent.sub-menu-active > a:after,
 .nav-primary li.parent.menu-active > a:after {
 content: '';
 position: absolute;
 width: 0;
 height: 0;
 display: block;
 border-right: 5px solid transparent;
 border-left: 5px solid transparent;
 border-top: 5px solid #cccccc;
 border-bottom: none;
 top: 50%;
 left: 10px;
 right: auto;
 margin-top: -5px;
 }
.nav-primary li.menu-active > a,
.nav-primary li.sub-menu-active > a {
 color: #000;
 }
/* ============================================ *
 * Large Viewports - Dropdown Menu
 * ============================================ */

 .nav-primary li.menu-active > ul {
 display: block;
 }

Este es el que los hace aparecer en el flujo o simplemente estar allí:

.nav-primary li.level0 ul { display: none; } 

¿Pero no estoy seguro de qué cambiarlo para ir de Hover para hacer clic?

Actualización:

¡He cambiado el código en My /App.js a lo siguiente y parece estar funcionando!

mouseClickAction: function(event, target) {
    if(this.useSmallScreenBehavior()) {
        return; // don't do mouse enter functionality on smaller screens
    }

    $j(target).addClass('menu-active'); //show current menu
},

/**
 * On large screens, hide menu.
 * On small screens, do nothing.
 *
 * @param event
 * @param target
 */
mouseClickAction: function(event, target) {
    if(this.useSmallScreenBehavior()) {
        return; // don't do mouse leave functionality on smaller screens
    }

    $j(target).removeClass('menu-active'); //hide all menus
},

/**
 * On large screens, don't interfere so that browser will follow link.
 * On small screens, toggle menu visibility.
 *
 * @param event
 * @param target
 */
mouseClickAction: function(event, target) {
    {
        event.preventDefault(); //don't follow link
        this.toggleMenuVisibility(target); //instead, toggle visibility
    }
},

Básicamente, ahora lo tengo haciendo lo mismo que la versión de pantalla pequeña; Por lo que los usuarios hacen clic para mostrar la siguiente categoría, ¡lo que es genial! Tengo un par de categorías que están destinadas a mostrar un bloque estático en lugar de desviar a la página que ahora no funciona. ¿Alguna idea de cómo permitir que los bloques estáticos muestren?

Answer 1

El selector que especificó es agregar pantalla: Ninguno que está ocultando sus caídas.Eso podría permanecer igual, lo que necesitas cambiar es la parte que los muestra.Parece que se hace por este selector. ".NAV-PRIMARIO .MENU-ACTIVE> UL.LEVEL0", lo que hace que el elemento del menú se muestre: Bloquear nuevamente.Lo que realmente necesita cambiar es el JavaScript que agrega la clase "Menú activo" al nivel superior UL en el menú, en el tema RWD que sería la piel / frontend / rwd / default / js / app.js.

Answer 2

Usted está buscando un evento OnClick, que normalmente se realiza con jQuery y no CSS.Hay una solución de CSS que involucra el uso de la casilla de verificación.Consulte la respuesta a esta pregunta .

The Asker en esta pregunta Puede tener lo que está buscando.