Vertical Menu won't work in IE

Hi, I’m developing a site and I created a vertical menu with submenus.
It works fine in Chrome and Firefox, but in IE it’s not working.
Can anyone help me solve, please?

css:


<style type="text/css"> 
/* ================================================================ 
This copyright notice must be untouched at all times.
 
The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/vertical_slide.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the assocaited (x)html may be modified in any
way to fit your requirements.
=================================================================== */
 
ul.menu1, ul ul {
	padding:0;
	margin:0;
	border:0;
	list-style-type:none;
	overflow:hidden;
	background:#3d3f94;
	width:14em;
	text-align:left;
	color:#ffffff;
}
ul.menu1 {
	margin:0 auto;
}
ul.menu1 table {
	border-collapse:collapse;
	padding:0;
	margin:0;
	font-size:20px;
}
ul.menu1 ul {
	margin-left:1.5em;
}
ul.menu1 li {
	text-indent:0.5em;
} 
ul.menu1 li.drop {
	margin-bottom:-2px;
}
ul.menu1 li a,
ul.menu1 li a:visited {
	display:block;
	width:14em;
	height:2em;
	line-height:1.9em;
	text-decoration:none;
	color:#ffffff;
}
ul.menu1 li a.last,
ul.menu1 li a.last:visited {
	display:block;
	width:14em;
	height:2em;
	line-height:2em;
}
 
ul.menu1 li:hover a,
ul.menu1 li a:hover {
	border:0;
	color:#ffffff;
	font-weight:bold;
	background-color:#333366;
}
 
 
/*Drop 1 - Eventos*/
ul.menu1 li ul.u1 {
	display:none;
}
ul.menu1 li:hover ul.u1,
ul.menu1 li a:hover ul.u1 {
	display:block;
	height:3.5em;
	width:12em;
	margin-top:-1px;
	background-color:#333366;
}
ul.menu1 li:hover ul.u1 li a,
ul.menu1 li a:hover ul.u1 li a {
	height:2em;
	color:#ffffff;
	font-weight:normal;
	font-size:14px;
}
ul.menu1 li:hover ul.u1 li:hover a,
ul.menu1 li a:hover ul.u1 li a:hover {
	background:#333366;
	color:#ffffff;
	font-size:20px;
}
/*Drop 2 - Institucional*/
ul.menu1 li ul.u2 {
	display:none;
}
ul.menu1 li:hover ul.u2,
ul.menu1 li a:hover ul.u2 {
	display:block;
	height:5em;
	width:12em;
	margin-top:-1px;
	background-color:#333366;
}
ul.menu1 li:hover ul.u2 li a,
ul.menu1 li a:hover ul.u2 li a {
	height:2em;
	color:#ffffff;
	font-weight:normal;
	font-size:14px;
}
ul.menu1 li:hover ul.u2 li:hover a,
ul.menu1 li a:hover ul.u2 li a:hover {
	background:#333366;
	color:#ffffff;
	font-size:20px;
}
 
</style>

html:


<ul class="menu1"> 
 
<li><a class="last" href="quem_somos.php">&nbsp;&nbsp;<img src="Imagens/seta.png" alt="" border="none"/> Quem Somos</a></li> 
<br> 
<li><a class="last" href="noticias.php">&nbsp;&nbsp;<img src="Imagens/seta.png" alt="" border="none"/> Not&iacute;cias</a></li> 
<br> 
<li class="drop"><a href="#">&nbsp;&nbsp;<img src="Imagens/seta.png" alt="" border="none"/> Eventos<!--[if IE 7]><!--></a><!--<![endif]--> 
	<table><tr><td> 
 		<ul class="u1"> 
		<li><a href="calourada.php">Calourada</a></li> 
	 	<li><a href="outros.php">Outros</a></li> 
	 	</ul> 
	</td></tr></table><!--[if lte IE 6]></a><![endif]--> 
