鼠標懸停子菜單破壞

我有一個鼠標懸停子菜單，在我的網站上工作得非常好（實際上它很適合在Chrome，IE 7 & 8和FF中正常工作），但現在它以某種方式打破了，看到問題。鼠標懸停子菜單破壞

這裏的CSS：

.MainMenu { 
    width: 90% !important; 
    min-width: 800px; 
    height: 42px !important; 
    padding: 0 0 0 10%; 
    overflow: hidden; 
    border-top: 1px solid #0054a6; 
    border-bottom: 1px solid #0054a6; 
    background: transparent url("Images/ServiceMenuBG.png"); 
    background-repeat: repeat-x; 
} 
.MainMenu ul { 
    padding: 0; 
    margin:0; 
    list-style: none; 
} 
.MainMenu li { 
    float: left; 
    position: relative; 
    height: 31px; 
    width: 150px; 
    padding: 11px 0 0 0; 
    text-align: center; 
    border-right: 1px solid #0054a6; 
} 
.MainMenuItem#First { border-left: 1px solid #0054a6; } 
.MainMenuItem a { 
    color: #ffffff; 
    display: block; 
    height: 31px; 
    width: 150px; 
    font-weight: bold; 
    text-decoration: none; 
} 
.MainMenuItem:hover { background: transparent url("Images/ServiceMenuBG.png") repeat-x 0 -42px; } 
.SubMenu { 
    z-index: 500; 
    display: none; 
    width: 150px !important; 
    position: absolute; 
    top: 10px; 
    left: 0; 
    background-color: rgb(51,118,184); 
} 
.SubMenu li { padding: 0 0 2px 5px; height: 20px !important; width: 143px; } 
.SubMenu li a { 
    height: 20px !important; 
    font-weight: normal; 
    color: #ffffff; 
    text-align: left; 
    text-decoration: none; 
} 
.SubMenu li a:hover { text-decoration: underline; } 
.MainMenu li.MainMenuItem>ul { top: auto; left: auto; } 
.MainMenu li.MainMenuItem:hover ul { display: block; }'

這裏的HTML：

<div class="MainMenu"> 
    <ul> 
     <li class="MainMenuItem" id="First"><a href="~/Default.aspx">Home</a></li> 
     <li class="MainMenuItem"><a href="Pages/Philosophies.aspx">Philosophies</a></li> 
     <li class="MainMenuItem"><a href="Pages/Services.aspx#top">Services</a> 
      <ul class="SubMenu"> 
       <li id="TopItem"><a href="Pages/Services.aspx#shop">Shop Repair</a></li> 
       <li><a href="Pages/Services.aspx#donations">Donations</a></li> 
       <li><a href="Pages/Services.aspx#consulting">Consulting</a></li> 
       <li id="BottomItem"><a href="Pages/Services.aspx#on-site">On-site Service</a></li> 
      </ul> 
     </li> 
     <li class="MainMenuItem"><a href="Pages/Contracts.aspx">Contracts</a></li> 
     <li class="MainMenuItem"><a href="Pages/AboutUs.aspx">About Us</a></li> 
     <li class="MainMenuItem"><a href="Pages/ContactUs.aspx">Contact Us</a></li> 
    </ul> 
</div>

子菜單上不顯示鼠標懸停無論或者如果我設置它的初始display屬性block。就好像它在網頁上根本不存在一樣。

在此先感謝您的幫助。

來源

2010-08-25 Logan Young

這不是回答你的問題，但我注意到，你使用ID屬性來表示真正應該是類名的東西，例如「TopItem」元素。僅在整個文檔所獨有的東西上使用ID。 – 2010-08-25 13:03:08

我不確定，但也許你會覺得它不存在，因爲你有'.MainMenuItem {color：#ffffff;}'？只是一個想法。現場示例將有助於更好地理解問題。 – Sotiris 2010-08-25 13:25:09

@Deniz 代碼中的「TopItem」，「First」和「BottomItem」僅用於頁面上的這些位置。此代碼來自一個asp.net母版頁，因此它在網站上的任何地方都可以使用。這些名稱不用於其他任何地方。只是覺得我會清楚的。 – 2010-08-25 14:10:19

.MainMenu { overflow: hidden; }

隱藏子菜單，所以刪除該行。第6行在您的CSS。

由於索蒂里斯提到

.MainMenuItem a { color: #ffffff; }

隱藏頂部菜單項（也許不是您的版本，因爲我看到你有一個背景圖片）

來源

2010-08-25 13:50:44 MattMS

謝謝:)不知道爲什麼我把那個'overflow：hidden;'放在那裏開始... – 2010-08-25 13:56:27

沒關係:) 我能看到的唯一原因是如果文本超出菜單標題區域。如果是這種情況，你可以應用溢出：隱藏;到實際的鏈接，而不是在 .MainMenu一個{overflow：hidden; } 這也適用於所有子菜單項目。希望有所幫助。 – MattMS 2010-08-25 23:37:20

鼠標懸停子菜單破壞

回答

相關問題