Menu css a due voci con testo associato alle due voci

[Level]

Non so spiegare la definizione di menu che devo fare (e il titolo che ho messo probabilmente non è chiaro), però chi conosce bene css lo sa fare in maniera veloce e ci sono 1000 esempi.
Vorrei un menu con 2 voci in alto, e quando si clicca una voce si visualizza sotto il testo corrispondente (si clicka l'altra voce e cambia il testo).

[Level]

In pratica il menu è del tipo

<div id="menu" align="center">


                          <ul>
                            <li>uno</li>
                            <li>due</li>
                       </ul></div>

con le 2 voci "uno" e "due", se clicco "uno" mi appare sotto il testo associato a "uno" e se clicco "due" quello associato a "due"

[ResianTaxidrive]

Riesci a mostrare una immagine di quello che vuoi fare?
A naso comunque dovresti intanto annidare i menu, una cosa tipo:

<ul>
  <li> uno 
      <ul>
         <li> sub1-1 </li>
          <li> sub1-2 </li>
    </ul>
  </li>
  <li> due 
     <ul>
         <li> sub2-1</li>
          <li> sub2-2</li>
     </ul>
  </li>
</ul>

[Level]

Due voci di menu in alto alla pagina, afficancate orizzontalmente una all'altra, e in base a quella che clicco visualizzo sotto il testo relativo a quella voce.

[carlomarangoni]

Così al click visualizza il testo:
style.css

/* Generated by PURE CSS Menu Maker (cssmenu.com). This file may be modified freely. */


#cm-nav li a.arrow {background-image: url(arrow-right.gif)}

#cm-nav > li > a.arrow {background-image: url(arrow-down.gif)}

ul#cm-nav ,
ul#cm-nav ul {
 list-style-type: none;
 padding: 0px;
 margin: 0px;
 list-style-image: none
}

ul#cm-nav li {
 list-style-type: none;
 width: auto;
 position: relative;
 float: left;
 padding: 0px;
 margin: 0px;
 list-style-image: none
}

ul#cm-nav li li {
 width: auto;
 float: none
}

#cm-nav a {
 font-size: 9pt;
 text-decoration: none;
 border-top: black 1px solid;
 font-family: verdana;
 border-right: black 1px solid;
 background: #d6d5f0;
 white-space: nowrap;
 border-bottom: black 1px solid;
 color: black;
 text-align: left;
 padding: 5px;
 border-left: black 1px solid;
 display: block
}

#cm-nav a:focus {
 outline-width: medium;
 outline-style: none;
 outline-color: invert
}

#cm-nav a.no-click {cursor: default}

#cm-nav li a {margin: -1px -1px 0px 0px}

#cm-nav li li a {margin: 0px 0px -1px}

#cm-nav > li > a.arrow {padding-right: 14px}

#cm-nav ul.arrow-pad > li > a {padding-right: 11px}

#cm-nav li a.arrow ,
#cm-nav > li > a.arrow {
 background-repeat: no-repeat;
 background-position: right 50%
}

#cm-nav li:hover > a {
 color: white;
 background-color: #807fb0
}

#cm-nav li ul ,
#cm-nav li:hover ul ul ,
#cm-nav li:hover ul ul ul ,
#cm-nav li:hover ul ul ul ul ,
#cm-nav li:hover ul ul ul ul ul ,
#cm-nav li:hover ul ul ul ul ul ul ,
#cm-nav li:hover ul ul ul ul ul ul ul ,
#cm-nav li:hover ul ul ul ul ul ul ul ul ,
#cm-nav li:hover ul ul ul ul ul ul ul ul ul ,
#cm-nav li:hover ul ul ul ul ul ul ul ul ul ul ,
#cm-nav li:hover ul ul ul ul ul ul ul ul ul ul ul ,
#cm-nav li:hover ul ul ul ul ul ul ul ul ul ul ul ul ,
#cm-nav li:hover ul ul ul ul ul ul ul ul ul ul ul ul ul ,
#cm-nav li:hover ul ul ul ul ul ul ul ul ul ul ul ul ul ul ,
#cm-nav li:hover ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ,
#cm-nav li:hover ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ,
#cm-nav li:hover ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ,
#cm-nav li:hover ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ,
#cm-nav li:hover ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ,
#cm-nav li:hover ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ,
#cm-nav li:hover ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul {
 position: absolute;
 z-index: 999;
 display: none
}

#cm-nav li:hover ul {display: block}

#cm-nav li li:hover ul ,
#cm-nav li li li:hover ul ,
#cm-nav li li li li:hover ul ,
#cm-nav li li li li li:hover ul ,
#cm-nav li li li li li li:hover ul ,
#cm-nav li li li li li li li:hover ul ,
#cm-nav li li li li li li li li:hover ul ,
#cm-nav li li li li li li li li li:hover ul ,
#cm-nav li li li li li li li li li li:hover ul ,
#cm-nav li li li li li li li li li li li:hover ul ,
#cm-nav li li li li li li li li li li li li:hover ul ,
#cm-nav li li li li li li li li li li li li li:hover ul ,
#cm-nav li li li li li li li li li li li li li li:hover ul ,
#cm-nav li li li li li li li li li li li li li li li:hover ul ,
#cm-nav li li li li li li li li li li li li li li li li:hover ul ,
#cm-nav li li li li li li li li li li li li li li li li li:hover ul ,
#cm-nav li li li li li li li li li li li li li li li li li li:hover ul ,
#cm-nav li li li li li li li li li li li li li li li li li li li:hover ul ,
#cm-nav li li li li li li li li li li li li li li li li li li li li:hover ul ,
#cm-nav li li li li li li li li li li li li li li li li li li li li li:hover ul {
 margin-left: 100%;
 display: block
}

#cm-nav li:hover ul {margin-left: 0px}

#cm-nav ul ul {
 left: -1px;
 top: 1px
}

#cm-nav li {top: -1px}

#voce1, #voce2 {display:none;}

menu.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="style.css" rel="stylesheet" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<head>
</head>

<body>
<ul id="cm-nav">
   <li>
           <a href="#" target="_self" onclick="document.getElementById('voce1').style.display = 'block';return false;" >Voce 1</a>
   </li>
   <li>
           <a href="#" target="_self" onclick="document.getElementById('voce2').style.display = 'block';return false;">Voce 2</a>
   </li>
</ul>
<br /><br />
<div id="voce1">Inserite qui il contenuto per  id &quot;voce1&quot;</div>
<div id="voce2">Inserite qui il contenuto per  id &quot;voce2&quot;</div>
</body>
</html>

Ma poi per nasconderlo così usi?

[Level]

Così va bene, è simile a quello che voglio (un'altra soluzione l'ho provata caricando un file quando clicco sulla prima voce e un secondo file quando clicco sull'altra.
Nel tuo esempio per nasconderlo aggiungo, all'interno del primo onclick

document.getElementById('voce1').style.visibility = 'visible';
e
document.getElementById('voce2').style.visibility = 'hidden';

e all'interno del secondo click la stessa cosa (invertendo 'voce1' e 'voce2').
Funziona.

Ho provato caricando due file esterni perchè con i div, come in questo esempio, se clicco su voce2 mi carica il testo sotto, e non alla stessa altezza che se clicco su voce1.