Welcome to WebmasterWorld Guest from 54.144.24.41

Forum Moderators: not2easy

Message Too Old, No Replies

Pulling my hair out: CSS dropdown menus

     
4:26 pm on Jan 29, 2007 (gmt 0)

New User

10+ Year Member

joined:June 27, 2006
posts:20
votes: 0


I am at my wit's end over this.

When I view the example menu with dropdowns for the tutorial using the Peterned's csshover.htc method, the dropdowns work on PC and Mac IE 5 and 6.

When I copy the code EXACTLY like they have it on the site, it doesn't work for me.
Yes, I'm taking their exact code that worked, and when I save it to my own documents, it no longer works. Argh!

I figure once I get their example to work for me, I'll customize the menu for my purposes...

Here is the relevant code:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<!--[if IE]>
<style type="text/css" media="screen">
body {
behavior: url(csshover.htc); /* call hover behaviour file */
font-size: 100%; /* enable IE to resize em fonts */
}
#menu ul li {
float: left; /* cure IE5.x "whitespace in lists" problem */
width: 100%;
}
#menu ul li a {
height: 1%; /* make links honour display: block; properly */
}

#menu a, #menu h2 {
font: bold 0.7em/1.4em arial, helvetica, sans-serif;
/* if required use em's for IE as it won't resize pixels */
}
</style>
<![endif]-->

[code]
<div id="menu">
<ul>
<li><h2>CSS Drop Down Menus</h2>
<ul>
<li><a href="#" title="#">CSS Hover Navigation</a>
<ul>
<li><a href="#" title="#">Intro for CSS Enthusiasts</a></li>
<li><a href="#" title="#">Demonstration HTML</a></li>
<li><a href="#" title="#">csshover.htc file</a></li>
</ul>
</li>
</ul>
</li>
</ul>

<ul>
<li><h2>Vertical CSS Pop-Out Menu</h2>
<ul>
<li><a href="#" title="#">SEO Consultants Sample</a></li>
<li><a href="#" title="#">tanfa Demo example</a>
<ul>
<li><a href="#">tanfa Tutorial</a><!-- link to seo vertical tut -->
<ul>
<li><a href="#" title="Vertical Menu - Page 1">Stage 1</a></li>
<li><a href="#" title="Vertical Menu - Page 2">Stage 2</a></li>
<li><a href="#" title="Vertical Menu - Page 3">Stage 3</a></li>
<li><a href="#" title="Vertical Menu - Page 4">Stage 4</a></li>
<li><a href="#" title="Vertical Menu - Page 5">Stage 5</a></li>
<li><a href="#" title="Vertical Menu - Page 6">Stage 6</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>

<ul>
<li><h2>Horizontal Drop & Pop Menu</h2>
<ul>
<li><a href="#" title="#">SEO Consultants Sample</a></li>
<li><a href="#">tanfa Demo example</a><!-- fully working sample -->
<ul>
<li><a href="#">tanfa Tutorial</a><!-- link to horizontal tut -->
<ul>
<li><a href="#" title="Horizontal Menu - Page 1">Stage 1</a></li>
<li><a href="#" title="Horizontal Menu - Page 2">Stage 2</a></li>
<li><a href="#" title="Horizontal Menu - Page 3">Stage 3</a></li>
<li><a href="#" title="Horizontal Menu - Page 4">Stage 4</a></li>
<li><a href="#" title="Horizontal Menu - Page 5">Stage 5</a></li>
<li><a href="#" title="Horizontal Menu - Page 6">Stage 6</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>


**********

CSS
[code]
/* CSS Menus - Horizontal CSS Menu with Dropdown and Popout Menus - 20050131 */

*{margin:0;padding:0;border:none;}

body{margin:0.5em;font-family:verdana,tahoma,arial,sans-serif;}

/* Begin CSS Popout Menu */

#menu{
width:100%;
float:left;
}

#menu a, #menu h2{
font:bold 11px/16px arial,helvetica,sans-serif;
display:block;
border-width:1px;
border-style:solid;
border-color:#ccc #888 #555 #bbb;
white-space:nowrap;
margin:0;
padding:1px 0 1px 3px;
}

#menu h2{
color:#fff;
background:#000 url(/css/images/expand3.gif) no-repeat 100% 100%;
text-transform:uppercase
}

#menu a{
background:#eee;
text-decoration:none;
}

#menu a, #menu a:visited{
color:#000;
}

