Pure css menu solution

[TNO]

I've been working on a 100% css menu solution for a few hours now, and for the life of me I cant get the browsers to play along. Firefox is the only one displaying correctly. Any ideas on how to get IE7 & Opera to cooperate without resorting to script? (I would prefer not to have a wrapper div if possible)

http://thenewobjective.com/temp/menu.html

[WebJoel]

There are only two pure-CSS/non-javascript 'drop-down lists' that I personally know of and am at least partially familiar with (although most assuredly there are more!). And both of these are 'intellectual property constructs', -the authors either require a suggested 'licence fee' in order to use them on your 'business public' site, or at the very least, a link-back and a 'donation' to reward them for their deservedly hard work.
Personally, I don't feel that they can enforce this but I do understand the desire to reap some even small stipend from their long toil in achieving this Holy Grail of the javascpt-less drop-down.

If your navigation list is in fact, a 'drop-down list', you can Google "javascript-free drop-down list" and maybe find a site or several that teach the method. If you cannot find it, I will look for it and remit the URL via PM. I won't publish their code hereon, respecting their desire for copyright of their hard work. It'll be up to you to decide how/if you want to use their code according to their request.

Looking at your code I don't see any javascript so maybe you're got it figured out anyway.
The first drop-down's "<li>" will be as long as the longest "<li>", but without stating a default width, the drop-down "<li>"s called "..." are only going to be as wide as "...".

So (just wondering out loud, -I have not tried this on your code), would this help:
.menu li ul li{
position:relative;
left:0px;
display: block;
cursor: pointer;
width:foo;
} declaring a WIDTH to force-open the max width, or "display:block;" to force block-element and thus, a virtual line-wrap? It might stop that parculiar placement of the "..." on the parent ".menu ul li" and thus be 'below it'... Is this the problem? I note that IE isn't 'drop-down'-ing the sub-navs labeled "..."

[TNO]

Its just quite irritating that something which is syntactically correct in all ways I can see refuses to work. I think i rewrote it from scratch a good 4-5 times. Just seeing the method on how the cross browser offsets were used would be plenty for me.

Besides google I've dug through most of these references ( http://css-discuss.incutio.com/?page=ListMenus ) and in a best case scenario, the css is a good 500 lines or an htc hack. Surely there must be some simplicity out there.

[WebJoel]

Its just quite irritating that something which is syntactically correct in all ways ... We can blame IE (and Opera, -which surprises me a bit but it has quirkies too like all browsers have).

I have seen this done and done to work x-browser. I might visit this again and see if I can figure it out..

[bathurst_guy]

www.cssplay.co.uk has plently, he often only wants his name and website posted in the css

[TNO]

Alright, I've figured it out for IE, Opera I'll just have to write off as a lost cause:

http://thenewobjective.com/temp/menu.html

Thanks for the think tank, you wouldn't imagine the strange pointless responses from other forums

[WebJoel]

Excellent! -What did you change, -the width of the "a" to "100%"? I didn't copy your code yet so cannot compare before/after, but that would maybe do it...

Anyway, great.

And yes, -bookmark this site. WD has some of the best in their fields and we're very active here. It's awesome!

[TNO]

This was the solution for IE, I didn't have to alter the original css:

<!--[if IE 7]>
<style type="text/css">

.menu li:hover > ul{
margin-top:16px;
}

</style>
<![endif]-->

Over the years (since when I joined in 2004), this forum was pretty hit and miss so I didnt bother much. its good to see a community has finally arrived.

[Centauri]

Of course, it still doesn't work with IE6 due to that browser's lack of support for hover on anything other than links, so javascript will be needed for that.

[Centauri]

This was the solution for IE,

Actually, just specifying the top position of the submenu instead of allowing the browser to guess would not require an IE hack :.menu li ul{
position:absolute;
white-space:nowrap;
text-align:left;
list-style:none;
display:none;
z-index:5;
left:0%;
top:1.15em;
margin:0px;
padding:0px;
border:1px solid gray;
background-color:black;
}