DropShadow hides my menu items on back

I used dropshadow and when I pull down menut item to navigate to other page I cannot click on it as it's hide behind dropshadowextender?

On the menu element, try setting:

<asp:Menu id="Menu1" style="position:relative:z-index:5" ... >

I tried this and this does not work! The shadow override the menus.

This worked when I removed this tag:

<

atlasToolkit:DropShadowExtenderID="dse"runat="server"><atlasToolkit:DropShadowPropertiesTargetControlID="Panel1"Width="5"Rounded='true'Opacity=".75"TrackPosition="true"ID="dsBehavior"/>

</

atlasToolkit:DropShadowExtender>

Yes I had to remove the shadow to get this going even though my menu has:

<asp:MenuID="Menu1"runat="server"DataSourceID="SiteMapDataSource1"Font-Bold="true"style="position:relative; z-index:5">

It's the 2nd level menus that are hidden underneath the shadow. I think it completely ignores the Z-index of the menu

That worked for me but I have more question,

1) how to make size of both panel and table look same so that I have good effect of drop shadow, as with the below code my panel is too big and table is inside the panel. I tried to make size of both table and panel same still does not work.

2)How to use different color besides black for shadow?

<

asp:PanelID="pnlTable"runat="server">
<tableclass="table">
<tr>
|<tdcolspan="2"class="heading">Search Parts By Supplier or Return Parts</td>
</tr>
<tr>
<tdclass="tdheading">Supplier ID</td>
<td><asp:TextBoxID="txtsearchsuppID"runat="server"Width="208px"></asp:TextBox></td>
</tr>
<tr>
<tdclass="tdheading">From Date<asp:TextBoxID="txtfromdate"runat="server"></asp:TextBox>
<asp:PanelID="pnlFrom"runat="server">
<asp:CalendarID="fromClnd"runat="server"OnSelectionChanged="fromClnd_SelectionChanged">
</asp:Calendar>
</asp:Panel><cc1:CollapsiblePanelExtenderID="CPEfromClnd"runat="server"><cc1:CollapsiblePanelPropertiesCollapseControlID="txtfromdate"Collapsed="True"AutoCollapse="True"AutoExpand="True"CollapsedSize="0"ExpandControlID="txtfromdate"ExpandedSize="180"TargetControlID="pnlFrom"/></cc1:CollapsiblePanelExtender></td></tr>
<tr>
<tdcolspan="2"><asp:ButtonID="btnSearch"runat="server"Text="Search"OnClick="btnSearch_Click"/>
</td></tr>
</table></asp:Panel>

The DropShadow isn't ignoring the zIndex of the menu - it has no knowledge of it. I suspect that the sub-menu items created by the ASP.NET menu control don't have zIndexes on them, so they default to 0 which causes them to show up beneath the dropshadow items.

The Sub Menus don't have a style property to adjust unlike the asp:Menu. They have a CssClass which is what I'm assuming you mean.

I removed the following off the panel to show the underlying shadow.

CssClass="dropShadowPanel"

Then I placed z-index: 155 everywhere for the menu.

<asp:MenuID="Menu1"runat="server"DataSourceID="SiteMapDataSource1"StaticDisplayLevels="1"Font-Bold="true"Style="z-index:115"><StaticMenuItemStyleCssClass="MenuStyle"VerticalPadding="2px"/><DynamicHoverStyleCssClass="MenuStyle"BackColor="#e1ecfc"/><DynamicMenuItemStyleCssClass="MenuStyle"BackColor="#e1ecfc"/></asp:Menu>

.MenuStyle

{FONT-SIZE:8pt;VERTICAL-ALIGN:top;FONT-FAMILY:verdana;PADDING-BOTTOM:5px;z-index:115}

The menu appears beneath the shadow regardless of all the combinations I have tried.

A quick fix but I lose screen space is:

StaticDisplayLevels

="2"

Oh - ok. Yeah, the dropshadow is absolutely positioned. Since your items are statically positioned, they have a different zIndex stack. Sorry, I didn't think of that. Try adding "position:relative" to your MenuStyle class (and specify that on your Menu control's CssClass property too).

No you're not slipping. You mentioned that before. :)

It's beyond me. I've gone throught the 2 stylesheets I have and I can't figure it out.

I'm down to:

