How to set timeout for Dropdown menu created in CSS anad HTML

Question

1.00/5 (1 vote)

See more:

I have created a webform called result analysis. The form divides into course wise and subject wise. When the user moves the mouse cursor onto subject wise the drop down list appears(B.E, M.C.A, M.B.A and M.Tech). When user moves cursor onto B.E the next dropdown list under B.E(AU, CS, EC, ME, CV,..) appears. My problem is I am not able to select the option other then 1st option under B.E dropdown menu. The display just disappears as soon as I try to navigate my mouse cursor onto other options. Is there any option available so that I can set time(like 1sec) which allows the user to select other options.

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link rel = "StyleSheet" href = "StyleSheet.css" />
</head>
<body>
    <form id="form1" runat="server">
    <div style="height: 398px">
    
        <br />
                                                                                                       
        <asp:Label ID="Label1" runat="server" Font-Size="XX-Large" 
            Text="Result Analysis"></asp:Label>
        <br />
        <br />
   
        <asp:Panel ID="Panel1" runat="server" 
            style="z-index: 1; left: 41px; top: 100px; position: absolute; height: 56px; width: 1050px">
            <ul id = "Result">

	<li class = "Size" style="margin-removed 33px; width: 162px;"> Course Wise
    <ul>
            <li class = "SizeSmall">B.E
            <ul>
            <li><asp:LinkButton ID = "LinkButton3" runat = "server" Width = "20%">AU</asp:LinkButton></li>
            <li><asp:LinkButton ID = "LinkButton4" runat = "server" Width = "20%">CS</asp:LinkButton></li>
            <li><asp:LinkButton ID = "LinkButton5" runat = "server" Width = "20%">CV</asp:LinkButton></li>
            <li><asp:LinkButton ID = "LinkButton6" runat = "server" Width = "20%">EC</asp:LinkButton></li>
            <li><asp:LinkButton ID = "LinkButton7" runat = "server" Width = "20%">IS</asp:LinkButton></li>
            <li><asp:LinkButton ID = "LinkButton8" runat = "server" Width = "20%">IP</asp:LinkButton></li>
            <li><asp:LinkButton ID = "LinkButton9" runat = "server" Width = "20%">ME</asp:LinkButton></li>
            </ul>
            </li>
            <li class = "SizeSmall"><asp:LinkButton ID = "LinkButton10" runat = "server"> MCA</asp:LinkButton></li>
            <li class = "SizeSmall"><asp:LinkButton ID = "LinkButton11" runat = "server"> MTech</asp:LinkButton></li>
            <li class = "SizeSmall"><asp:LinkButton ID = "LinkButton12" runat = "server"> MBA</asp:LinkButton>.</li>
     </ul>
     </li>
        <li class = "Size" style="width: 231px; margin-removed 33px"> Subject Wise</li>
    </ul>
            <br />
            <br />
        </asp:Panel>
    
        <asp:Panel ID="Panel2" runat="server" 
            style="z-index: 1; left: 10px; top: 174px; position: absolute; height: 19px; width: 1089px">
        </asp:Panel>
    
    </div>
    </form>
</body>
</html>

CSS

div ul ul 
{
	display: none;
}
div ul li:hover > ul 
{
	display: block;
}
div ul li ul:hover > ul 
{
	display: block;
}
.TextAlign
{
    text-align : center;
}
.Position
{
     position : relative;
     float : left;
     list-style : none;
}	
#Result ul
{
    list-style: none;
}
#Result {
    float: left;
    z-index: 1;
    left: 225px;
    top: 0px;
    position: absolute;
    height: 37px;
    width: 466px;
}
#Result > li {
    float: left;
}
.Size
{
    font-size :x-large;
}
.SizeSmall
{
    font-size : large;
}

Below is the screenshot of result analysis webform :
^]

Posted 30-Apr-15 3:08am

partha143

Updated 30-Apr-15 18:02pm

v2

Add a Solution

Comments

Sergey Alexandrovich Kryukov 1-May-15 3:08am

The whole idea is wrong. The user does not need any delay. This would be extremely inconvenient, keep the user nervous.
—SA

partha143 1-May-15 6:57am

So what is the solution for the dropdown menu problem which I am facing?

Sergey Alexandrovich Kryukov 1-May-15 10:49am

You should not run into this problem, by design...
—SA

partha143 1-May-15 11:01am

I am a newbie. Could you please let me know where I am going wrong. Thank you.

Sergey Alexandrovich Kryukov 1-May-15 11:11am

I don't know your exact goals and requirements. Try to create UI without any time effects at all, fancy transitions and other stuff. Later you can add some...
—SA

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 1-May-15 9:26am

I am not sure, but I suspect that it is due to the styles. May be due to z index or something. Remove all your styles and try once.

partha143 1-May-15 10:40am

I removed all the styles other then Hover(which I need to display block when user navigates mouse cursor) but still no luck. Please help

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 1-May-15 10:46am

Can you create a jsfiddle demo with the html generated?

partha143 1-May-15 10:59am

https://jsfiddle.net/wg2gspLb/

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 1-May-15 11:09am

See my answer.

partha143 1-May-15 11:23am

That's what I exactly needed Tadit. Thanks a ton :)

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 1-May-15 11:27am

Most welcome. :)

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) · Accepted Answer · 2015-05-01T05:09:00

Solution 1

I just removed the z-index from the style of panels, and see how it is working - https://jsfiddle.net/taditdash/wg2gspLb/1/[^]

Posted 1-May-15 5:09am

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)