Getting Horizontal Navigation with...

User 20976 Photo


Registered User
9 posts

I have created a horizontal navigation structure with dropdown submenus. It works fine in Opera but not in IE 6. Suprise...suprise.
Does anyone have any suggestions/tricks to making this work in IE?

My thanks in advance for any suggestions, tricks or tips.

Tom Goldsmith
Sample code follows-----
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<!-- Created with the CoffeeCup HTML Editor 2008 -->
<!-- http://www.coffeecup.com/ -->
<!-- Brewed on 3/12/2008 5:00:00 PM -->
<head>
<title>CSS top only dropdown menu</title>
<!-- based on The CSS Anthology 101 Essential Tips Tricks and Hacks -->
<!-- by Rachel Andrew ... page 347 -->
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />

<style type="text/css">
/************************************************************
* Scripting for horizontal nav menu *
* Does not work in Internet Explorer *
* Works in Opera *
************************************************************/
#nav, #nav ul
{ padding: 0;
margin: 0;
list-style: none;
}
#nav li
{ float: left;
position: relative;
width: 10em;
border: 1px solid #B0C4DE;
background-color: #E7EDF5;
color: #2D486C;
margin-right: 1em;
}
#nav a:link, #nav a:visited
{ display: block;
text-decoration: none;
padding-left: 1em;
color: #2D486C;
}
#nav ul
{ display: none;
position: absolute;
top: 1.3em;
left: 0;
padding-top: 0.5em;
}
#nav ul li
{ float: none;
border: 0 none transparent;
border-bottom: 1px solid #E7EDF5;
background-color: #F1F5F9;
font-size: 100%;
margin: 0;
margin-bottom: 0.5em;
padding: 0;
}
#nav li > ul
{ top: auto;
left: auto;
}
#nav li:hover ul
{ display: block;
}
</style>

</head>

<body>

<ul id="Nav">
<li><a href="#">Layout Tours</a>
<ul>
<li><a href=" ">Pre-Convention</a></li>
<li><a href=" ">Convention</a></li>
<li><a href=" ">Post-Convention</a></li>
</ul>
</li>
<li><a href="#">Registration</a>
<ul>
<li><a href=" ">Exhibitor</a></li>
<li><a href=" ">General</a></li>
</ul>
</li>
</ul>

</body>
</html>
User 122279 Photo


Senior Advisor
14,447 posts
Online Now

If it's any comfort - it works in FireFox too.

I have alerted a CSS whizz to your problem.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 11165 Photo


Registered User
4,316 posts

Hi Tom, I am not a CSS Guru or Whiz at all. But Inger asked me to look at your menu. After I post my suggestion, then perhaps one of the much more advanced designers in CSS, can assist you, further.

It seems that IE has issues with working with hover's in a CSS menu, along with other things and needs special css coding.

For one thing, you possibly need an csshover.htc file uploaded in your folder or directory where you menu css code is.

I found this great tutorial site that shows exactly how to code a CSS menu and how to use the .htc file so that a css menu will work in IE and other browsers:
http://www.seoconsultants.com/css/menus/tutorial/

You can see I followed the instructions and created this:
http://www.coffeecuphelp.com/djean/user … -test.html

Where the csshover.htc file is located for downloading: http://www.xs4all.nl/~peterned/csshover.html

I would suggest studying this tutorial and making the adjustments that would apply to your menu.
Darce Jean
User 20976 Photo


Registered User
9 posts

Inger and Darce
Thank you for your suggestions. I see I have some reading and "playing" to do.

Tom

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.