我在 asp.net 4.0 Web 应用程序中使用标准的 asp.net 菜单。澄清一下，它是一个标准的 Web 应用程序，它不是任何可用的 MVC 应用程序版本。
这是我遇到的问题。
这确实是一个相当简单的设置。我有 CSS 覆盖菜单的各种状态，:link、:visited、:hover 和:active。
正如您所怀疑的那样，这些状态之间存在明显的差异。此外，我运行了一些 javascript 来突出显示当前页面的链接，这是另一个相当正常的活动。到目前为止，没有什么神秘或晦涩的。
当人们开始点击菜单时，问题就来了。假设您在主页上。第一个菜单项被突出显示。现在让我们说 - 无论出于何种原因，只有用户可以想出 - 您单击并拖动其中一个菜单项。它不必很远，它可以只有一两毫米。预期的行为是拖动将否定单击，页面将保持在原处，并且单击拖动的菜单项将返回其先前的状态。
实际发生的是拖动否定了单击，页面保持在原位，并且单击拖动的菜单项似乎保留 :active 样式（如果存在），或者 :hover 样式（如果 :active 样式不存在）。
复制：
不过，这似乎是 Asp.Net 菜单中的一个错误。
为了尝试在我的项目之外复制问题，我使用 VS2010 中的模板创建了一个沼泽标准 Asp.NET Web 应用程序项目。
我在 Site.css 中更改了一行 - 具体来说，我将 div.menu ul li a:active 中的 :active 样式更改为 color: red;
然后我启动应用程序，单击主菜单项并将其拖动几毫米。
果然，当我放开鼠标按钮时，菜单项卡住了 :active 样式。
测试
我最初在 IE8 中发现了这个问题，但是在 IE9 以及 Firefox/Aurora 中仍然存在。
然而，Chrome 和 Safari 大部分情况下会将菜单项恢复到其预期状态。它们都在元素的边缘留下了发光的效果。我还没有在 Opera 中测试过。
....利润？
我已经在网上搜寻了解决此问题的方法，但找不到。事实上，很难找到该问题的参考资料，我最接近的是 Sitepoint 的参考页面之一，其中提到了类似于 IE7 中的错误的内容。
http://reference.sitepoint.com/css/pseudoclass-hover
有人有想法么？
代码
这是 Site.Master 中的代码 - 我已重命名菜单项以保护罪魁祸首：
<div class="topnav">
<asp:menu id="topnav" runat="server" orientation="Horizontal" renderingmode="List" skiplinktext="" maximumdynamicdisplaylevels="1" viewstatemode="Enabled" >
<items>
<asp:menuitem navigateurl="~/Default.aspx" text="Home" value="home"></asp:menuitem>
<asp:menuitem navigateurl="~/Overview.aspx" text="Overview" value="overview"></asp:menuitem>
<asp:menuitem navigateurl="~/Benefits.aspx" text="Benefits" value="benefits"></asp:menuitem>
<asp:menuitem navigateurl="~/Hardware.aspx" text="Hardware" value="hardware"></asp:menuitem>
<asp:menuitem navigateurl="~/SDK.aspx" text="Develop" value="SDK"></asp:menuitem>
</items>
</asp:menu>
</div>
在此期间，我还将发布适用于此菜单的 CSS。
.right .topnavcont
{
width: 767px;
background-color: #dddddd !important;
height: 22px;
}
.topnav #topnav li
{
float: left;
}
.topnav
{
background-color: #ddd;
line-height: 22px;
float: right;
margin-right: 11px;
background: url(../img/shadow.gif) repeat-y top right;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #777;
text-align: center;
}
.topnav li
{
width: 109px;
}
.topnav a:link, .topnav a:visited
{
color: #777;
display: block;
background-image: url(../img/bg_n-s.gif);
background-repeat: repeat-x;
text-decoration: none;
visibility: visible;
}
.topnav a:hover
{
color: #fff !important;
background-image: url(../img/bg_h-s.gif);
display: block;
visibility: visible;
}
.topnav a:active
{
background-image: url(../img/bg_a-s.gif);
display: block;
color: #fff;
visibility: visible;
}
.topnav .current
{
color: #fff !important;
background-image: url(../img/bg_h-s.gif) !important;
}
最后但并非最不重要的一点是，我在页面上运行的 javascript 来协助这个菜单。
$(function ()
{
var pathname = (window.location.pathname.match(/[^\/]+$/)[0]);
$('.topnav ul li a').each(function ()
{
if ($(this).attr('href') == pathname)
{
$(this).addClass('current');
}
});
});