Eric, I saw the example you did, but it didn’t look anything like what I want, so I sorta skipped over it. (You example has boxes around each sub-menu item and doesn’t have the unified sub-menu “drop-line” that I want.)
If it is just in how things are styled, then I will read your article, but I was under the impression it was different from what I want.
Debbie
Where is an explanation and code examples for the “Horizontal Main Men with Horizontal Sub-Menus” like Pauls was demoing??? :-/
Hi Debbie,
As Eric just pointed out, it is called a dropline rather than a dropdown.
The sub-menu is absolute positioned just like any other suckerfish menu, the difference with a dropline is that the sub-list gets the same width as the main UL. A dropdown has it’s width confined so the list items stack upon each other.
EDIT: Another important point is that the main UL gets the position:relative; rather than each main LI. That way the parent UL becomes the contaiing block for AP sub-list, that allows the full width sublist to position to the far left of the main UL.
Generally speaking the space for the sub-list is preserved by either a bottom border on the main UL or a parent div. That is optional though and you can have it just drop into view without a landing pad.
I have some dropline examples too, but I don’t write tutorials. It’s just a view page source system with me. 
Opps sorry. …and Ray’s.
Huh?
Debbie
Yes DoubleDee it’s just styled that way. But you mine as well use one that more closely matches what you want - like Paul’s or Stu’s. It’s not a easy menu to make though. So expect some heart ache.
Well said Eric, I knew it would be troublesome. 
Being that I was up for a challenge today I took this one on.
Here is my version of it:
Sliding Door Tabs with Dropline Subnav
It survives 4 text zooms in FF before it starts to break up, that’s not bad though. It was kinda tricky since I could not AP the tab spans, putting RP on the LI would have caused the sub UL to make that it’s containing block.
Unlike the one at the Chicago Tribune I set up tabs on all main list items and current page highlighting as icing on the cake.
With a little help from the sfhover script it should work in IE6 too.
Debbie, I hope that helps!
Wow! Thanks Rayzur!
That is definitely getting closer to what I was looking for!
Ironically, though, I am playing around with your (and others’) code and trying to understand how all of your earlier examples work. 
I definitely want to get as close as the Chicago Tribune example, but want to get the basics down before I get into advanced concepts like “Sliding Door Tabs” and “Sprites”. (Here is hoping you stick with me until I get it all down!)
Also, until I find someone to show me how to use Gimp, I am out-of-luck with anything fancy images - thus one reason I was trying to avoid sprites!
Debbie
Good job Ray. Looks good! I envy your spirit. I’ve never delved into sliding doors. I’m sure that was a challenging combo.
(Boy this is going to be a l-o-n-g thread!)
Here is my first problem that I haven’t seen anyone address…
Let’s say I have the following Top Menu items:
- Home - News - Business - Sports
Here is what I am trying to do…
All of the backgrounds should to be a lighter “Blue Gray” (#E6E6FF).
And by default, the 1st tab should always be a darker “Steel Blue” (#4682B4).
Here is the tricky that I’d like to do without JavaScript…
When you hover over any element/tab, the 1st tab should turn to a lighter “Steel Blue” to match the other elements/tabs, and the selected element/tab should turn a darker “Steel Blue”.
All of the examples I have seen use a…
<li class="current">
…however that leaves that element/tab always shaded and I do not want that.
(Only the currently selected element/tab should be a darker blue. AND I’d like to do this entirely with CSS if possible.)
Is this possible?! :-/
Debbie
If you are using a CMS, it can add class=“current” to the relevant LI dynamically, but if not using that, one way to do it is to give a special id to each LI, and give a special class to the <body> tag of each section.
So, if you are on a page in the News section, your HTML would be something like
<body class="news">
<ul>
<li id="home"></li>
<li id="news"></li>
</ul>
and your CSS would be something like
.news #news a { ... current / hover styles ...}
That CSS rule will have more specificity that the normal LI rule, which might be something like
li a { ... normal styles ... }
When you hover over any element/tab, the 1st tab should turn to a lighter “Steel Blue” to match the other elements/tabs, and the selected element/tab should turn a darker “Steel Blue”.
And your calling the “current highlighted item” the 1st tab, actually it could be any tab depending which page your on, correct?
Yes I knew that might be an issue, unfortunately CSS can’t climb backwards up the DOM like that.
Let’s say that the current highlighted tab was somewhere in the middle of the list items (similar to where it is on my example). Now I could effect it’s hover states by using a string of “adjacent sibling selectors” working off of ul:hover li+li… but once I hover to the next LI lower in the source than the “current item” then it’s all over with. I can’t target anything in a backwards manner which is “climbing UP the DOM”.
I could null out the li.current settings altogether with ul:hover as well, but I would think you may as well not even have a current selection in that case. That may be what your wanting though.
I could null out the li.current settings altogether with ul:hover as well
Here is what I mean by doing that
Version II
The only problem is that if you hover over an LI that does not have a sublist then the current item sublist is still in view.
You’ll see when you hover over the last two items on that page, they have no sublist.
These are the selectors I added to that version
#nav:hover .current a {background-position: 0 0}
#nav:hover .current a span {background-position: -328px 0}
#nav:hover .current:hover a {background-position: 0 -40px}
#nav:hover .current:hover a span {background-position: -328px -40px}
The Chicago Tribune has the Main Menu light blue and the Sub-Menu medium blue.
When you land on the page, the 1st tab (Home) is shaded medium blue and the corresponding Sub-Menu for “Home” appears which is also medium blue.
All other tabs are lighter blue.
If you click on another tab, that tab becomes the “active” one and so it changes to medium blue and its corresponding Sub-Menu appears also in medium blue.
All other tabs are lighter blue including the 1st tab (“Home”) since it is no longer the “active” tab.
This is a pretty standard coloring scheme amount menus.
Yes I knew that might be an issue, unfortunately CSS can’t climb backwards up the DOM like that.
Let’s say that the current highlighted tab was somewhere in the middle of the list items (similar to where it is on my example). Now I could effect it’s hover states by using a string of “adjacent sibling selectors” working off of ul:hover li+li… but once I hover to the next LI lower in the source than the “current item” then it’s all over with. I can’t target anything in a backwards manner which is “climbing UP the DOM”.
I could null out the li.current settings altogether with ul:hover as well, but I would think you may as well not even have a current selection in that case. That may be what your wanting though.
So how does the Chicago Tribune and most other sites do that?
JavaScript?
Debbie
So how does the Chicago Tribune and most other sites do that?
JavaScript?
Yes, it is using js to place a tab on the first LI and then that tab follows your cursor. The js is also making the dropline visible on the initial tab.
If you disable js it just becomes a vanilla flavored dropline without any tabs on the main items. The sublists are completely hidden until you hover on a main LI.
Not sure how Tribune site does it, but it’s easy with CSS. My post above explains the basics of it.
Rayzur, I don’t mean to sound like a picky little brat, but I’m having a hard time following your examples because the colors don’t match.
There is a slight different in blue between your tabs and the states, and I’m confused how you want it too look.
For me, there should only be two colors:
#E6E6FF; /* Blue Gray (Lighter) /
#4682B4; / Steel Blue (Darker) */
Attached is a screenshot of sample Menus/SubMenus and the corresponding color scheme to mimic what the Chicago Tribune does. (Guess you’ll have to wait until someone approves it?!)
Well, if we can get the colors coordinated, I think that your above idea may work.
First, all tabs should have sub-menu items.
Second, if they didn’t, you could always create “dummy” items and style them so they can’t be seen, right?
Boy, this sure is A LOT harder than I originally envisioned!! 
Thanks for all of your help so far!!!
Debbie
Hi Ralph,
I did see your post and I had thought of using body classes too. Regardless of how you target the current item for styling the issue at hand is changing those styles when hovering on any of the siblings.
That is why I considered ul:hover… to override them when hovering anywhere on the menu.
Not sure how Tribune site does it, but it’s easy with CSS. My post above explains the basics of it.
I think our posts overlapped, I just explained that above too. It’s using js
Yes Debbie, your image should be achievable since there is only two states to deal with and each LI has a sublist.
If the main LIs need to fill the total width of the UL then your going to run into another set of problems if your depending on text to set the width.
That was discussed recently in another thread, I’d have to go hunt it down.
The most effective way to do that is to set IDs or classes and define a width to each main LI. The problem with that though is appearance and people like me zooming in on text only.
EDIT:
Actually it looks like you are already using fixed widths after I looked closer at your image. The text is centered in each LI, that is what I was suggesting but some people don’t like the spacing different on each side of the text.
OK, I’ll take your word for it that this what is being requested, although that’s not how I read it:
If that’s the only requirement, body classes should be enough, but sorry if I missed something further up.
I think our posts overlapped, I just explained that above too. It’s using js
Yeah, that was a silly comment. I knew they were using JS, it’s just the datails of how they are using it that I’m not sure, and I was too lazy to look. The first thing I always do is disable JS to see what effect that has. I don’t really see why they are using JS there at all, but again, I may not have looked closely enough.
Current top level li and current sub level li?
I don’t remember exactly how I did it. But I do remember I had to double up some classes here and there. And I do remember I wasn’t able to truly figure it out until I made like 4 test pages (2 dif top level and 2 dif sub levels). I do remember originally thinking I did it and handed it off to him (like three times) only to find out I hadn’t thought of this or that.