<asp:MenuID="Menu1"runat="server"DataSourceID="SiteMapDataSource1"StaticDisplayLevels="1"Font-Bold="true"Style="position:relative; z-index:30"><StaticMenuItemStyleCssClass="MenuStyle"VerticalPadding="2px"/><DynamicHoverStyleCssClass="MenuStyle"BackColor="#e1ecfc"/><DynamicMenuItemStyleCssClass="MenuStyle"BackColor="#e1ecfc"/></asp:Menu>

.MenuStyle

{FONT-SIZE:8pt;VERTICAL-ALIGN:top;FONT-FAMILY:verdana;PADDING-BOTTOM:5px;position:relative;z-index:30}

On load up it flashes ontop then quickly reverts underneath. I'musing IE6.0 SP2. I'll send the source if you are really keen! :)

I have same issue like Glyder, on load up it flashes for a second for many Atlast control like dropshadow, collapsible Panel etc.
second issue is I loose my css style sheet setting any where I use atlas control. when it post back it settings are applied.
Example:

Suppose I applied css="table" for table it does not take affect until first post back, how to take care of this both problem.This will be really helpful if we can figure this out.

Hmm - yeah I'd like to take a look at this. If you could send me a repro, I'd appreciate it.
what is repro? my code?
<atlas:ScriptManagerID="SM"EnablePartialRendering="true"runat="server"></atlas:ScriptManager><atlas:UpdateProgressID="Progress"runat="server"><ProgressTemplate>

Updating Please Wait...

<imgalt="Wait"id="ImgWait"src="Images/Wait_indicator_flower.gif"/></ProgressTemplate></atlas:UpdateProgress>
<atlas:UpdatePanelID="Up1"runat="server"><ContentTemplate><asp:PanelID="pnlParent"DefaultButton="btnaddparSupp"runat="server"Visible="False"><tableclass="table"><tr><tdcolspan="2"class="heading1">

Supplier Maintenance - Setting up New Supplier Information

</td></tr><tr><tdstyle="width: 153px"align="left">

Supplier Name

</td><tdstyle="width: 334px"align="left"><asp:TextBoxID="txtparSuppName"runat="server"></asp:TextBox><asp:RequiredFieldValidatorID="ReqParSuppName"runat="server"ControlToValidate="txtparsuppName"ErrorMessage="Req"></asp:RequiredFieldValidator></td></tr>

<

tr><tdalign="center"colspan="2"class="tdheading"><asp:ButtonID="btnaddparSupp"runat="server"Text="Add"/><asp:ButtonID="btncancelparSupp"runat="server"CausesValidation="False"EnableViewState="False"Text="Cancel"/></td></tr></table></asp:Panel></ContentTemplate><Triggers><atlas:ControlEventTriggerControlID="btnParent"EventName="Click"/></Triggers></atlas:UpdatePanel>

The XHTML you're using including the menu, the DropShadowExtender, and the panel it's targeting please.

Also, please use a smaller font size when pasting in code. Thanks.

Hi, I've the same problem as you, and I found a workaround:
I have a panel where my menu is:

<asp:Panel ID="menuPanel" runat="server" CssClass="menuDiv" Style="z-index:115">
 <asp:Menu ID="Menu1" runat="server">
 <Items>
 ... (items)
 </Items>
 <StaticHoverStyle BackColor="#990000" ForeColor="White" />
 </asp:Menu>
</asp:Panel>

then other panel for the content of the page:

<asp:Panel ID="mainPanel" runat="server" CssClass="mainDiv">
 ...
</asp:Panel>

then I apply the shadow to the mainPanel, but also I have to apply shadows to menuPanel (otherwise doesn't work):

<cc1:DropShadowExtender ID="DropShadowExtender1" runat="server">
 <cc1:DropShadowProperties TargetControlID="mainPanel" />
</cc1:DropShadowExtender
<cc1:DropShadowExtender ID="DropShadowExtender2" runat="server">
 <cc1:DropShadowProperties TargetControlID="menuPanel" />
</cc1:DropShadowExtender>

And it works!!! but that's not the perfect way. As you can see I have to apply shadow on both panels, and in the menuPanel I have to put Style="z-index:115", and the most strange is that if a put z-index in a CssClass (menuDiv in my case) i doesn't work, I have to put it in the control itself.

Haha, thanks Matias I was able to get around a similar issue by using your method.