Подменю Mouseover сломано

У меня было подменю mouseover, очень хорошо работающее на моем сайте (так приятно, что он работал точно в Chrome, IE 7 & 8 и FF), но теперь он как-то сломался, и я не могу см. проблему.Подменю Mouseover сломано

Вот 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

Это не ответ на ваш вопрос, но я заметил, что вы используете атрибуты идентификатора для вещей, которые действительно должны быть именами классов, например элемент «TopItem». Используйте только те ID, которые уникальны для всего документа. –

Я не уверен, но, может быть, вы чувствуете, что этого не существует, потому что у вас есть '.MainMenuItem a {color: #ffffff;}'? просто мысль. живой пример поможет лучше понять проблему. – Sotiris

@Deniz 'TopItem',' First' и 'BottomItem' в коде используются только в тех местах на странице. Этот код происходит с главной страницы asp.net, поэтому он используется везде на сайте. Эти имена больше нигде не используются. Просто подумал, что я проясню это. –

.MainMenu { overflow: hidden; }

скрывает подменю, поэтому удалите эту линию. Строка 6 в вашем CSS.

Как Sotiris упоминалось

.MainMenuItem a { color: #ffffff; }

скрывает верхние пункты меню (возможно, не на вашу версию, потому что я вижу, у вас есть фоновое изображение)

источник

2010-08-25 13:50:44 MattMS

Спасибо :) Удивительно, почему я положил это 'overflow: hidden;' там, чтобы начать с ... –

Это нормально :) Единственная причина, по которой я мог видеть, - это если текст выходит за пределы области названия меню , Если это так, вы можете применить переполнение: hidden; вместо фактической ссылки, как в .MainMenu a {overflow: hidden; } Это относится ко всем элементам детского меню. Надеюсь, что помогает. – MattMS

Подменю Mouseover сломано

ответ

Смежные вопросы