Link to home
Create AccountLog in
Avatar of bcolladay
bcolladayFlag for United States of America

asked on

CSS Drop-Down Menu doesn't work right (only in Webkit browsers) when on top of a DIV with an update panel inside it.

I will try and simplify this as much as possible...I have web page in development with two CSS styled Drop Down menu (suckerfish model) I have it on two separate MasterPages.  On the index type master page the secondary menu is in a div that is on top of a div that contains an UpdatePanel for changing the content of that DIV.  On the standard pages the menu did is on top of a plain content DIV.  Ste menu works on the standard pages, and the index master page can be fixed by removing the AJAX content from the updatepanel DIV.

So in a Chrome of Safari browser, when you hover over the secondary menu on the index page, the dropdown works but if you try to enter the list, the dropdown disappears.  Firefox and IE works fine.  Also the menu on the standard pages works fine on Chrome & Safari.  Also, if you slide down very quickly with the cursor it will sometimes "let you in" to the dropdown list.



If I remove the following code from the DIV below the menu, it works.
<asp:Content ID="SwitchCont" ContentPlaceHolderID="ContentSwitch" Runat="Server">
<asp:Timer runat="server" id="UpdateTimer2" interval="12000"
          ontick="UpdateTimer_Tick2" />
        <asp:UpdatePanel runat="server" id="TimedPanel2" updatemode="Conditional">
                <asp:AsyncPostBackTrigger controlid="UpdateTimer2" eventname="Tick" />
            <asp:Label ID="SwitchContent" runat="server" Text=""></asp:Label>
                <asp:HiddenField ID="HiddenField2" runat="server" />

Open in new window

Avatar of mreuring
Flag of Netherlands image

Link to home
Create an account to see this answer
Signing up is free. No credit card required.
Create Account
Avatar of bcolladay


Fantastic!  Worked great!

I guess I will read up on z-index, not usually on my radar.

Great, easy to understand solution!