Hola, antes de nada enhorabuena por el foro, muy bueno y muy bien presentado.
Bien, me gustaría saber si puedo convertir este menú simple que cogí de una web de recursos para el webmaster en desplegable:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD><TITLE>Mi Web</TITLE>
<META content=3D"text/html; charset=3Dwindows-1252" =
http-equiv=3DContent-Type><LINK=20
rel=3Dstylesheet type=3Dtext/css=20
href=3D"http://www.wmasterfacil.com/documentos/0047ejmenuv/misestilos7.cs=
s">
<META name=3DGENERATOR content=3D"MSHTML 8.00.7600.16722"></HEAD>
<BODY>
<DIV id=3Dcontenedor>
<DIV id=3Dcabecera></DIV>
<DIV id=3Dinferior>
<DIV id=3Dcuerpo></DIV>
<DIV id=3Dizquierda>
<UL id=3Dmenu>
<LI>Menu de Opciones</LI>
<LI><A=20
=
href=3D"http://www.wmasterfacil.com/documentos/0047ejmenuv/ejemplo6.html#=
">IMAGES</A></LI>
<LI><A=20
=
href=3D"http://www.wmasterfacil.com/documentos/0047ejmenuv/ejemplo6.html#=
">CLIENTS</A></LI>
<LI><A=20
=
href=3D"http://www.wmasterfacil.com/documentos/0047ejmenuv/ejemplo6.html#=
">MAKING OF</A></LI>
<LI><A=20
=
href=3D"http://www.wmasterfacil.com/documentos/0047ejmenuv/ejemplo6.html#=
">VARIOUS</A></LI>
<LI><A=20
=
href=3D"http://www.wmasterfacil.com/documentos/0047ejmenuv/ejemplo6.html#=
">CONTACT</A></LI>
<LI><A=20
=
href=3D"http://www.wmasterfacil.com/documentos/0047ejmenuv/ejemplo6.html#=
">Elecci=F3n=20
6</A></LI>
<LI><A=20
=
href=3D"http://www.wmasterfacil.com/documentos/0047ejmenuv/ejemplo6.html#=
">Elecci=F3n=20
7</A></LI></UL></DIV>
<DIV id=3Dderecha></DIV></DIV>
<DIV id=3Dpie></DIV></DIV></BODY></HTML>
------=_NextPart_000_0014_01CBF195.C3A5DF80
Content-Type: text/css;
charset="iso-8859-1"
Content-Transfer-Encoding: quoted-printable
Content-Location: http://www.wmasterfacil.com/documentos/0047ejmenuv/misestilos7.css
* {
PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: =
0px; PADDING-TOP: 0px
}
BODY {
TEXT-ALIGN: center; BACKGROUND-COLOR: white
}
#contenedor {
POSITION: relative; TEXT-ALIGN: left; BACKGROUND-COLOR: WHITE; MARGIN: =
auto; WIDTH: 1004px; HEIGHT: auto; TOP: 0px; LEFT: 0px
}
#cabecera {
POSITION: relative; BACKGROUND-COLOR: WHITE; WIDTH: 100%; HEIGHT: 100px; =
TOP: 0px; LEFT: 0px
}
#cuerpo {
POSITION: relative; BACKGROUND-COLOR: WHITE; MIN-HEIGHT: 700px; WIDTH: =
620px; HEIGHT: auto !important; TOP: 0px; LEFT: 200px
}
#pie {
POSITION: relative; BACKGROUND-COLOR: WHITE; WIDTH: 100%; HEIGHT: 40px; =
OVERFLOW: hidden; TOP: 0px; LEFT: 0px
}
#izquierda {
POSITION: absolute; BACKGROUND-COLOR: WHITE; WIDTH: 200px; HEIGHT: =
100%; OVERFLOW: hidden; TOP: 0px; LEFT: 0px
}
#derecha {
POSITION: absolute; BACKGROUND-COLOR: WHITE; WIDTH: 184px; HEIGHT: =
100%; OVERFLOW: hidden; TOP: 0px; LEFT: 820px
}
#inferior {
POSITION: relative; WIDTH: 100%; HEIGHT: auto; TOP: 0px; LEFT: 0px
}
UL#menu {
BORDER-BOTTOM: white 1px solid; BORDER-LEFT: WHITE 1px solid; =
PADDING-BOTTOM: 0px; LINE-HEIGHT: 220%; LIST-STYLE-TYPE: none; MARGIN: =
5px; PADDING-LEFT: 0px; WIDTH: 185px; PADDING-RIGHT: 0px; FONT-FAMILY: =
arial, verdana, sans-serif; FONT-SIZE: 12px; BORDER-TOP: WHITE 1px =
solid; LIST-STYLE-IMAGE: none; BORDER-RIGHT: WHITE 1px solid; =
PADDING-TOP: 0px
}
UL#menu LI {
BORDER-BOTTOM: white 1px solid; TEXT-ALIGN: center; BORDER-LEFT: WHITE =
1px solid; BACKGROUND-COLOR: WHITE; HEIGHT: 30px; COLOR: WHITE; =
BORDER-TOP: white 1px solid; FONT-WEIGHT: bold; BORDER-RIGHT: white 1px =
solid
}
UL#menu LI A {
BACKGROUND-COLOR: white; DISPLAY: block; HEIGHT: 100%; COLOR: BLACK; =
TEXT-DECORATION: none
}
UL#menu LI A:hover {
BACKGROUND-COLOR: grey
}
------=_NextPart_000_0014_01CBF195.C3A5DF80--
Vi los ejemplos que Mikel posteó en su día (geniales) pero al quitar las cajas y poner todo blanco menos el texto (como el ejemplo que os dejo) siempre estropeaba algo, así que he decidido intentar algo desde este más sencillo.
Gracias de antemano y un saludo
EDIT:
Otra opción sería quitar la caja de este otro y dejar solo el texto:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>FreeStyle Menus Demonstration</title>
-->
<!-- Demo CSS layouts for the list menu. Pick your favourite one and customise! -->
<!-- Remove all but one and change "alternate stylesheet" to "stylesheet" to enable -->
<link rel="stylesheet" type="text/css" id="listmenu-o"
href="listmenu_o.css" title="Vertical 'Office'" />
<link rel="alternate stylesheet" type="text/css" id="listmenu-v"
href="listmenu_v.css" title="Vertical 'Earth'" />
<link rel="alternate stylesheet" type="text/css" id="listmenu-h"
href="listmenu_h.css" title="Horizontal 'Earth'" />
<link rel="alternate stylesheet" type="text/css" id="listmenu-a"
href="listmenu_a.css" title="Accordion Menu" />
<!-- Fallback CSS menu file allows list menu operation when JS is disabled. -->
<!-- This is automatically disabled via its ID when the script kicks in. -->
<link rel="stylesheet" type="text/css" id="fsmenu-fallback"
href="listmenu_fallback.css" />
<!-- Alternatively, this CSS file is for the second div-based demo menu. -->
<link rel="stylesheet" type="text/css" href="divmenu.css" />
</head>
<body style="font: 13px/20px arial; background-color: white">
<font color="BLACK">
<div style="text-align: center">
<h1 style="font: 32px/48px sans-serif">FreeStyle Menus v1.0 RC12</h1>
by Angus Turnbull - <a href="http://www.twinhelix.com">http://www.twinhelix.com</a>.
Updated: 2 October 2009.
<hr />
</div>
<ul class="menulist" id="listMenuRoot">
<li>
<a href="#">IMAGES</a>
<ul>
<li><a href="#">Beauty</a></li>
<li><a href="#">Fashion</a></li>
</ul>
</li>
</li>
<li><a href="#">CLIENTS</a></li>
<li>
<a href="#">MAKING OF</a>
<ul>
<li><a href="#">Photo</a></li>
<li><a href="#">Video</a></li>
</ul>
</li>
</font>
<script type="text/javascript">
var listMenu = new FSMenu('listMenu', true, 'display', 'block', 'none');
listMenu.animations[listMenu.animations.length] = FSMenu.animFade;
listMenu.animations[listMenu.animations.length] = FSMenu.animSwipeDown;
var arrow = null;
if (document.createElement && document.documentElement)
{
arrow = document.createElement('span');
arrow.appendChild(document.createTextNode('>'));
arrow.className = 'subind';
}
addReadyEvent(new Function('listMenu.activateMenu("listMenuRoot", arrow)'));
</script>
<script type="text/javascript">
</script>
</body>
</html>
Pero tampoco sé como hacerlo porque he cambiado todos los colores de todo y los bordes de todo y nada, ni la más mínima alteración.
Saludos