title: How to: display a vertical submenu in 2 columns (css code attached)
body: <p>I have a vertical menu with submenus. I want the submenus to display in 2 columns. I can display the submenus in 1 column now.</p>
  
  <p>Can anyone help me? I've searched a lot of information on the web and it's very difficult to find something about this topic for vertical menus.</p>
  
  <p>Here's my css:</p>
  
  <pre><code>    #menuvertical { 
          text-align: left;
          width:180px;
          position: absolute;
          top:200px;
          left: 10px;
          /*opacity: .9;*/
          z-index: 1;
          border: 2px solid #ffc82b;
      }
  
  #menuvertical_location {
      position: absolute;
      top:11px;
      left: 170px;
      }
  
  #menuvertical ul {
      list-style-type: none;
      padding:0;
      }
  
  #menuvertical ul li.nivel1 {
  width: 180px; /* Ancho de las pestañas */
  }
  #menuvertical ul li.primera { /*Líneas división celdas*/
      border-top-width: thin;
      border-top-style: solid;
      border-top-color: #e0d9aa;
  }
  #menuvertical ul li {
      padding:0;
      background-image: url(../images/flecha_categoria.png);
      background-repeat: no-repeat;
      background-position: right center;
  }
  
  #menuvertical ul li a {
      display: block;
      text-decoration: none;
      color: #9c503b; /* Color del texto */
      background-color: #fff3d6; /* Color de fondo */
      border: solid 0px #fee; /* Borde de las pestañas */
      border-top: none;
      padding: 10px; /*Ancho celda*/
      position: relative;
      font-family: Verdana, Geneva, sans-serif;
      font-size: 12px;
      font-weight: bolder;
  }
  #menuvertical ul li:hover {
  position: relative;
  color: #000; /* Color del texto al pasar el mouse */
  }
  #menuvertical ul li a:hover, #menuvertical ul li:hover a.nivel1 {
      background-color: #FFF; /* Color de fondo al pasar el mouse */
      color: #000;
      position: relative;
      list-style-type: none;
      border-top-width: 1px;
      border-right-width: 1px;
      border-bottom-width: 1px;
      border-left-width: 1px;
      border-top-style: solid;
      border-bottom-style: solid;
      border-left-style: solid;
      border-top-color: #d6d6e6;
      border-right-color: #d6d6e6;
      border-bottom-color: #d6d6e6;
      border-left-color: #d6d6e6;
      border-right-style: solid;
  }
  #menuvertical ul li a.nivel1 {
  display: block !important;
  display: none;
  position: relative;
  }
  #menuvertical ul li ul {
      display: none;
      border-top-width: 1px;
      border-right-width: 1px;
      border-bottom-width: 1px;
      border-left-width: 1px;
      border-top-style: solid;
      border-bottom-style: solid;
      border-top-color: #d6d6e6;
      border-right-color: #d6d6e6;
      border-bottom-color: #d6d6e6;
      border-left-color: #d6d6e6;
      border-right-style: solid;
  
  
  }
  #menuvertical ul li a:hover ul, #menuvertical ul li:hover ul {
      display: block;
      position: absolute;
      left: 179px;
      top: -1px;
      /*border: 1px solid #d6d6e6;*/  
  }
  
  #menuvertical ul li ul li ul {
      float:left;
      width: 150px;
  
      }
  
  
  #menuvertical ul li ul li a { /*COLOR AZULLLLLLLLLLLLLLLL*/
      background-color: #FFF; /* Color de fondo subpestañas */
      color: #103856; /* Color del texto subpestañas */
      width: 300px;
      border: 0px solid #ffc82b;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 12px;
  
      /*-moz-column-width: 300px;
      -moz-column-count: 2;*/
  
  }
  
  #menuvertical ul li ul li a:hover {
      position: relative;
      /*background-color: #6E6E6E;*/ /* Color de fondo al pasar el mouse subpestañas */
      color: #ff7800; /* Color del texto al pasar el mouse subpestañas */
      border-top-style: none; /*Para q no halla bordes sobre el submenú al hacer hover sobre el menu de nivel 1*/
      border-right-style: none;
      border-bottom-style: none;
      border-left-style: none;
  
  }
  </code></pre>
  
  <p>Thanks in advance for yor help.</p>