CSS Forum

**bige2533** · 01:29 AM

I'm trying to get the navigation menu on the following two pages to work similarly:

http://www.trailsticker.com

and

link removed

Right now, I'm seeing an issue with the hover menu not working properly in IE8 for the cafepress site. It works in IE8 at the trailsticker site. And both pages work properly in firefox.

Any idea on what may be the problem? Below is the CSS for the hover menu.

Code:

/* navigation hover menu */
#menu
{
    width: 100%; /* set width of menu */
    color:White;
    padding: 5px 0px 5px 0px;
    font-size:14px;
} 
#menu ul
{ /* remove bullets and list indents */
    list-style: none;
    margin: 0;
    padding: 0;
}
/* style, color and size links and headings to suit */
#menu a
{
    font: verdana,geneva,arial,helvetica,sans-serif;
    font-size:14px;
    display: block;
    margin: 0;
    color: White;
    background: #49CDE5;
    text-decoration: none;
}
#menu a.top
{
    background: #008000;
}
#menu a:hover
{
    text-decoration:underline;
    background: #49CDE5;
}
#menu li
{
    /* make the list elements a containing block for the nested lists */
    position: relative;
    z-index:500;
}
#menu li:hover
{
    background: #49CDE5;
}
#menu ul ul
{
    position: absolute;
    top: 0;
    left: 100%; /* to position them to the right of their containing block */
    width: 85%; /* width is based on the containing block */
    z-index:500;
}
div#menu ul ul,
div#menu ul li:hover ul ul
{display: none;}

div#menu ul li:hover ul,
div#menu ul ul li:hover ul
{display: block;}

div#menu ul ul ul,
div#menu ul ul li:hover ul ul
{display: none;}

div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block;}

**mik** · 03-03-2010, 10:49 AM

Your mark-up is badly structured at the Cafépress website. It should be:

HTML Code:

<html>
<head>
</head>
<body>
</body>
</html>

Not:

HTML Code:

<html>
<head>
<html>
<head>
</head>
</head>
<body>
<body>
</body>
</body>
<body>
</body>
</html>
</html>

Clean it up and it works.

**bige2533** · 03-03-2010, 11:35 AM

Thanks, I've cleaned up the structure but still no luck with hover menu.

**mik** · 03-03-2010, 03:07 PM

The doctype should be declared before the html. The following on line 171

HTML Code:

<!--[if IE]><link rel="stylesheet" href="/content/css/iestyles.css" type="text/css" media="screen, projection"><![endif]-->

Should appear in the <head> section, not the <body> section.

**bige2533** · 03-03-2010, 04:21 PM

I appreciate your help. There is a lot of html/scripts/etc that cafepress adds in to make the cart and product display work on their site. Unfortunately, I'm unable to remove that conditional statement. I tried adding it to the head so it was in both the head and html but it didn't make a difference. Just thought it would be a simple fix since this works in firefox but not IE. I'll try contacting Cafepress about their markup.

**MattGoucher** · 03-03-2010, 05:13 PM

Your missing your doctype. Hover menus always get buggy without one. Give it a try

**bige2533** · 11:09 PM

That's one thing I can't change due to Cafepress. I'm unable to add a doctype outside of the head or html. Using their interface. Is there a way to add a script in the head to declare the doctype?

**bige2533** · 03-03-2010, 11:37 PM

I've elected to eliminate the navigation menu from the cart/checkout page due to the issue. So, the original link won't appear to have the issue.