Get IE to properly position fly out (and up) menu

[dc dalton]

Long time no post here (that freaking busy!)

I am trying to make a variations of a fly out menu from my menu tutorial found here:

http://davidcdalton.com/pages/articl...e/menutest.php

Click on the 'right menu' link to see the one I am working with.

Of course this is using a variation of the suckerfish menus.

What I want is to have the positioning of the fly out above the top level menu item. As you see from the example the sub menu comes out to the left and then drops down. I need it to come out to the left and 'drop up' so the bottom sub menu item is right next to the top level menu item.

What I did (and it works in FF) is set the containing li (the top level item) to position: relative on the hover and then inner ul (the drop down) to position: absolute and then set the bottom variable to 0. Like this:

ul#navigation li:hover	 {
	position: relative;
	}
ul#navigation li:hover ul, ul#navigation li.sfhover ul	{
	position: absolute;
	left: auto;
	right: 245px;
	bottom: 0;
	}
ul.inner	{
	list-style: none;
	z-index: 100;
	position: absolute;
	left: -2999em;
	}

It works wonderful in FF but IE 6 (haven't gotten to 7 yet) shows the drop down menu positioned from the bottom of the page (not at all good). Now when I set it back to the way it is in the example page (having the sub menu drop down) it works flawlessly in IE.

I don't have an actual working model on the internet yet but I think you get the point.

BTW, the above link uses a style sheet switcher so to avoid confusion the CSS file that is used for the right menu example is this:

http://davidcdalton.com/pages/articl...les/ltside.css

Don't know if that would even help .... the important code is shown above.

Thanks!

[Paul O'B]

Hi Dc,

You would have to do something like this for ie6.

ul#navigation li:hover ul, ul#navigation li.sfhover ul    {
    position: absolute;
 left:-165px;
 bottom: 0;
    }
* html ul#navigation li{
    float:left;
    width:100%;
    position:relative;
    z-index:999;

}

You can't specify left and right together for ie6 as it only obeys one of them and the same goes for top and bottom.

You will probably need to keep the flyout a set width or you won't be able to position it next to the menu exactly.

[dc dalton]

Thanks Paul ... great to see you again.

I tried what you showed and man what a mess!

It was making the drop downs sit in blocks of three next to each other and caused the menu to drop down below the content (the menu is floated right)

But the good news is I tinkered a bit and got it. Here's what I ended up with:

ul#navigation li	{
	width: 250px;
	border: 1px solid #DED9DA;
	background-color: #F9F9F9;
	padding: 5px 10px;
	margin-bottom: 3px;
	}
ul#navigation li:hover	 {
	position: relative;
	}
ul#navigation li:hover ul, ul#navigation li.sfhover ul	{
	position: absolute;
	left: -165px;
	bottom: 0;
	}
* html ul#navigation li	{
	position: relative;
	z-index: 999;
	}
ul.inner	{
	list-style: none;
	z-index: 100;
	position: absolute;
	left: -2999em;
	}

Actually works wonderful ....... now on to IE 7 to see if it works.


On that note ... I haven't been keeping up on the IE 7 problems (haven't been doing a lot of layout code) .... has it been confirmed the * html hack doesn't effect IE 7?

thanks . as always if you don't hit the problem on the head you make me think of a way to do it!

[Paul O'B]

Hi Dave,

Glad you got it working.

IE7 doesn't support the star selector hack so its perfectly safe to target ie6 and under this way.

IE7 is usually pretty good but does have the odd "haslayout" issue still which can be cured by using mine-height:0 on the offending element.

I floated the element in teh example above because you seemed to have gaps in the list which floating will cure. However I probably didn't have the same code as you in place when I tested locally hence the difference.

It is always better to float the lists and the anchors in IE6 as this cures all whitespace bugs and gaps but it does mean you need to set a specific width otherwise the float will shrinkwrap and won't expand full width. Of course this means that you have to add a clear into the equation so that they line up vertically.

[dc dalton]

I floated the element in teh example above because you seemed to have gaps in the list which floating will cure. However I probably didn't have the same code as you in place when I tested locally hence the difference.

Thanks, the gaps are intentional!