Vertical Menu won't work in IE

Nothing yet…

I separated the css and js code.
I think it’s more organized now.
But it still does not work in IE.

Hi,

What’s not working in IE exactly and which version of IE are you referring to?

I hovered over the “Eventos” link and a submenu popped out in iE6,7 and 8 (although it overlaps in ie8). Or am I looking in the wrong place?

As you are using Stu Nichols nested anchor approach you won’t need the htc or javascript because the menu doesn’t need them to work…

If you are talking about the overlap in IE8 the that’s because you need to include IE8 in these conditional comments.


    <!--[if IE 7]><!--></a><!--<![endif]-->

It should be:


    <!--[B][if gte IE 7][/B]><!--></a><!--<![endif]-->

Change those rules wherever they occur in the menu html.

e.g. here marked in bold:


<li class="drop"><a href="#">&nbsp;&nbsp;<img src="Imagens/seta.png" alt="" border="none"/> Eventos
                          [B]  <!--[if IE 7]><!--></a><!--<![endif]-->[/B]
                            <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>
                         
                        <li><a class="last" href="convenios.php">&nbsp;&nbsp;<img src="Imagens/seta.png" alt="" border="none"/> Conv&ecirc;nios</a></li>
                         
                        <li><a class="last" href="mural.php">&nbsp;&nbsp;<img src="Imagens/seta.png" alt="" border="none"/> Mural Est&aacute;gios</a></li>
                         
                        <li><a class="last" href="multimeios.php">&nbsp;&nbsp;<img src="Imagens/seta.png" alt="" border="none"/> Multimeios DCE</a></li>
                         
                        <li class="drop"><a href="#">&nbsp;&nbsp;<img src="Imagens/seta.png" alt="" border="none"/> Institucional
                           [B] <!--[if IE 7]><!--></a><!--<![endif]-->[/B]
                            <table>

Alos note that you cannot put break tags between the list elements as it is invalid.


</li>
 <br>
 <li>

No html can go between those closing and opening tags (except comments). The breaks would need to be inside the list items but using breaks just to make space is bad. Just increase the bottom margin of the list element instead.

I’m using version 8.
You are looking in the right place…
when i hovered over the “Eventos” and “Institucional” link the submenu overlaps in IE8, but in Chrome or Firefox it works fine.
It does not work with or without the htc or javascript.

Ok, then I have given you the answer above :slight_smile:

It does not work with or without the htc or javascript.
Yes it does I have it running locally right now without js or htc.

It’s only IE6 that needs js anyway and in the menu you are using from Stu he uses nested anchors and tables to make the hover work without JS. There would be no point in all that nested anchor stuff if you were going to use js for ie6. :slight_smile:

Yeahhh… it works!! \o/
Thanks so much, Paul O’B!
And thank you also, AtSea webdesign!

Great :slight_smile:

I have another question…
Can you help me?

I’m gonna open a new thread

Ok, I see you have started a new thread - I’ll close this one.