我只是在学习这一切，所以请忍耐一下。我已经创建了一个母版页，现在下拉菜单通过悬停在上面打开。有没有一种方法，我可以转换这个项目打开菜单和子菜单点击他们，而不是悬停在他们。我已经看了很多关于这个主题帖子，但没有任何一个能起作用。这个项目目前没有javascript，我也从来没有尝试过javascript，所以如果可以避免使用Java，那就太好了。如果没有，那么你能给我指那个方向吗。
这是我的主页（只是其中的一小部分）
<!DOCTYPE html>
<html>
<head runat="server">
<title>Union County Dispatch Website</title>
<link rel="stylesheet" href="MenuStyle.css" />
<style>
body {
background-color:gainsboro;
background-size:cover;
background-attachment:fixed;
}
</style>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<div>
<nav>
<div><img src="~/img/logo2011transparent4.png" runat="server" /></div>
<label class="toggle" for="drop">Menu</label>
<input type="checkbox" id="drop" />
<ul class="menu">
<li><a href="#">Main Menu</a>
<ul>
<li><a href="#">911 Calltaking Polices</a>
<ul>
<li><a href="<%=ResolveUrl("~/County_Polices/Cty_911_calls.aspx")%>">911 For County Police</a></li>
<li><a href="#"></a></li>
<li><a href="<%=ResolveUrl("~/Berkeley_Heights/BH_911_calls.aspx")%>">911 For Berkeley Heights</a></li>
<li><a href="#"></a></li>
<li><a href="<%=ResolveUrl("~/Cranford/Cr_911_calls.aspx")%>">911 For Cranford</a></li>
<li><a href="#"></a></li>
<li><a href="<%=ResolveUrl("~/Fanwood/Fa_911_calls.aspx")%>">911 For Fanwood</a></li>
<li><a href="#"></a></li>
<li><a href="<%=ResolveUrl("~/Garwood/Ga_911_calls.aspx")%>">911 For Garwood</a></li>
<li><a href="#"></a></li>
<li><a href="<%=ResolveUrl("~/Kean/Kean_911_calls.aspx")%>">911 For Kean Univ.</a><li>
<li><a href="#"></a></li>
<li><a href="<%=ResolveUrl("~/Kenilworth/Ke_911_calls.aspx")%>">911 For Kenilworth</a></li>
<li><a href="#"></a></li>
<li><a href="<%=ResolveUrl("~/Roselle_Park/RP_911_calls.aspx")%>">911 For Roselle Park</a></li>
<li><a href="#"></a></li>
<li><a href="<%=ResolveUrl("~/Scotch_Plains/Sc_911_calls.aspx")%>">911 For Scotch Plains</a></li>
<li><a href="#"></a></li>
<li><a href="<%=ResolveUrl("~/Winfield/Wi_911_calls.aspx")%>">911 For Winfield</a></li>
</ul>
<li><a href="#">CAD Searches</a>
<ul>
<li><a href="<%=ResolveUrl("~/Sql_Searches/Phone_System_Search.aspx")%>">CAD Search For Backup Phone #'s List</a>
<li><a href="#"></a></li>
<li><a href="<%=ResolveUrl("~/Sql_Searches/Cancellation_Codes.aspx")%>">CAD Search For Cancellation Codes</a>
<li><a href="#"></a></li>
<li><a href="<%=ResolveUrl("~/Sql_Searches/Dispoisiton_Code_Search.aspx")%>">CAD Search For Disposition Codes</a>
<li><a href="#"></a></li>
<li><a href="<%=ResolveUrl("~/Sql_Searches/Hospital_Search.aspx")%>">CAD Search For Hospital Codes And Phone Numbers</a>
<li><a href="#"></a></li>
<li><a href="<%=ResolveUrl("~/Sql_Searches/Skill_search.aspx")%>">CAD Search For Officers Special Skills/Training</a></li>
<li><a href="#"></a></li>
<li><a href="<%=ResolveUrl("~/Sql_Searches/Out_Of_Service_Codes.aspx")%>">CAD Search For Out Of Service Codes</a></li>
<li><a href="#"></a></li>
<li><a href="<%=ResolveUrl("~/Sql_Searches/Personnel_Search.aspx")%>">CAD Search For Personnel ID And Cell #'s</a></li>
<li><a href="#"></a></li>
<li><a href="<%=ResolveUrl("~/Sql_Searches/Powerline_Command_Search.aspx")%>">CAD Search For Powerline Commands</a></li>
<li><a href="#"></a></li>
<li><a href="<%=ResolveUrl("~/Sql_Searches/FireEMS_Problem_Natures.aspx")%>">CAD Search For Problem Nature Codes For Fire/EMS</a></li>
<li><a href="#"></a></li>
<li><a href="<%=ResolveUrl("~/Sql_Searches/Law_Problem_Natures.aspx")%>">CAD Search For Problem Nature Codes For Law</a></li>
</ul>
</ul>
<li><a href="<%=ResolveUrl("~/Default.aspx")%>">Home</a>
</ul>
<ul class="nav navbar-nav">
<li style="padding-top: 1px; padding-left: 20px;"><asp:TextBox runat="server" ID="TxtSearch" CssClass="form-control" Font-Size="Medium" Width="200px" OnTextChanged="TxtSearch_TextChanged"></asp:TextBox></li>
<li style="padding-top: 1px; padding-left: 8px;"><asp:Button runat="server" ID="BtSearch" Text="Search" CssClass="btn" OnClick="BtSearch_Click" Font-Bold="True" Font-Size="Medium" /></li>
</ul>
</nav>
<br />
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<asp:ContentPlaceHolder ID="ContentPlaceHolder2" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>
这是我的css代码：
nav {
top: 0;
left: 0;
position: fixed;
width: 100%;
background-color: rgba(0,0,0,0.6);
}
nav ul {
float: left;
padding: 0;
margin: 0;
position: relative;
list-style: none;
}
nav ul li {
display: inline-block;
float: left;
position: relative;
}
nav a {
display: block;
padding: 3px 15px;
color: white;
font-size: 17px;
font-weight: bold;
text-decoration: none;
font-family: Arial;
}
nav a:hover {
background-color: white;
color: gray;
}
nav ul ul {
display: none;
position: absolute;
width: 300px;
top: 26px;
}
nav ul li:hover > ul {
display: inherit;
}
nav ul ul li {
float: none;
display: list-item;
position: relative;
background-color: rgba(0,0,0,0.6);
}
nav ul ul ul {
display: none;
position: absolute;
left: 300px;
top: 0px;
max-height: 1000%;
overflow-y: auto;
}
nav ul ul ul li {
float: none;
display: list-item;
position: relative;
}
.toggle, [id^=drop] {
display: none;
}
@media all and (max-width:600px) {
.menu {
display: none;
}
.toggle {
display: block;
color: white;
background-color: rgba(0,0,0,0.6);
text-decoration: none;
padding: 20px;
}
.toggle:hover {
background-color: white;
color: dimgray;
}
#logo {
display: block;
float: none;
}
[id^=drop]:checked + ul {
display: block;
}
nav ul li {
display: block;
width: 100%
}
nav ul ul {
float: none;
position: static;
}
nav ul ul ul {
float: none;
position: absolute;
}
}
删除导航A：悬停{背景-颜色：白色；颜色：灰色；}
