Jump to content

CSS dropdown menu bugs on IE and FF


jpkuelho
 Share

Recommended Posts

Hi ,I'm trying to make a dropdown menu with css, I based my work on a tutorial from A List Apartthe bugs I'm having in IE6 is that the submenu renders beneath other content like images,text, etc. In FF putting z-index:1; solved this problem, and the only problem I'm having in FF now is that after the 4th link he doesn't consider the next ones as links(I tried changing links position and it still remained the problem)the css

/* MENU */#menu {	top:0;	left:15px;position:relative;	width:161px; 	height:226px; background-image:url(imagens/menu.gif); background-position:left; background-repeat:no-repeat;}ul {margin:0;padding: 0;list-style: none;width: 147px;top:16px;}ul li {position: relative;margin-bottom:8px;width:147px;display:block;margin-left:10px;}ul ul li {margin-left:0px;}ul ul {padding-top:5px;}li ul {position: absolute;left: 147px;top: -7px;display: none;background-color:#1e447e;border:3px solid #fff;width:147px;float:left;}ul li a {display: block;color:#FFFFFF;text-decoration:none;left:17px;position:relative;}li ul li {position:relative;}li:hover ul, li.over ul { display: block; z-index:1;}li:hover, li.over {background-color:#548f9e;}/* Fix IE. Hide from IE Mac \*/* html ul li { float: left; }* html ul li a { height: 1%; }* html ul li {margin-left:5px;}* html li.over ul {position:relative;}/* End */

the html

<div id="menu" ><ul id="nav">     <li><a href="#">EQUIPE</a></li> 	<li><a href="#">HOSPITAIS DE ATUAÇÃO</a></li>    <li><a href="#">SOBRE O SEU CORAÇÃO</a>       <ul>         <li><a href="#">CENTRO CLÍNICO</a></li>         <li><a href="#">CENTRO CIRÚRGICO</a></li>       </ul>     </li>     <li><a href="#">PRODUÇÃO CIENTÍFICA</a>       <ul>         <li><a href="#">ARTIGOS</a></li>         <li><a href="#">LIVROS</a></li>         <li><a href="#">VÍDEOS</a></li>       </ul>     </li>	<li><a href="#">EVENTOS</a></li> 	<li><a href="#">LINKS</a></li>	<li><a href="#">CONTATO</a></li>	<li><a href="#">HOME</a></li>  </ul></div>

thanks in advance

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...