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>
Getting Horizontal Navigation with...
Tom Goldsmith
Registered User
9 posts
Inger
Senior Advisor
14,547 posts
If it's any comfort - it works in FireFox too.
I have alerted a CSS whizz to your problem.
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
Inger, Norway
My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Darce Hoover
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.
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
Tom Goldsmith
Registered User
9 posts
Inger and Darce
Thank you for your suggestions. I see I have some reading and "playing" to do.
Tom
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.
