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

[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 */