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目录,都会自动解析成正确的根路径。
ASP.NET Menu控件会依赖自动生成的WebResource.axd和ScriptResource.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-Menu、aspNet-Menu-Child、aspNet-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