#menu a:hover{
color:#a00;
background:#ddd;
}

#menu a:active{
color:#060;
background:#ccc;
}

#menu ul{
list-style:none;
margin:0;
padding:0;
float:left;
width:9em;
}

#menu li{
position:relative;
}

#menu ul ul{
position:absolute;
z-index:500;
top:auto;
display:none;
}

#menu ul ul ul{
top:0;
left:100%;
}

/* Begin non-anchor hover selectors */

/* Enter the more specific element (div) selector
on non-anchor hovers for IE5.x to comply with the
older version of csshover.htc - V1.21.041022. It
improves IE's performance speed to use the older
file and this method */

div#menu h2:hover{
background:#000 url(/css/images/expand3.gif) no-repeat -999px -9999px;
}

div#menu li:hover{
cursor:pointer;
z-index:100;
}

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

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

/* End of non-anchor hover selectors */

/* Styling for Expand */

#menu a.x, #menu a.x:visited{
font-weight:bold;
color:#000;
background:#eee url(/css/images/expand3.gif) no-repeat 100% 100%;
}

#menu a.x:hover{
color:#fff;
background:#000;
}

#menu a.x:active{
color:#060;
background:#ccc;
}

/* End CSS Popout Menu */

thank you for your help!

[edited by: SuzyUK at 5:06 pm (utc) on Jan. 29, 2007]
[edit reason] examplified code, removed urls [/edit]

4:53 pm on Jan 29, 2007 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member pageoneresults is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Apr 27, 2001
posts: 12172
votes: 61


Did you upload the .htc file as instructed?
5:09 pm on Jan 29, 2007 (gmt 0)

New User

10+ Year Member

joined:June 27, 2006
posts:20
votes: 0


yes, I have it in the same folder as the menuh.css and html file.
5:15 pm on Jan 29, 2007 (gmt 0)

Senior Member

WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Oct 1, 2002
posts:5199
votes: 0


Hi wellgahlee

since all files are in same folder this should work..

1. is this not working in all IE's or just 7?

2. are you testing this locally or is it on a server, I believe there were/are some issues concerning mime types

just trying to eliminate the obvious first

Suzy

[edited by: SuzyUK at 5:17 pm (utc) on Jan. 29, 2007]

5:25 pm on Jan 29, 2007 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member pageoneresults is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Apr 27, 2001
posts: 12172
votes: 61


Are you testing this locally or is it on a server?

I haven't been able to get this to work locally. And since I always work live at the server, I've never investigated it further.

5:27 pm on Jan 29, 2007 (gmt 0)

New User

10+ Year Member

joined:June 27, 2006
posts:20
votes: 0


I have only been able to test this on IE 5.2 on Mac and IE 6.02 on PC.

Actually, I just realized that the example on tutorial site does NOT work with Mac IE 5.2 (but I'm not too worried about that). I am worried about the PC users with IE 6.2 because most of the PC users at my office are using that version. (So no sneaking any incompatible code by them).

I have tested this both locally and uploaded to a server with the same result of not working.

thanks!

5:33 pm on Jan 29, 2007 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member pageoneresults is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Apr 27, 2001
posts:12172
votes: 61


I have tested this both locally and uploaded to a server with the same result of not working.

Can we have a bit more of a description of what isn't working? I'll assume that the hover effect is not functioning. But, are you getting an error on that page when you hover?

Actually, I just realized that the example on tutorial site does NOT work with Mac IE 5.2

lol! Mac IE 5.x. One of the worse browser releases ever for the Mac. Nothing worked for Mac IE 5.x. ;)

5:37 pm on Jan 29, 2007 (gmt 0)

New User

10+ Year Member

joined:June 27, 2006
posts:20
votes: 0


Yes, the dropdown functions don't work. The page loads, you see the menu, but they don't function. I don't get an error message or anything.

I agree that IE 5 on the Mac is awful. I guess I'll stop testing with it. : )

5:44 pm on Jan 29, 2007 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member pageoneresults is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Apr 27, 2001
posts:12172
votes: 61


Are you able to validate that page you are working on? Validate both the HTML and the CSS...

HTML/XHTML Validator
[validator.w3.org...]

CSS Validator
[jigsaw.w3.org...]

5:45 pm on Jan 29, 2007 (gmt 0)

New User

10+ Year Member

joined:June 27, 2006
posts:20
votes: 0


I haven't tried that yet.

I'll do it after lunch. thanks

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members