There is a simple rule that will get your list done as you want (a drop down on roll over).
It is the simplest code, its as simple you would never have thought it! It is really cool, the only problem with it (yeah, it has a little problem, but as you must be figuring it out, its all about that hated non-standars-compliant nasty browser which happens to be, by the way, the most used browser around hehe).
But dont panic, it all solves with a little javascript (lets hope users allow js do the magic).
Well the trick is basically about this: you do your xhtml markup of lists, and sublists, so you will have something like this (ill borrow the code of a page im developing):
HTML
<ul id="menu_nav">
<li><a href="/pmic/presentacion.php" accesskey="N">Presentación</a>
<ul>
<li><a href="/pmic/misionvision.php">Misión y Visión</a></li>
<li><a href="/pmic/objetivos.php">Objetivos</a></li>
<li><a href="/pmic/metas.php">Metas</a></li>
</ul>
</li>
<li><a href="/pmic/pmic/" accesskey="P">PMIC</a>
<ul>
<li><a href="javascript:;">Materiales</a></li>
<li><a href="javascript:;">Chapala</a></li>
<li><a href="javascript:;">Arcediano</a></li>
<li><a href="javascript:;">Humor</a></li>
<li><a href="javascript:;">Fotos</a></li>
<li><a href="javascript:;">Notichapala</a></li>
<li><a href="javascript:;">Staff</a></li>
<li><a href="javascript:;">Eventos y Actividades</a></li>
<li><a href="javascript:;">Páginas Relevantes </a></li>
</ul>
</li>
<li><a href="/pmic/excit.php" accesskey="E">Excit</a></li>
<li><a href="/pmic/claseEA/" accesskey="C">Clase de Economía Ambiental </a>
<ul>
<li><a href="javascript:;">Programa Académico</a></li>
<li><a href="javascript:;">Pizarra de Mensajes</a></li>
<li><a href="javascript:;">Materiales de Lectura </a></li>
</ul>
</li>
<li><a href="/pmic/investigadores/" accesskey="R">Red de Investigadores</a>
<ul>
<li><a href="javascript:;">Investigadores</a></li>
<li><a href="javascript:;">Proyectos</a></li>
</ul>
</li>
<li><a href="/pmic/publicaciones.php" accesskey="U">Publicaciones</a></li>
</ul>
And the glorious, yet as simple as hell css is all about this:
hide the sub lists with display: none and show it again with :hover. However, the problem with IE consists that the pseudo class :hover is only supported for anchors, and what we are using is a li:hover pseudo class so will have to fix it with another code.
the basic code will be something like this:
li ul {display:none}
li:hover ul {display:block}
That's it. You tell the ul child of the list item to keep hidden, and then you tell that ul (on the rollover of the li) to show. A more fancy css code (whill i'll also borrow from my other site) will be like this:
CODE
div#main_menu {width:200px;background:#0b3a6a;color:white;font-size:.9em;float:left;text-align:left;clear:both;}
div#main_menu p {margin:0;padding:10px;font-size:1em;background:#74a7cd;text-align:center;}
div#main_menu ul {margin: 0;padding: 0;list-style:none;width: 200px;vertical-align:top;}
div#main_menu ul li {position: relative;}
div#main_menu li ul {position:absolute;left:200px;top:0;display: none;}/* quitar absolute para otro tipo de men� */
div#main_menu ul li a {display: block;text-decoration: none;background:#0b3a6a;color:white;padding:5px 0 5px 5px;
/*border: 1px solid #ccc;border-bottom: 0;*/}
div#main_menu ul li a:hover{color:white;background:#11589F;border-right:5px solid #BF0D0D;padding-left:10px;}
/* Fix IE. Hide from IE Mac \*/
* html #main_menu ul li {float: left; height:1%;}
* html #main_menu ul li a {height: 1%;}
/* End */
div#main_menu li:hover ul, #main_menu li.sfhover ul {display: block;}
div#main_menu li ul li a {padding: 2px 5px;border-bottom:1px solid #28516F;}
That's it, it comes with IE fix hacks and everything hehe. Note that the markup the main ul had an id? its for the js fix. You can change it but youll have to do it in the javascript.
The code i posted, the css, its an already formatted horizontal menu with dropdowns on the right, got it from a tutorial on
alistapart and its valid xhtml and css. This is the IE JS FIX:
CODE
sfHover = function() {
var sfEls = document.getElementById("menu_nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
Hope this worx for ya.
Comment/Reply (w/o sign-up)
