Ayuda con menus horizontales en css
Publicado por Harry Parra (1 intervención) el 13/03/2010 23:14:30
Saludos. Me estoy iniciando en CSS y baje un codigo para formatear un menu. Hice el codigo HTML y mi menu tiene 3 niveles. Al fusionar con la hoja de estilo observo lo siguiente:
1. El nombre de cada opción de menu no me ocupa la celda completa sino solamente el espacio segun el numero de letras del nombre.
2. Cada subnivel no se me alinea con el que lo contiene sino que se me muestra una linea más abajo y por lo tanto no me puedo desplazar correctamente. He revisado el codigo y se me ha complicado dar con la solución. Me pueden ayudar con ello por favor. Gracias. Adjunto el codigo. Ok.
<HTML>
<HEAD>
<TITLE> MENU PRINCIPAL </TITLE>
<META name="description" content="">
<META name="keywords" content="">
<link rel="stylesheet" type="text/css" media="screen" href="nuevomenu3n.css" />
</HEAD>
<BODY
<ul class="menu">
<li><a href="#">Inicio</a>
<li><a href="#">Información
<ul>
<li><a href="#">Aldea
<ul>
<li><a href="#" title="Antecedentes"> Antecedentes</li>
<li><a href="#" title="Misión"> Misión</li>
<li><a href="#" title="Visión"> Visión</li>
<li><a href="#" title="Objetivos"> Objetivos</li>
</ul>
</li>
</li>
<li><a href="#" title="PNF"> PNF
<ul>
<li><a href="#" title="Estudios Juridícos"> Juridícos
<ul>
<li><a href="#" title="Perfil Del Egresado"> Perfil </li>
<li><a href="#" title="Pensum"> Pensum</li>
<li><a href="#" title="Titulos-Certificaciones"> Titulos</li>
</ul>
</li>
</li>
<li><a href="#" title="Administración"> Administración
<ul>
<li><a href="#" title="Perfil Del Egresado"> Perfil </li>
<li><a href="#" title="Plan De Estudio"> Pensum</li>
<li><a href="#" title="Titulos-Certificaciones"> Titulos</li>
</ul>
</li>
</li>
<li><a href="#" title="Educación"> Educación
<ul>
<li><a href="#" title="Perfil Del Egresado"> Perfil </li>
<li><a href="#" title="Plan De Estudio"> Pensum</li>
<li><a href="#" title="Titulos-Certificaciones"> Titulos</li>
</ul>
</li>
</li>
<li><a href="#" title="Informatica y Sistemas"> Informática
<ul>
<li><a href="#" title="Perfil Del Egresado"> Perfil </li>
<li><a href="#" title="Plan De Estudio"> Pensum</li>
<li><a href="#" title="Titulos-Certificaciones"> Titulos</li>
</ul>
</li>
</li>
<li><a href="#" title="Gestión Ambiental"> Ambiental
<ul>
<li><a href="#" title="Perfil Del Egresado"> Perfil</li>
<li><a href="#" title="Plan De Estudio"> Pensum</li>
<li><a href="#" title="Titulos-Certificaciones"> Titulos</li>
</ul>
</li>
</li>
</ul>
</ul>
<li><a href="#" title="Procesos"> Procesos
<ul>
<li><a href="#" title="Estudiantes"> Estudiantes
<ul>
<li><a href="#" title="Pre-Inscripción"> Pre-Inscripción</li>
<li><a href="#" title="Consultas"> Consultas</li>
<li><a href="#" title="Modificaciones"> Modificaciones</li>
</ul>
</li>
</li>
<li><a href="#"title="Profesores"> Profesores
<ul>
<li><a href="#" title="Postulaciones"> Postulaciones</li>
<li><a href="#" title="Asentar Notas"> Asentar Notas</li>
<li><a href="#" title="Actualizar Notas"> Actualizar<li>
</ul>
</li>
</li>
</ul>
<li><a href="#"title="Constancias"> Constancias
<ul>
<li><a href="#"title="Notas">Notas</li>
<li><a href="#"title="Estudio">Estudios</li>
<ul>
</li>
</li>
</ul>
</BODY>
</HTML>
------ Codigo CSS.-----
* Primero se ocultan los submenus con los siguientes codigos css */
a {
text-decoration: none;
/*color:#0B610B;*/
font:arial;
font-weight:normal;
size:9px;
hover: background-color: rgb(51, 153, 153);
display:inline;
}
ul.menu
{
list-style:none;
/*margin:3 0 3 0px;*/
/*padding:2px;
border: 1px solid #999999;*/
font-weight: bold;
color: #666666;
text-decoration: none;
display: block;
}
ul.menu li
{
position:relative; /* Las coordenadas de los ul inferiores serán relativas al <li> que los contiene */
width:100px;
padding:0;
/*text-align: center;*/
border-width: 50px;
display:block;
text-decoration:none;
color:666666;
}
ul.menu ul
{
position:absolute; /* Esta posición es relativa al <li> que contiene a este <ul> */
top:19px;
left:100px; /*Para que no monte sobre el <li> */
display:none;
list-style:none;
text-decoration:none;
}
ul.menu li:hover > ul
{
display:inline;
float:right;
background:#F0F7FC;
padding: 0px 0px 0px 0px;
text-align: left;
border: 10px solid #ACCFE8;
border-width: 1px 1px 1px 1px;
text-decoration:none;
}
ul.menu> li > ul /* Solo para los ul debajo de los li de primer nivel. */
{
position:absolute;
left:0px;
top:opx
float:none;
display:none;
list-style:none;
}
ul.menu > li /* Sólo para li de primer nivel */
{
display:inline;
border: 1px solid #8a084B;
background:#F7BE81;
}
1. El nombre de cada opción de menu no me ocupa la celda completa sino solamente el espacio segun el numero de letras del nombre.
2. Cada subnivel no se me alinea con el que lo contiene sino que se me muestra una linea más abajo y por lo tanto no me puedo desplazar correctamente. He revisado el codigo y se me ha complicado dar con la solución. Me pueden ayudar con ello por favor. Gracias. Adjunto el codigo. Ok.
<HTML>
<HEAD>
<TITLE> MENU PRINCIPAL </TITLE>
<META name="description" content="">
<META name="keywords" content="">
<link rel="stylesheet" type="text/css" media="screen" href="nuevomenu3n.css" />
</HEAD>
<BODY
<ul class="menu">
<li><a href="#">Inicio</a>
<li><a href="#">Información
<ul>
<li><a href="#">Aldea
<ul>
<li><a href="#" title="Antecedentes"> Antecedentes</li>
<li><a href="#" title="Misión"> Misión</li>
<li><a href="#" title="Visión"> Visión</li>
<li><a href="#" title="Objetivos"> Objetivos</li>
</ul>
</li>
</li>
<li><a href="#" title="PNF"> PNF
<ul>
<li><a href="#" title="Estudios Juridícos"> Juridícos
<ul>
<li><a href="#" title="Perfil Del Egresado"> Perfil </li>
<li><a href="#" title="Pensum"> Pensum</li>
<li><a href="#" title="Titulos-Certificaciones"> Titulos</li>
</ul>
</li>
</li>
<li><a href="#" title="Administración"> Administración
<ul>
<li><a href="#" title="Perfil Del Egresado"> Perfil </li>
<li><a href="#" title="Plan De Estudio"> Pensum</li>
<li><a href="#" title="Titulos-Certificaciones"> Titulos</li>
</ul>
</li>
</li>
<li><a href="#" title="Educación"> Educación
<ul>
<li><a href="#" title="Perfil Del Egresado"> Perfil </li>
<li><a href="#" title="Plan De Estudio"> Pensum</li>
<li><a href="#" title="Titulos-Certificaciones"> Titulos</li>
</ul>
</li>
</li>
<li><a href="#" title="Informatica y Sistemas"> Informática
<ul>
<li><a href="#" title="Perfil Del Egresado"> Perfil </li>
<li><a href="#" title="Plan De Estudio"> Pensum</li>
<li><a href="#" title="Titulos-Certificaciones"> Titulos</li>
</ul>
</li>
</li>
<li><a href="#" title="Gestión Ambiental"> Ambiental
<ul>
<li><a href="#" title="Perfil Del Egresado"> Perfil</li>
<li><a href="#" title="Plan De Estudio"> Pensum</li>
<li><a href="#" title="Titulos-Certificaciones"> Titulos</li>
</ul>
</li>
</li>
</ul>
</ul>
<li><a href="#" title="Procesos"> Procesos
<ul>
<li><a href="#" title="Estudiantes"> Estudiantes
<ul>
<li><a href="#" title="Pre-Inscripción"> Pre-Inscripción</li>
<li><a href="#" title="Consultas"> Consultas</li>
<li><a href="#" title="Modificaciones"> Modificaciones</li>
</ul>
</li>
</li>
<li><a href="#"title="Profesores"> Profesores
<ul>
<li><a href="#" title="Postulaciones"> Postulaciones</li>
<li><a href="#" title="Asentar Notas"> Asentar Notas</li>
<li><a href="#" title="Actualizar Notas"> Actualizar<li>
</ul>
</li>
</li>
</ul>
<li><a href="#"title="Constancias"> Constancias
<ul>
<li><a href="#"title="Notas">Notas</li>
<li><a href="#"title="Estudio">Estudios</li>
<ul>
</li>
</li>
</ul>
</BODY>
</HTML>
------ Codigo CSS.-----
* Primero se ocultan los submenus con los siguientes codigos css */
a {
text-decoration: none;
/*color:#0B610B;*/
font:arial;
font-weight:normal;
size:9px;
hover: background-color: rgb(51, 153, 153);
display:inline;
}
ul.menu
{
list-style:none;
/*margin:3 0 3 0px;*/
/*padding:2px;
border: 1px solid #999999;*/
font-weight: bold;
color: #666666;
text-decoration: none;
display: block;
}
ul.menu li
{
position:relative; /* Las coordenadas de los ul inferiores serán relativas al <li> que los contiene */
width:100px;
padding:0;
/*text-align: center;*/
border-width: 50px;
display:block;
text-decoration:none;
color:666666;
}
ul.menu ul
{
position:absolute; /* Esta posición es relativa al <li> que contiene a este <ul> */
top:19px;
left:100px; /*Para que no monte sobre el <li> */
display:none;
list-style:none;
text-decoration:none;
}
ul.menu li:hover > ul
{
display:inline;
float:right;
background:#F0F7FC;
padding: 0px 0px 0px 0px;
text-align: left;
border: 10px solid #ACCFE8;
border-width: 1px 1px 1px 1px;
text-decoration:none;
}
ul.menu> li > ul /* Solo para los ul debajo de los li de primer nivel. */
{
position:absolute;
left:0px;
top:opx
float:none;
display:none;
list-style:none;
}
ul.menu > li /* Sólo para li de primer nivel */
{
display:inline;
border: 1px solid #8a084B;
background:#F7BE81;
}
Valora esta pregunta
0