</li> 
<br> 
<li><a class="last" href="convenios.php">&nbsp;&nbsp;<img src="Imagens/seta.png" alt="" border="none"/> Conv&ecirc;nios</a></li> 
<br> 
<li><a class="last" href="mural.php">&nbsp;&nbsp;<img src="Imagens/seta.png" alt="" border="none"/> Mural Est&aacute;gios</a></li> 
<br> 
<li><a class="last" href="multimeios.php">&nbsp;&nbsp;<img src="Imagens/seta.png" alt="" border="none"/> Multimeios DCE</a></li> 
<br> 
<li class="drop"><a href="#">&nbsp;&nbsp;<img src="Imagens/seta.png" alt="" border="none"/> Institucional<!--[if IE 7]><!--></a><!--<![endif]--> 
	<table><tr><td> 
 		<ul class="u2"> 
		<li><a href="programa.php">Programa</a></li> 
	 	<li><a href="transparencia.php">Transpar&ecirc;ncia</a></li> 
		<li><a href="estatuto.php">Estatuto</a></li> 
	 	</ul> 
	</td></tr></table><!--[if lte IE 6]></a><![endif]--> 
</li> 
<br> 
<li><a class="last" href="galeria.php">&nbsp;&nbsp;<img src="Imagens/seta.png" alt="" border="none"/> Galeria de Fotos</a></li> 
 
</ul>

you need to use the hover.htc for it to work in IE.

Well, after downloaded it, all I have to do is this… ?


body {
	[B]behavior: url("csshover3.htc");[/B]
	overflow-x:hidden;
	font: 20px Candara;
	margin: 0px;
	padding: 0px;
	height: 100%;
	text-align:center;
}

If so, it does not work.

the URL path has to match where you stored your htc file. Upload it to your server and match the path.

So if you upload it to an includes directory it would be


behavior: url("/includes/csshover3.htc");

It was in the root directory.

After I put in the directory "css ".
Like this:

behavior: url("/css/csshover3.htc");

But it still did not work.

what is the URL of your page?

In the moment is

http://www.esportes.ufu.br/teste/index.php

As you can see… in Chrome and Firefox it works fine, but in IE it does not work.

where is your reference to the csshover3.htc? I don’t see it anywhere

another thing. Styles should be placed inside of the <head> section. You have a bunch of styles down inside a table cell.

You also have a bunch of javascript inside of table cells as well. In most cases the JS should also be in the <head> section or loaded as the last item before </body>

Not sure what this is doing in the location it’s at


<noscript> 
<style type="text/css">
#dock { top: 0; left: 100px; }
a.dock-item { position: relative; float: left; margin-right: 10px; }
.dock-item span { display: block; }
</style>
</noscript> 

Is in the file style.css

I already deleted.

you only want it to load for IE, not for other browsers.


<!--[if IE]>
<style>
body {behavior: url("yourpathhere/csshover3.htc")}
</style>
<![endif]-->

when I reference the URL where it says you have it located, http://www.esportes.ufu.br/css/csshover3.htc I get not found.

In fact there is no reference to http://www.esportes.ufu.br/css/ being found either.

What is the name of the directory you added the htc file?

It’s because in the index.php file in the table cell has an include…
Like this:


<table width="1150" bgcolor="#3d3f94">
	<tr>
	<td><div id="menuV"><?php include('conteudo_esquerdo.php'); ?></div></td>
	<td bgcolor="#ffcc99" height="750px" width="934px"><?php include('conteudo_index.php'); ?></td>
	</tr>
	</table>

In the include files “conteudo_esquerdo.php” and “conteudo_index.php” has styles and js code.

you don’t want javascript there. It should be in the head or the bottom of the page

http://www.esportes.ufu.br/teste/css/csshover3.htc

place this in the URL
/teste/css/csshover3.htc

Like this, right?


<!--[if IE]>
body {
	behavior: url("/teste/css/csshover3.htc")
}
<![endif]-->

body {
	overflow-x:hidden;
	font: 20px Candara;
	margin: 0px;
	padding: 0px;
	height: 100%;
	text-align:center;
}

Still does not work.
And now… in Chrome and Firefox the style for the body font won’t work either.

this should be outside your stylesheet, right above the </head> tag


<!--[if IE]>
body {
	behavior: url("/teste/css/csshover3.htc")
}
<![endif]-->