R

Your point about Opera is well taken, and provided another clue. I am using IE8 and the visibility method doesn’t seem to work very well. But when I use “compatiblitiy mode”, both versions work as expected.

I liked your comment about coding for IE6 (like distributing on VHS because not everyone has a DVD player). I hope the compatiblity issues can someday be resolved and level the field for different browsers. Until then, is it all “hit or miss” without extreme coding? The idea of trying to accommodate every browser seems daunting (for a non-commercial site).

By the way, on one of the menus is a link to some primitive Blend/Encoder stuff. Maybe could give you an idea for another Expression newsletter project. I do enjoy and learn from your tutorials.

RIchard

In the first comment you mention that when you got the menu items to drop down the text didn’t show until you hovered over the items. The only way I can imagine that would happen would be if your text colour matched the background colour for the non-hover state. There is no code in the tutorial that hides the text in any other way. I’d like to see your code to see what is going on. I’m a curious guy.

To your second point about using display instead of visibility to hide the drop-down menu: Test your menu in Opera. Opera is a very “unforgiving” browser – in other words it is a bit of a stickler for proper code. You’ll see that when you use the block technique, the drop-down areas leave remnants after being collapsed. This is because you are not actually hiding the drop-down portions but instead refusing to define an area for them to occupy. This works most of the time but can also lead to some weird results.

The display technique may work but is not as safe as the visibility technique.

Glad to see you are learning something from my tutorial. Feel free to ask any other questions that may arise. I’m always ready for a challenge!

By relating the codes in the “hide” and “show” sections, it seems to be working again.

ul li ul {

display: none;
}
ul li:hover ul {
display: block;

}

Sorry for any confusion I may have scattered.

Richard (coding at the “hopes this works” level)

Once I had the display to block handled the menu worked, pretty well. However, when I would hover over the main menu item, the drop down would drop down, but without text until I moused over the drop down list items themselves. Then they would show the text.

I can only imagine what it must be like to include EVERY step in a long sequence (especially one that is put up somewhere else). By combining some sources I came across that Block Display feature again.

When the mouseover triggers the “a” instead of making the link “visible” it seems to work better if it triggers “block display”. Now the drop down is smooth.

ul li:hover ul {
visibility: visible;
background-color: ;
display: block;
}

Thanks again for helping me with expression web and css. Motivating a newbie to try something is big, and appreciated. I look forward to the next installment.

Richard

You are actually just missing one line of code: You have to set the display attribute of the anchor as “block”, otherwise it gets treated as an inline element. So, in ul li a add “display: block;” and you are good to go.

You can find a full working version of the menu here and it’s CSS here for reference.