CSS Drop-down menu problem

Deanje · 1 Nov 2008 at 18:52

Hi,

I've been asked to make a CSS drop-down menu, having never done this before I blundered my way through it using the web for help.

Now, I've got a lovely, fully functioning menu; but it only works properly in Safari and firefox, in IE7 it has an odd problem which I can't figure out how to fix.

This shot shows how it should look, as displayed by Safari:

And this shot shows how IE is butchering it:

For some reason IE is popping the menu up to the side rather than below; I was just wondering if I've made a popular mistake which is causing this issue and, if so, how do I fix it?

RickST · 1 Nov 2008 at 21:16

Looks like ie isnt happy with the absolute positioning. do you have the code online, should beable to get it working for you.

if not i have an example menu i wrote a little while ago which is a pure css drop down using pretty clean markup

Deanje · 1 Nov 2008 at 21:29

Hi,

Here is the offending CSS file:
http://rapidshare.com/files/159751646/dropdown.css.html

And here is the conditional formatting, shamelessly stolen from a tutorial:

Code:

<!--[if IE]>
			<style type="text/css" media="screen">
 				#menu ul li {
				float: left;
				width: 100%;
				}
			</style>
		<![endif]-->
		<!--[if lt IE 7]>
			<style type="text/css" media="screen">
				body {
				behavior: url(csshover.htc);
				font-size: 100%;
				}
				#menu ul li a {height: 1%;} 
				#menu a, #menu h2 {
				font: bold 0.7em/1.4em arial, helvetica, sans-serif;
				float: left;
				}
			</style>
		<![endif]-->

Deanje · 4 Nov 2008 at 11:37

In addition: the HTML goes something along the lines of

Code:

<ul>
     <li><h2>Menu Header</h2>
         <ul>
            <li><a>menu item</a></li>
            <li><a>menu item 2</a>
                  <ul>
                     <li>sub menu item</li>
                     <li>sub menu item 2</li>
                  </ul>
            </li>
         </ul>
    </li>
</ul>

</cheeky bump>

GravyMonster · 4 Nov 2008 at 11:55

I don't know if this is a project or you're being made to re-invent the wheel, but here's the one I usually use - http://www.dynamicdrive.com/dynamicindex1/droptabmenu.htm

If you don't fancy using it, hopefully it'll give you a few pointers

Deanje · 4 Nov 2008 at 12:59

I was just told to create a menu for a new intranet system, not verbatim "possibly CSS...or, whatever...".

It'd be nice to get this one working, so I knew what's been done, so I suppose I'll trawl through the code on that site. Cheers.

Edit: Aha! It was the Height: 30px; in my #menu h2 style. Fixes the issue of the wonky menus, but now I've got to somehow get the same functionality somewhere else.