Forum Moderators: not2easy
I have a dynamic horizontal menu that i want to use opacity settings on.
Ie.
MainOption1
SubItem1
SubItem2
SubItem3 -> SubSubItem1
..................SubSubItem2
..................SubSubItem3
So for example above i have clicked on mainoption1 and moved my mouse over SubItem3 to reveal SubSubItems
In the above example using opacity filter SubSubItems are only seen where they overlap Subitems ie the topleft corner as though there was an overflow issue? If i do not use opacity it all is visible fine.
[edited by: t0ny at 6:07 pm (utc) on June 9, 2005]
We'll need to see the exact code you're using in order to really help diagnose this problem. What I can say now is to remember that opacity inherits, so if you, for instance, set the opacity on your UL tags in a way that applies it to ALL the UL tags in the menu, each nested list will inherit it's parent's opacity before then applying it's own. This will have a cumulative fading with each progressive nesting.
For instance, say you had this markup for your list:
<ul>
<li>Main Item 1
<ul>
<li>Sub Item 1</li>
<li>Sub Item 2</li>
<li>Sub Item 3</li>
</ul>
</li>
<li>Main Item 2
<ul>
<li>Sub Item 1</li>
<li>Sub Item 2</li>
<li>Sub Item 3</li>
</ul>
</li></ul>
This creates a menu with two main items and three sub items beneath each one.
If I used the following CSS...
ul{
opacity:0.5;
}
...here's what would happen.
First, the 50% opacity would apply to the main UL, causing everything in it to render 50% opaque. Next, it would apply the opactity AGAIN to the nested ULs, making everything in side of them not 50% opaque, but 25% opaque, or 50% of 50%. Nest a third level of lists in there and the opacity for the inner-most lists drops to 12.5%; nearly invisible.
So step one would be to check and see if this is what is happening with your layout. If not, post your code for us to see.
cEM
