Cómo hacer que el menú se despliegue únicamente al hacer click sobre él

[narvaider]

Hola a todos, tengo una duda y no sé cómo resolverla.

Tengo una web en wordpress con un menú horizontal. Al pasar sobre los botones que tienen submenús, éstos se despliegan. Me gustaría que únicamente se desplegaran al hacer click sobre el menú, y no siempre que el ratón pase sobre ellos.

Muchas gracias de antemano.

[pzin]

Tendrías que usar JavaScript, ya que seguramente tal como lo tengas se estarán activando esos submenus con la pseudoclase :hover.

Sería quitar ese estilo en tu CSS y luego añadirle, por ejemplo, una función de JavaScript en el onclick que muestre el submenú.

[narvaider]

Iniciado por Bonez

Tendrías que usar JavaScript, ya que seguramente tal como lo tengas se estarán activando esos submenus con la pseudoclase :hover.

Sería quitar ese estilo en tu CSS y luego añadirle, por ejemplo, una función de JavaScript en el onclick que muestre el submenú.

Gracias por tu respuesta, pero no soy un experto en la materia, si me pudieras concretar un poco más te lo agradecería.

Pego a continuación la parte del CSS del menú:

Código CSS:

/* begin Menu */
/* menu structure */
 
.art-menu a, .art-menu a:link, .art-menu a:visited, .art-menu a:hover
{
    outline: none;
}
 
.art-menu, .art-menu ul
{
  margin: 0;
  padding: 0;
  border: 0;
  list-style-type: none;
  display: block;
}
 
.art-menu li
{
  margin: 0;
  padding: 0;
  border: 0;
  display: block;
  float: left;
  position: relative;
  z-index: 5;
  background: none;
}
 
.art-menu li:hover
{
  z-index: 10000;
  white-space: normal;
}
 
.art-menu li li
{
  float: none;
}
 
.art-menu ul
{
  visibility: hidden;
  position: absolute;
  z-index: 10;
  left: 0;
  top: 0;
  background: none;
}
 
.art-menu li:hover>ul
{
  visibility: visible;
  top: 100%;
}
 
.art-menu li li:hover>ul
{
  top: 0;
  left: 100%;
}
 
.art-menu:after, .art-menu ul:after
{
  content: ".";
  height: 0;
  display: block;
  visibility: hidden;
  overflow: hidden;
  clear: both;
}
.art-menu, .art-menu ul
{
  min-height: 0;
}
 
.art-menu ul
{
  background-image: url('images/spacer.gif');
  padding: 10px 30px 30px 30px;
  margin: -10px 0 0 -30px;
}
 
.art-menu ul ul
{
  padding: 30px 30px 30px 10px;
  margin: -30px 0 0 -10px;
}
 
 
 
 
/* menu structure */
 
.art-menu
{
  padding: 0 0 0 0;
}
 
.art-nav
{
  position: relative;
  min-height: 33px;
  z-index: 100;
}
 
.art-nav .l, .art-nav .r
{
  position: absolute;
  z-index: -1;
  top: 0;
  height: 100%;
  background-image: url('images/nav.png');
}
 
.art-nav .l
{
  left: 0;
  right: 0;
}
 
.art-nav .r
{
  right: 0;
  width: 925px;
  clip: rect(auto, auto, auto, 925px);
}
 
 
/* end Menu */
 
/* begin MenuItem */
.art-menu a
{
  position: relative;
  display: block;
  overflow: hidden;
  height: 33px;
  cursor: pointer;
  text-decoration: none;
}
 
 
.art-menu ul li
{
    margin:0;
    clear: both;
}
 
 
.art-menu a .r, .art-menu a .l
{
  position: absolute;
  display: block;
  top: 0;
  z-index: -1;
  height: 109px;
  background-image: url('images/menuitem.png');
}
 
.art-menu a .l
{
  left: 0;
  right: 0;
}
 
.art-menu a .r
{
  width: 400px;
  right: 0;
  clip: rect(auto, auto, auto, 400px);
}
 
.art-menu a .t, .art-menu ul a, .art-menu a, .art-menu a:link, .art-menu a:visited, .art-menu a:hover
{
  font-style: normal;
  font-weight: bold;
  text-align: left;
  text-decoration: none;
}
 
.art-menu a .t
{
  color: #31414E;
  padding: 0 30px;
  margin: 0 0;
  line-height: 33px;
  text-align: center;
}
 
.art-menu a:hover .l, .art-menu a:hover .r
{
  top: -38px;
}
 
.art-menu li:hover>a .l, .art-menu li:hover>a .r
{
  top: -38px;
}
 
.art-menu li:hover a .l, .art-menu li:hover a .r
{
  top: -38px;
}
.art-menu a:hover .t
{
  color: #FFFFFF;
}
 
.art-menu li:hover a .t
{
  color: #FFFFFF;
}
 
.art-menu li:hover>a .t
{
  color: #FFFFFF;
}
 
 
.art-menu a.active .l, .art-menu a.active .r
{
  top: -76px;
}
 
.art-menu a.active .t
{
  color: #101519;
}
/* end MenuItem */
 
/* begin MenuSeparator */
.art-menu .art-menu-li-separator
{
  display: block;
  width: 1px;
  height:33px;
}
.art-nav .art-menu-separator
{
  display: block;
  margin:0 auto;
  width: 1px;
  height: 33px;
  background-image: url('images/menuseparator.png');
}
/* end MenuSeparator */
 
/* begin MenuSubItem */
.art-menu ul a
{
  display: block;
  text-align: center;
  white-space: nowrap;
  height: 40px;
  width: 350px;
  overflow: hidden;
  line-height: 40px;
  background-image: url('images/subitem.png');
  background-position: left top;
  background-repeat: repeat-x;
  border-width: 1px;
  border-style: solid;
  border-color: #2F3F4B;
}
 
.art-nav ul.art-menu ul span, .art-nav ul.art-menu ul span span
{
  display: inline;
  float: none;
  margin: inherit;
  padding: inherit;
  background-image: none;
  text-align: inherit;
  text-decoration: inherit;
}
 
.art-menu ul a, .art-menu ul a:link, .art-menu ul a:visited, .art-menu ul a:hover, .art-menu ul a:active, .art-nav ul.art-menu ul span, .art-nav ul.art-menu ul span span
{
  text-align: left;
  text-indent: 12px;
  text-decoration: none;
  line-height: 40px;
  color: #101519;
  font-size: 12px;
  margin:0;
  padding:0;
}
 
.art-menu ul li a:hover
{
  color: #FFFFFF;
  border-color: #2F3F4B;
  background-position: 0 -40px;
}
 
.art-menu ul li:hover>a
{
  color: #FFFFFF;
  border-color: #2F3F4B;
  background-position: 0 -40px;
}
 
.art-nav .art-menu ul li a:hover span, .art-nav .art-menu ul li a:hover span span
{
  color: #FFFFFF;
}
 
.art-nav .art-menu ul li:hover>a span, .art-nav .art-menu ul li:hover>a span span
{
  color: #FFFFFF;
}
 
 
/* end MenuSubItem */