我的CSS水平菜單顯示：塊完美，但在子目錄中看起來完全不同

Question

我剛剛實施VS 2010的基本水平菜單，當您開始一個新的網站時。頁面在我的根目錄中顯得很好。

當我設立了一個/博客/應用程序（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; 
} 

但你會由於某種原因，由於某種原因，display：block在我的/ blog /子目錄母版頁中無論如何都不起作用，因爲它在我的根主頁面中：

有沒有人知道爲什麼會出現這種情況？再次，在設計模式下VS看起來不錯。只是當我上傳時，display：block不能正常工作。我已經擺弄了好幾個小時，但不能在我的/ 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"> 

如果想的是，回去，並確保這些相對鏈接到正確的地方，之後的作品你已經足夠具體了。