2 replies to this topic

[MagicToaster]

I'm a total noob at this web thing and I can't seem to get my head around this problem.

I've made a drop down menu that looks like the image on top. However, I don't want the options to be so far away from each other. How can I move them closer?

These are the codes for my menu.

"HTML" said:

<ul id="nav">
<li><a class="menu-link" href="index.html">Visitantes</a>
<ul id="nav">
<li><a class="menu-link" href="index.html">Productos y servicios</a></li>
<li><a class="menu-link" href="index.html">Directorio de proveedores</a></li>
<li><a class="menu-link" href="index.html">Preguntas frecuentes</a></li>
<li><a class="menu-link" href="index.html">Glosario</a></li>
</ul>
</li>

<li><a class="menu-link" href="index.html">Asegurados</a>
<ul id="nav">
<li><a class="menu-link" href="index.html">Productos y servicios</a></li>
<li><a class="menu-link" href="index.html">Directorio de proveedores</a></li>
<li><a class="menu-link" href="index.html">Preguntas frecuentes</a></li>
<li><a class="menu-link" href="index.html">Glosario</a></li>
<li><a class="menu-link" href="index.html">Formularios</a></li>
</ul>
</li>

<li><a class="menu-link" href="index.html">Grupos</a>
<ul id="nav">
<li><a class="menu-link" href="index.html">Empresas</a></li>
<li><a class="menu-link" href="index.html">MCS Online</a></li>
<li><a class="menu-link" href="index.html">Productos y servicios</a></li>
<li><a class="menu-link" href="index.html">Directorio de proveedores</a></li>
<li><a class="menu-link" href="index.html">Preguntas frecuentes</a></li>
<li><a class="menu-link" href="index.html">Glosario</a></li>
</ul>
</li>
</ul>

"CSS" said:

ul {
padding: 0;
margin: 0;
list-style: none;
}

li {
float: left;
position: relative;
width: 10em;
}

li ul {
display: none;
position: absolute;
top: 1em;
left: 0;
}

li > ul {
top: auto;
left: auto;
}

li:hover ul, li.over ul{ display: block; }

[recordlovelife]

you gotta add the line-height attribute....

{
line-height: .5em;
}

Replace ".5" for whatever looks good. You either have to put that in the ul tag or the li, don't remember, try em out.

Hope that helps.

[MagicToaster]

Mmmmm, I was refering to the horizontal space between the menu options, but you certainly did point me in the right direction! It was a matter of adjusting the width atribute, thanks dude.


I'd like to post the progress that I did on the menu! <---click!

It seems to works fine most of the time, but there are options that display like this:



At first I thought it was a problem with the sub-menu width, but even when I gave it enough room to fit the text would still pile on top of each other, dispite being formated with <li> tags.

These other menus have more than enough space for text, and they still behave wierdly:





Of course, here's the codes I used

"CSS" said:

ul {
text-align:center;
padding: 0;
margin: 0;
list-style: none;
}

li {
float: left;
position: relative;
background: white
}

li ul {
display: none;
position: absolute;
top: 1em;
left: 0;
border:1px black solid;
border-top:none;
padding:5px;
background: white
}

li > ul {
top: auto;
left: auto;
}

li:hover ul, li.over ul {
display: block; }

/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */

"html" said:

<div id="menu">

<ul id="nav">
<li><a class="menu-link" href="index.html">Visitantes</a>&nbsp&nbsp&nbsp
<ul id="nav" style="width:165px">
<li><a class="menu-link" href="index.html">Productos y servicios</a></li>
<li><a class="menu-link" href="index.html">Directorio de proveedores</a></li>
<li><a class="menu-link" href="index.html">Preguntas frecuentes</a></li>
<li><a class="menu-link" href="index.html">Glosario</a></li>
</ul>
</li>

