问题：
将下拉菜单的Masterpage从悬停转换为onclick
左宁
我只是在学习这一切，所以请忍耐一下。我已经创建了一个母版页，现在下拉菜单通过悬停在上面打开。有没有一种方法，我可以转换这个项目打开菜单和子菜单点击他们，而不是悬停在他们。我已经看了很多关于这个主题帖子，但没有任何一个能起作用。这个项目目前没有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;
}
}
共有1个答案
沈弘盛
删除导航A：悬停{背景-颜色：白色；颜色：灰色；}
类似资料：
-
问题内容： 好的，所以我需要的很简单。 我已经在导航栏中设置了一些下拉菜单（使用），并且工作正常。 问题是它可以工作“ ”，而我希望它可以工作“ ”。 有内置的方法吗？ 问题答案： 最简单的解决方案是使用CSS。添加类似…
-
问题内容： 我试图做一个简单的CSS下拉菜单。当您将鼠标悬停在链接上时，我无法实现下拉子菜单。以下是我的HTML和CSS规则，谢谢。 问题答案： 尝试这个： 问题是您的菜单ul是可见的（始终），但是由于this规则的选择器，所以li里面的li是（始终）不可见。 请记住，visible：hidden隐藏元素，但仍在DOM中占用空间，而display：none隐藏元素并将其从页面元素流中移除 另外，您
-
问题内容： 我想让我的Bootstrap菜单在悬停时自动下拉，而不是必须单击菜单标题。我也想丢掉菜单标题旁边的小箭头。 问题答案： 我基于最新的（v2.0.2）Bootstrap框架创建了一个纯悬停下拉菜单，该框架具有对多个子菜单的支持，并认为我会将其发布给以后的用户：
-
我正在尝试用html和CSS制作一个下拉菜单。我遵循了一吨教程，但他们似乎对我不起作用，我不知道为什么。我有一个菜单栏，总是显示在屏幕的顶部，我想要另一个显示时，你悬停在左边的汉堡菜单。这是我当前的代码： 和CSS： 有谁能告诉我为什么它不起作用吗？
-
标题是冗长的，有点难以理解，但想法是我有一个下拉菜单，当产生下拉菜单的主要链接悬停在上面，它们的背景颜色和文本颜色改变，菜单出现。问题是，当你移动光标到菜单上点击刚刚出现的链接时，上面的主要链接的悬停效果消失了。菜单保持和工作只是很好，但我想理想的链接，产生菜单的悬停，以保持它的悬停效果，而菜单是向上的。 这是我所说的代码... CSS HTML 这里有一个小提琴的代码在起作用... https:
-
我自己处理悬停事件来添加一个三角形指针和一个水平对齐的子菜单栏。当单击顶部菜单时，它可以很好地显示和导航到子菜单。问题是在悬停期间，试图将鼠标移动到子菜单时，子菜单栏会消失。 TIA 代码： null null