Question

HTML

<div id='cssmenu'> 
    <ul> 
     <li class='active'> 
      <a href="Index.aspx">HOME</a> 
     </li> 
     <li> 
      <a href="AboutUs.aspx">ABOUT US</a> 
     </li> 
     <li class='has-sub '> 
      <a href="Products.aspx">PRODUCTS</a> 
      <ul> 
       <li class='has-sub '> 
        <a href='#'>Product 1</a> 
        <ul> 
         <li><a href='#'>Sub Item</a></li> 
         <li><a href='#'>Sub Item</a></li> 
        </ul> 
       </li> 
       <li class='has-sub '> 
        <a href='#'>Product 2</a> 
        <ul> 
         <li><a href='#'>Sub Item</a></li> 
         <li><a href='#'>Sub Item</a></li> 
        </ul> 
       </li> 
      </ul> 
     </li> 
     <li> 
      <a href="Services.aspx">SERVICES</a> 
     </li> 
     <li> 
      <a href="Enquiry.aspx">ENQUIRY</a> 
     </li> 
     <li> 
      <a href="ContactUs.aspx">CONTACT US</a> 
     </li> 
    </ul> 
</div> 

Fiddle

Как вы можете увидеть скрипку подменю из элемента списка оседает в этом .. я работаю над этим более час, можете ли вы помочь, где я делаю ошибку, и мне нужны четкие объяснения ... !!

Answer 1

Да, @vals и @shomz наполовину правильны.

Вам нужно добавить height:100%; к #cssmenu ul ul

НО, чтобы установить перекрытие меню продукта 1 и продукта 2 к югу, вам нужно изменить:

#cssmenu ul ul ul { 
    top: 0; 
    left: auto; 
    right: -99.5%; 
} 

TO:

#cssmenu ul ul ul { 
    top: 0; 
    left: 100%; 
} 

И @shomz прав, здесь много ненужного стиля.

Например, можно определить #cssmenu ul ul ul ДВАЖДЫ:

РАЗ как:

#cssmenu ul ul ul { 
    top: 0; 
    left: auto; 
    right: 100%; 
} 

и второй раз как:

#cssmenu ul ul ul { 
    border-top: 0 none; 
} 

Вы должны вернуться и объединить случаи дублирования, как потому что, если вы оставите первый, который определяет top и left, то в одном с border вы добавите top:0; и left: 100%;, все не сработает.

Answer 2

Высота 100% #cssmenu ul li вызывает перекрытие. Он берет высоту родительского элемента уль, который является 0.

Смотрите здесь: http://jsfiddle.net/SQ5Cp/26/

Это устраняет проблему, но вы, вероятно, следует рассмотреть вопрос переписывания некоторые ее части в будущем (например, удаление абсолютное позиционирование дочерних элементов ul и т. д.).

Answer 3

Просто немного позади Shomz ответ ...

Однако, я бы решить это следующим образом (добавление высоты 100% до ул второго уровня):

#cssmenu ul ul { 
    visibility: hidden; 
    position: absolute; 
    top: 100%; 
    left: 0; 
    z-index: 598; 
    width: 100%; 
    height: 100%; /* added */ 
} 

fiddle

Изменить также это для подменю

#cssmenu ul ul ul { 
    top: 0; 
    left: 100%; 
} 

fiddle 2