Problema con menu horizontal desplegable HTML- CSS
Pues veran, estoy haciendo una web para mi, pero quiero que mis visitantes la puedan ver tal cual sin nesecidad de que tener nada de nada extra instalado(Flash)...
Hice un menu a base de listas desordenadas, pero sin enlases en las "Listas principales" que serian los menus, todo iba bien, hasta que adicone los enlaces dentro de las etiquetas <li>, entonses todo se vino abajo, estube experimentando, leyendo, buscando, pero no di con la solicion.
Este es el codigo de la web:
Y el problema es que cuando le agrego en las listas las etiquetas de enlace, para se pueda navegar, depronto ya no funciona nada del menu, nada de nada:
Y este es su css:
Como ven mi pagina esta en la fase enbrionaria, pero quiero hacer las cosas bien. Ojala puedan ayudarme, quiero saber si este problema es solicionable y como, o si es un error en la sintaxis en el css.
Como veran soy novato en esto de los menus css-html.
PD: Si me dan un codigo para un menu horizontal desplegable css-html no me enojo xd.
Saludos.
Pues veran, estoy haciendo una web para mi, pero quiero que mis visitantes la puedan ver tal cual sin nesecidad de que tener nada de nada extra instalado(Flash)...
Hice un menu a base de listas desordenadas, pero sin enlases en las "Listas principales" que serian los menus, todo iba bien, hasta que adicone los enlaces dentro de las etiquetas <li>, entonses todo se vino abajo, estube experimentando, leyendo, buscando, pero no di con la solicion.
Este es el codigo de la web:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Web</title>
<link rel="stylesheet" href="estilos.css" type="text/css" media="all"/>
</head>
<body>
<div id="global">
<div id="cabecera">
<div id="logotipo">
<a href="index.html">
<img src="objetos/Logo.gif" width="800" height="155" alt="Pagina principal"/>
</a>
</div>
</div>
<div id="navegacion" align="center">
<div id="barra">
<ul class="menu">
<li><b>Menu 1</b></li>
<li><b>Menu 2</b>
<ul>
<li><a href="#">Sub 1</a></li>
<li><a href="#">Sub 2</a></li>
<li><a href="#">Sub 3</a></li>
<li><a href="#">Sub 4</a></li>
</ul>
</li>
<li><b>Menu 3</b></li>
<li><b>Menu 4</b></li>
<li><b>Menu 5<b></li>
</ul>
</div>
</div>
<div id="contenido">
<br/><p>Aqui el contenido de la web</p>
</div>
<div id="pie">
</div>
</div>
</body>
</html>Y el problema es que cuando le agrego en las listas las etiquetas de enlace, para se pueda navegar, depronto ya no funciona nada del menu, nada de nada:
<ul class="menu">
<li><b><a href="#">Menu 1</a></b></li>
<li><b><a href="#">Menu 2</a></b>
<ul>
<li><a href="#">Sub 1</a></li>
<li><a href="#">Sub 2</a></li>
<li><a href="#">Sub 3</a></li>
<li><a href="#">Sub 4</a></li>
</ul>
</li>
<li><b><a href="#">Menu 3</a></b></li>
<li><b><a href="#">Menu 4</a></b></li>
<li><b><a href="#">Menu 5</a><b></li>
</ul>Y este es su css:
* {text-indent:0px ; margin:0px ; padding:0px ; border:0px}
body {
text-align: center;
background-color:#F5F5F5;
}
#global {
width:800px;
margin:4px auto;
margin-top:10px;
position:center;
}
#cabecera {
background-image:objetos/Nuevo.gif;
height:155px;
}
#logotipo {float:center-left}
#navegacion {
background-color: #06F;
width:800px;
height:25px;
margin: 0px auto;
}
#barra {
text-align:center;
height:25px;
}
ul.menu
{
list-style:none;
}
ul.menu li
{
position:relative; /* Las coordenadas de los ul inferiores serán relativas al <li> que los contiene */
width:200px;
}
ul.menu ul
{
position:absolute; /* Esta posición es relativa al <li> que contiene a este <ul> */
left:30px; /* Para que no monte sobre el <li> */
top:-1px;
display:none;
list-style:none;
}
ul.menu li:hover > ul
{
display:block;
}
ul.menu> li > ul /* Solo para los ul debajo de los li de primer nivel. */
{
position:absolute;
width:133px;
left:0px;
top:18px;
display:none;
list-style:none;
background-color:;
text-align:left;
}
ul.menu li /* Sólo para li de primer nivel */
{
display:inline;
width:133spx;
margin:15px;
right:20px;
top:3px;
background-color:green;
}
#contenido {
background-color:#D3D3D3;
height:500px; align:center;
text-align:center;
}
#pie {background-color:#B8860B;}
a {color: black ; text-decoration:none ; display: block }
a:link {}
a:visited {}
a:hover {color: ; text-decoration:underline ; background-color:}
a:active {}Como ven mi pagina esta en la fase enbrionaria, pero quiero hacer las cosas bien. Ojala puedan ayudarme, quiero saber si este problema es solicionable y como, o si es un error en la sintaxis en el css.
Como veran soy novato en esto de los menus css-html.
PD: Si me dan un codigo para un menu horizontal desplegable css-html no me enojo xd.
Saludos.