Советы по созданию мега-меню с использованием css и javascript

Question

Так что в основном я ищу меню с 5 вкладками контента и внутри каждой из этих вкладок - около 7 элементов. Каждый из этих элементов должен иметь потенциал иметь собственное подменю.

Я ищу, что было бы лучшим способом структурировать это, чтобы он мог легко читаться и обновляться, используя только css, javascript (без jquery) и html. также должен быть совместим с IE 8 (PITA для меня).

Благодарим за любые советы или предложения.

jsfiddle.net/nWxrY/2/

< http://i.imgur.com/9NLc88W.png - образ того, что я ищу, чтобы сделать

Answer 1

код не работает, потому что он был завернут в OnLoad (на левой стороне скрипка).

Я сделал небольшое css-решение для него, от которого вы можете опираться. Надеюсь, это соответствует вашим потребностям. В разделе «Запрос на изменение»> «Служба инфраструктуры» вы можете найти другое подменю css под первым элементом.

jsFiddle

Я добавил следующее # t4:

<div class="mnuItem" id="chgInfrastructureMnu"> 
    <img src="arr1.pngx" style="margin:-35px 0px 0px -10px;position:absolute"/> 
    <div class="mnuSubItem"><a href="#">item</a> <!-- this part I added --> 
     <div class="mnuSub"> 
      <a href="#">subitem</a> 
     </div> 
    </div><br/> 
     <a href="#">item</a><br/> 
</div> 

Я также добавил следующий CSS:

.mnuSubItem .mnuSub { 
    display: none; 
    position: absolute; 
    left: 50px; 
    top: 0; 
} 
.mnuSubItem { 
    position:relative; 
} 
.mnuSubItem:hover .mnuSub { 
    display: block; 
}