You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

ASP:Menu在IIS中悬停子菜单不显示,调试模式运行正常

我之前也碰到过一模一样的问题!ASP.NET Menu控件在VS2010调试时子菜单hover正常,一部署到IIS就失效,大概率是这几个地方出了问题,给你几个排查和解决的方向:

1. 先检查CSS路径是否正确

本地调试时,项目的目录结构和IIS部署后的根目录可能不一样,硬写的相对路径很容易失效。比如你的CSS文件如果放在~/Styles/menu.css,一定要用ASP.NET的路径解析方法来引用,避免路径错误:
把原来的CSS引用:

<link href="Styles/menu.css" rel="stylesheet" />

改成:

<link href="<%= ResolveUrl("~/Styles/menu.css") %>" rel="stylesheet" />

这样不管部署到哪个IIS目录,都会自动解析成正确的根路径。

2. 确认Menu控件的JS资源是否正常加载

ASP.NET Menu控件会依赖自动生成的WebResource.axdScriptResource.axd文件来处理hover交互,部署后IIS可能没正确配置这些资源的访问权限:

  • 打开浏览器开发者工具(F12),切换到Console标签,看看有没有“找不到xxx.axd”的报错;
  • 如果有报错,检查web.config里是否注册了对应的处理器,没有的话加上这段配置:
<system.webServer>
  <handlers>
    <add name="ScriptResource" preCondition="integratedMode" verb="GET,HEAD" path="ScriptResource.axd" type="System.Web.Handlers.ScriptResourceHandler, System.Web.Extensions, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" />
    <add name="WebResource" preCondition="integratedMode" verb="GET" path="WebResource.axd" type="System.Web.Handlers.WebResourceHandler" />
  </handlers>
</system.webServer>
  • 另外,确保IIS已经安装了“静态内容”功能(在服务器管理器的Web服务器角色服务里找),没装的话静态资源加载会直接失败。
3. 补全子菜单的CSS样式逻辑

你给出的CSS代码不全,子菜单hover不显示很大可能是样式里缺少了“父项hover时显示子菜单”的逻辑。ASP.NET Menu会自动生成aspNet-MenuaspNet-Menu-ChildaspNet-Menu-Hover这些类名,你可以参考下面的完整示例调整:

#menu {
  position: relative;
  width: 100%;
  height: 40px;
  background-color: #333;
}
/* 主菜单容器 */
#menu .aspNet-Menu {
  list-style: none;
  margin: 0;
  padding: 0;
}
/* 主菜单项 */
#menu .aspNet-Menu li {
  float: left;
  position: relative;
  padding: 0 15px;
  line-height: 40px;
}
#menu .aspNet-Menu li a {
  color: #fff;
  text-decoration: none;
  display: block;
}
/* 子菜单默认隐藏 */
#menu .aspNet-Menu-Child {
  display: none;
  position: absolute;
  top: 40px;
  left: 0;
  background-color: #444;
  padding: 0;
  min-width: 150px;
}
/* 父项hover时显示子菜单 */
#menu .aspNet-Menu-Hover > .aspNet-Menu-Child {
  display: block;
}
/* 子菜单项样式 */
#menu .aspNet-Menu-Child li {
  float: none;
  line-height: 35px;
  padding: 0 10px;
}
4. 清除浏览器缓存试试

有时候部署后浏览器还缓存着旧的CSS/JS文件,导致新样式没生效。可以按Ctrl+F5强制刷新页面,或者给CSS引用加个版本号参数,比如:

<link href="<%= ResolveUrl("~/Styles/menu.css?v=1.0.1") %>" rel="stylesheet" />

先从开发者工具的资源报错入手排查,一般很快就能找到问题所在!

内容的提问来源于stack exchange,提问作者Yahya Hussaini

火山引擎 最新活动