<li><a class="menu-link" href="index.html">Asegurados</a>&nbsp&nbsp&nbsp
<ul id="nav" style="width:165px">
<li><a class="menu-link" href="index.html">Productos y servicios</a></li>
<li><a class="menu-link" href="index.html">Directorio de proveedores</a></li>
<li><a class="menu-link" href="index.html">Preguntas frecuentes</a></li>
<li><a class="menu-link" href="index.html">Formularios</a></li>
<li><a class="menu-link" href="index.html">Glosario</a></li>
</ul>
</li>

<li><a class="menu-link" href="index.html">Grupos</a>&nbsp&nbsp&nbsp
<ul id="nav" style="width:165px">
<li><a class="menu-link" href="index.html">Empresas</a></li>
<li><a class="menu-link" href="index.html">MCS Online</a></li>
<li><a class="menu-link" href="index.html">Productos y servicios</a></li>
<li><a class="menu-link" href="index.html">Directorio de proveedores</a></li>
<li><a class="menu-link" href="index.html">Preguntas frecuentes</a></li>
<li><a class="menu-link" href="index.html">Glosario</a></li>
</ul>
</li>

<li><a class="menu-link" href="index.html">Productores</a>&nbsp&nbsp&nbsp
<ul id="nav" style="width:166px">
<li><a class="menu-link" href="index.html">Productos y servicios</a></li>
<li><a class="menu-link" href="index.html">Directorio de proveedores</a></li>
<li><a class="menu-link" href="index.html">Preguntas frecuentes</a></li>
<li><a class="menu-link" href="index.html">Glosario</a></li>
</ul>
</li>

<li><a class="menu-link" href="index.html">Proveedores</a>&nbsp&nbsp&nbsp
<ul id="nav" style="width:230px">
<li><a class="menu-link" href="index.html">MCS Provinet</a></li>
<li><a class="menu-link" href="index.html">Administración de la red</a></li>
<li><a class="menu-link" href="index.html">Administradores y médicos IPA</a></li>
<li><a class="menu-link" href="index.html">MCS HIPAA</a></li>
<li><a class="menu-link" href="index.html">Facturación electrónica</a></li>
<li><a class="menu-link" href="index.html">Preguntas frecuentes</a></li>
<li><a class="menu-link" href="index.html">Archivos IPA</a></li>
<li><a class="menu-link" href="index.html">Elegibilidad asegurados</a></li>
</ul>
</li>

<li><a class="menu-link" href="index.html">Valores añadidos</a>&nbsp&nbsp&nbsp
<ul id="nav" style="width:100px">
<li><a class="menu-link" href="index.html">MCS Alivia</a></li>
<li><a class="menu-link" href="index.html">MCS Solutions</a></li>
<li><a class="menu-link" href="index.html">MCS Farmaflex</a></li>
<li><a class="menu-link" href="index.html">MCS Educa</a></li>
<li><a class="menu-link" href="index.html">MCS Medilinea</a></li>
</ul>
</li>

<li><a class="menu-link" href="index.html">Conoce MCS</a>&nbsp&nbsp&nbsp
<ul id="nav" style="width:115px">
<li><a class="menu-link" href="index.html">Perfil corporativo</a></li>
<li><a class="menu-link" href="index.html">Visión y misión</a></li>
<li><a class="menu-link" href="index.html">Actividades</a></li>
</ul>
</li>

<li><a class="menu-link" href="index.html">HIPAA</a>&nbsp&nbsp&nbsp
<ul id="nav" style="width:180px">
<li><a class="menu-link" href="index.html">Transaccione electrónicas</a></li>
<li><a class="menu-link" href="index.html">Seguridad y firma electrónica</a></li>
<li><a class="menu-link" href="index.html">Contáctenos</a></li>
<li><a class="menu-link" href="index.html">Privacidad</a></li>
<li><a class="menu-link" href="index.html">Formularios</a></li>
</ul>
</li>

<li><a class="menu-link" href="index.html">Classicare</a>&nbsp&nbsp&nbsp
</li>

<li><a class="menu-link" href="index.html">Home</a>
</li>
</ul>


</div>

"javascript" said:

startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;

Anyone know what's going on?

Edited by MagicToaster, 22 January 2007 - 10:02 AM.