我的CSS水平菜单显示：块完美，但在子目录中看起来完全不同

Question

我刚刚开始使用VS 2010的基本水平菜单，当你开始一个新网站时。页面看起来很好。

当我建立一个/ blog /应用程序（blogengine.net）时，我做了一些更改...将我自己的徽标放在那里，图标等，并尝试将我的菜单放在那里。它似乎与任何其他样式表中的任何其他菜单类都没有冲突。我甚至在代码和样式表中将类重命名为topmenu以确保。奇怪的是，在设计模式下它在VS中看起来很好。

所以我三重检查看到没有.css冲突，所以代码仍然如下：

            <div class="clear hideSkiplink">
            <asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false"
                IncludeStyleBlock="false" Orientation="Horizontal">
                <Items>
                    <asp:MenuItem NavigateUrl="http://rtn.org/Default.aspx" Text="Home" />
                    <asp:MenuItem NavigateUrl="http://rtn.org/About.aspx" Text="About RTN" />
                    <asp:MenuItem NavigateUrl="http://rtn.org/resources.aspx" Text="RTN Resources" />
                    <asp:MenuItem NavigateUrl="http://rtn.org/advertise.aspx" Text="Advertise with RTN" />
                    <asp:MenuItem NavigateUrl="http://rtn.org/donate.aspx" Text="Donate to RTN" />
                </Items>
            </asp:Menu>
        </div>

CSS看起来像这样：

div.hideSkiplink
{
background-color: #3a4f63;
width: 100%;
}

div.menu
{
padding: 4px 0px 4px 8px;
}

div.menu ul
{
list-style: none;
margin: 0px;
padding: 0px;
width: auto;
}

div.menu ul li a, div.menu ul li a:visited
{
background-color: #465c71;
border: 1px #4e667d solid;
color: #dde4ec;
display: block;
line-height: 1.35em;
padding: 4px 20px;
text-decoration: none;
white-space: nowrap;
}

div.menu ul li a:hover
{
background-color: #bfcbd6;
color: #465c71;
text-decoration: none;
}

div.menu ul li a:active
{
background-color: #465c71;
color: #cfdbe6;
text-decoration: none;
}

但正如您在这张图片中看到的那样，由于某种原因，我的/ blog /子目录母版页中的display：block因为任何原因而无法正常工作，因为它位于我的根母版页中：

有人知道为什么会这样吗？同样，在设计模式下它在VS中看起来很好。就在我上传它时，显示：块无法正常工作。我已经摆弄了好几个小时，但是无法在我的/ blog /子目录中重现菜单。任何建议都会真的很感激！

Answer 1

几乎总是会发生这种情况，因为您的CSS有相对链接但没有链接到正确的位置。在其他页面上，样式表正确显示，因为相对链接指向正确的站点根目录。但是，在您的子域中，根很可能到该子域，而不是您网站的实际根目录。

例如，如果您的链接正常：

<link rel="stylesheet" type="text/css" href="css/mystyle.css">

该链接指向http://yoursite.com/foo/css/style.css。

但是，当您从博客进行链接时，即使相对链接相同，它现在也会链接到http://yoursite.com/blog/foo/css/style.css。

要修复它，请尝试输入绝对链接以确保这是问题所在：

 <link rel="stylesheet" type="text/css" href="http://yoursite.com/blog/foo/css/style.css">

如果在尝试之后有效，请返回并确保这些相关链接到达正确的位置并确保您具有足够的特定性。