Un menú desplegable
La parte html del menú :
<ul id="menu2">
<li>Uno
<ul>
<li>1a</li>
<li>1b</li>
<li>1c</li>
<li>1d</li>
</ul>
</li>
<li>Dos
<ul>
<li>2a</li>
<li>2b</li>
<li>2c</li>
<li>2d</li>
</ul>
</li>
<li>Tres
<ul>
<li>3a</li>
<li>3b</li>
<li>3c</li>
<li>3d</li>
</ul>
</li>
<li>Cuatro
<ul>
<li>4a</li>
<li>4b</li>
<li>4c</li>
<li>4d</li>
</ul>
</li>
</ul>
Y la parte css :
/*----------menu 2 niveaux-------*/
ul#menu2 {list-style: none;
padding: 0px;
margin: 0px auto;}
ul#menu2 li { float: left;
position: relative;
width: 130px;
text-align: center;
list-style: none;
border: 1px solid #CD3333;
color: #000000;
background-color: #FFFFFF;
font-weight: bold;
line-height: 26px;
margin-right:5px; }
ul#menu2 li:hover { color: #FFFFFF; background-color: #000000; cursor: pointer; }
li ul { display: none;
list-style: none;
position:absolute;
width:130px;
top: 18px;
left: 0;
font-weight: normal;
padding: 0 0 0 0;
margin-left:-1px;}
ul#menu2 li ul { top: 27px; left: 0; }
ul#menu2 li:hover ul li { background-color: #FFFFFF; margin-top: -1px;}
ul#menu2 li:hover ul li:hover { background-color: #000000; }
ul#menu2 li:hover ul li a { font-weight: normal; color: #FF0000; background-color: transparent; text-decoration: none;}
ul#menu2 li:hover ul li a:hover { color: #FFFF00;}
li>ul {top: auto;
left: auto;}
li:hover ul, li.over ul {display: block;}
Si el tema que escogiste no es modificable, tendrás que poner el css en el html, entre las etiquetas <style type="text/css"> </style>
El codigo completo para pegar en el html de tu Texto Libre :
<ul id="menu2">
<li>Uno
<ul>
<li>1a</li>
<li>1b</li>
<li>1c</li>
<li>1d</li>
</ul>
</li>
<li>Dos
<ul>
<li>2a</li>
<li>2b</li>
<li>2c</li>
<li>2d</li>
</ul>
</li>
<li>Tres
<ul>
<li>3a</li>
<li>3b</li>
<li>3c</li>
<li>3d</li>
</ul>
</li>
<li>Cuatro
<ul>
<li>4a</li>
<li>4b</li>
<li>4c</li>
<li>4d</li>
</ul>
</li>
</ul>
Y la parte css :
/*----------menu 2 niveaux-------*/
ul#menu2 {list-style: none;
padding: 0px;
margin: 0px auto;}
ul#menu2 li { float: left;
position: relative;
width: 130px;
text-align: center;
list-style: none;
border: 1px solid #CD3333;
color: #000000;
background-color: #FFFFFF;
font-weight: bold;
line-height: 26px;
margin-right:5px; }
ul#menu2 li:hover { color: #FFFFFF; background-color: #000000; cursor: pointer; }
li ul { display: none;
list-style: none;
position:absolute;
width:130px;
top: 18px;
left: 0;
font-weight: normal;
padding: 0 0 0 0;
margin-left:-1px;}
ul#menu2 li ul { top: 27px; left: 0; }
ul#menu2 li:hover ul li { background-color: #FFFFFF; margin-top: -1px;}
ul#menu2 li:hover ul li:hover { background-color: #000000; }
ul#menu2 li:hover ul li a { font-weight: normal; color: #FF0000; background-color: transparent; text-decoration: none;}
ul#menu2 li:hover ul li a:hover { color: #FFFF00;}
li>ul {top: auto;
left: auto;}
li:hover ul, li.over ul {display: block;}
Si el tema que escogiste no es modificable, tendrás que poner el css en el html, entre las etiquetas <style type="text/css"> </style>
El codigo completo para pegar en el html de tu Texto Libre :
<ul id="menu2">
<li>Uno
<ul>
<li>1a</li>
<li>1b</li>
<li>1c</li>
<li>1d</li>
</ul>
</li>
<li>Dos
<ul>
<li>2a</li>
<li>2b</li>
<li>2c</li>
<li>2d</li>
</ul>
</li>
<li>Tres
<ul>
<li>3a</li>
<li>3b</li>
<li>3c</li>
<li>3d</li>
</ul>
</li>
<li>Cuatro
<ul>
<li>4a</li>
<li>4b</li>
<li>4c</li>
<li>4d</li>
</ul>
</li>
</ul>
<style type="text/css"> <!--
/*----------menu 2 niveaux-------*/
ul#menu2 {list-style: none;
padding: 0px;
margin: 0px auto;}
ul#menu2 li { float: left;
position: relative;
width: 130px;
text-align: center;
list-style: none;
border: 1px solid #CD3333;
color: #000000;
background-color: #FFFFFF;
font-weight: bold;
line-height: 26px;
margin-right:5px; }
ul#menu2 li:hover { color: #FFFFFF; background-color: #000000; cursor: pointer; }
li ul { display: none;
list-style: none;
position:absolute;
width:130px;
top: 18px;
left: 0;
font-weight: normal;
padding: 0 0 0 0;
margin-left:-1px;}
ul#menu2 li ul { top: 27px; left: 0; }
ul#menu2 li:hover ul li { background-color: #FFFFFF; margin-top: -1px;}
ul#menu2 li:hover ul li:hover { background-color: #000000; }
ul#menu2 li:hover ul li a { font-weight: normal; color: #FF0000; background-color: transparent; text-decoration: none;}
ul#menu2 li:hover ul li a:hover { color: #FFFF00;}
li>ul {top: auto;
left: auto;}
li:hover ul, li.over ul {display: block;}
--></style>
<li>Uno
<ul>
<li>1a</li>
<li>1b</li>
<li>1c</li>
<li>1d</li>
</ul>
</li>
<li>Dos
<ul>
<li>2a</li>
<li>2b</li>
<li>2c</li>
<li>2d</li>
</ul>
</li>
<li>Tres
<ul>
<li>3a</li>
<li>3b</li>
<li>3c</li>
<li>3d</li>
</ul>
</li>
<li>Cuatro
<ul>
<li>4a</li>
<li>4b</li>
<li>4c</li>
<li>4d</li>
</ul>
</li>
</ul>
<style type="text/css"> <!--
/*----------menu 2 niveaux-------*/
ul#menu2 {list-style: none;
padding: 0px;
margin: 0px auto;}
ul#menu2 li { float: left;
position: relative;
width: 130px;
text-align: center;
list-style: none;
border: 1px solid #CD3333;
color: #000000;
background-color: #FFFFFF;
font-weight: bold;
line-height: 26px;
margin-right:5px; }
ul#menu2 li:hover { color: #FFFFFF; background-color: #000000; cursor: pointer; }
li ul { display: none;
list-style: none;
position:absolute;
width:130px;
top: 18px;
left: 0;
font-weight: normal;
padding: 0 0 0 0;
margin-left:-1px;}
ul#menu2 li ul { top: 27px; left: 0; }
ul#menu2 li:hover ul li { background-color: #FFFFFF; margin-top: -1px;}
ul#menu2 li:hover ul li:hover { background-color: #000000; }
ul#menu2 li:hover ul li a { font-weight: normal; color: #FF0000; background-color: transparent; text-decoration: none;}
ul#menu2 li:hover ul li a:hover { color: #FFFF00;}
li>ul {top: auto;
left: auto;}
li:hover ul, li.over ul {display: block;}
--></style>