如何设置在CSS和HTML中创建的下拉菜单的超时 [英] How to set timeout for Dropdown menu created in CSS anad HTML
问题描述
我创建了一个名为结果分析的网络表单。形式分为课程明智和主题明智。当用户将鼠标光标移动到主题上时，出现下拉列表（B.E，M.C.A，M.B.A和M.Tech）。当用户将光标移动到B.E时，将出现B.E（AU，CS，EC，ME，CV，..）下的下一个下拉列表。我的问题是我无法在B.E下拉菜单中选择除第一个选项之外的选项。一旦我尝试将鼠标光标移动到其他选项上，显示就会消失。有没有可用的选项，以便我可以设置时间（如1秒），允许用户选择其他选项。
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 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>
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;
}
以下是结果分析网页表格的截图：
^ ]
推荐答案
我刚刚从面板的样式中删除了z-index，看看它是如何工作的 - https://jsfiddle.net/taditdash/wg2gspLb/1/ [ ^ ]
I just removed thez-indexfrom the style ofpanels, and see how it is working - https://jsfiddle.net/taditdash/wg2gspLb/1/[^]
这篇关于如何设置在CSS和HTML中创建的下拉菜单的超时的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
