Okay, I’ll try that.
Would you use divs to set up this kind of “table”? A little tricky with the rows with bg color.
If you didn’t want the alternate coloured rows then I would have used a definition list as that seems the most semantic for that type of structure.
However, with the alternate coloured rows then a table is probably the easiest element to use and not that bad semantically as it is a row and column type layout.
Wow, okay. With a line on the right border of the left column?
The cell on the left would be a th and the cell on the right a td. Then you would just set th{border-right:1px solid #000}.
Gotcha!
Paul, can this drop down (guest/guest) be done in CSS or easier to use Superfish or something like that?
It’s just a standard drop down but you’d need to align the transparent images carefully. Of course IE6 will need either solid images or the alpha image loader filter but that is really clunky on drop downs.
J(ust out for the day now back this evening)
Cool…is there a page online or on SP for reference? Or, would love to hire you to do it (woops…did I say that?).
Thanks Ralph. Isn’t that a page about sitemaps?
Thanks Ralph. I was wondering if there was somewhere that explained standard drop downs so I could give it a try.
Also, do you know why the text on the top of the contact form here won’t turn white? Argh, I’ve tried #left p, .top, and other things but the parent property keeps taking over the size and color only.
O, I hoped that’s what the link above would do. Well, basically you have an unordered list as your top level links. Within those link items, you can nest another unordered list that has your drop down links.
Then you set up some CSS rules. Basically, you set the nested lists not to display (display:none) or move them way off screen with a negative left setting, for example.
Then you set a rule that when you hover over the top level list items, that nested list jumps into view—by changing the CSS positioning. You tell the nested list to position itself onscreen just below the top level menu item.
Also, do you know why the text on the top of the contact form here won’t turn white?
Do you mean yellow? (There’s no rule there to make it white.)
The rule that is applying is
.twoColFixRtHdr #mainContent p, .twoColFixRtHdr #mainContent p.mission {
color: #330000;
font-size: 0.8em;
line-height: 1.7em;
padding: 0 40px 0 30px;
}
That is a more specific rule than
#left p {
color: #FFFFCC;
}
So change your rule to something like
#mainContent #left p {
color: #FFFFCC;
}
Hi,
This is an old example of mine but it works well and should be easy to understand. The ony difficult part is that it is a multiple flyout which means that we have to add extra rules because when you set a nested ul to visible all other nested uls will show so you have to turn the others off.
The same thing applies to styles set on one hovered lists so you have to counteract on others. In a multiple flyout you just have to keep track of what’s being done on the current menu and then cancel it necessary of the nested one.
It’s just basic css that would apply to nested elements but you can get into a mess quite easily.
If you can’t make progress I’ll knock up a demo that fits your site but I’d like you to try first 
Thank you both.
Ralph, thought it was the lowest one down on the list got priority. Forgot it was the more specific one. Thank you.
Paul…absolutely…I’ll give the drop downs a try.
I made some progress but styling is terrible. Here it is. (guest/guest). Should look similar to [URL=“http://www.charlotteswebservices.com/temp/http-equinection/http/images2/dropdown.jpg”]this!
Well you’ve got the bare bones working. The rest is just decoration
You want background images on the nested ul and not the individual list items. Use an oversized transparent png for the gradient effect transparency (and just a solid colour for ie6).
The top level will need to have a fixed pixel height as you need to match the gradient exactly for when the rollover shows.
It would be easier to give the dropdowns all the same width rather than fluid width as it is easier to code that way although it is possible to make them adjust to content length but just a bit more fiddly.
I’ll have a look at the code later on and see if I can get it closer to what you want.
That looks better
To finish it off you’ll probably have to float the anchors and give them a height so that the background image meets the sub list. Remember to cancel out anything that you apply on the top level from cascading into the sublist such as the height and the background image on the top level.
To keep the top level highlighted while traversing the sublist you would turn the anchor on via the li:hover and not the a:hover.
li:hover a{background:url( etc…}
Then turn it off for sublists with:
li:hover li a{background:none}
etc.
Shoot…I’m afraid I’m not following you on that one.
Probably need to change the color when hovering over each subnav item too.