встроенных списков с блоком вложенного списка для меню

Question

Я пытаюсь создать меню, которое выглядит как этот

Я использую вложенные списки, которые приходят из трех таблиц БД, чтобы создать список в этом DEMO

Как выложить подменю под верхними меню без элементов верхнего меню, перемещающихся при отображении вложенных списков. Я рад использовать CSS и JQuery, чтобы получить эту работу и помощь высоко оценили

Heres код, чтобы соответствовать скрипку CSS:

#main-nav{ 
    background:#83150D; 
    width:960px; 
    min-height:50px;   
    margin:0 auto; 
} 
#main-nav ul{ 
    padding:0px; 
    margin:0px; 
    list-style-type:none; 
    background-color:#83150D; 
} 
#main-nav ul li{ 
    display:inline; 
    float:left; 
    min-width:125px; 
    width:auto; 
    height:50px; 
    padding:15px 20px; 
} 

.topMenu ul li{ 
    display:inline; 
    float:left; 
    font-weight:bold;  
} 
.topMenu li{ 
    color:#E6D3B5; 
    font-size:16px; 
    font-weight:bold; 
    text-transform:uppercase; 

} 
#main-nav .menuCategory ul{ 
    margin-top:20px; 
    background-color:#fff; 
    min-height:300px; 
} 
#main-nav .menuCategory ul li{ 
    display:block; 
    float:none; 
    font-weight:normal; 
    padding:0 0 20px 15px; 
    background-color:#fff; 
} 
#main-nav .menuCategory li{ 
    color:#0D2B48; 
    font-size:18px; 
    background-color:#fff; 
    text-transform:capitalize; 
    padding:35px 0 0 25px; 

} 
.menuItem { 

    background-color:#fff; 
    background-image:url('../images/topMenuDropdownBorder.png'); 
    background-position:100% 0; 
    background-repeat: no-repeat; 
} 

.menuItem.first{ 
    background-image:none; 
} 
.menuItem li{ 
    background-image:url('../images/topMenuDropdownArrow.png'); 
    background-position:0 5px; 
    background-repeat: no-repeat; 
    min-width:150px; 
    margin: 0 20px 0 0px; 
    padding:0 0 10px 0; 

} 
.menuItem li a{ 
    color:#000;  
    font-size:15px; 
    font-weight:normal; 

} 
.menuCategory{ 
    display:none;  
} 

HTML:

<div id="main-nav">    
    <ul class="topMenu"> 
     <li>Men 
      <ul class="menuCategory"> 
       <li>Equestrian 
        <ul class="menuItem"> 
          <li><a href="men-equestrian-shirt">Shirts</a></li> 
          <li><a href="men-equestrian-jacket">Jackets</a></li> 
          <li><a href="men-equestrian-fleece">Fleeces</a></li> 
          <li><a href="men-equestrian-bodywarmer">Bodywarmers</a></li> 
          <li><a href="men-equestrian-sweater">Sweaters</a></li> 
          <li><a href="men-equestrian-trousers">Trousers</a></li> 
          <li><a href="men-equestrian-gloves">Gloves</a></li> 
        </ul> 
       </li> 
       <li>Shooting 
        <ul class="menuItem"> 
         <li><a href="">Shirts</a></li> 
        </ul> 
       </li> 
       <li>Walking 
        <ul class="menuItem"> 
         <li><a href="">Shirts</a></li> 
        </ul> 
       </li> 
       <li>Fishing 
        <ul class="menuItem"> 
         <li><a href="">Jackets</a></li> 
        </ul> 
       </li> 
       <li>Lifestyle & Leisure 
        <ul class="menuItem"> 
         <li><a href="">Jackets</a></li> 
        </ul> 
       </li> 
      </ul> 
     </li> 
    </ul> 
    <ul class="topMenu"> 
     <li>Women 
      <ul class="menuCategory"> 
       <li>Shooting 
        <ul class="menuItem"> 
         <li><a href="">Shirts</a></li> 
        </ul> 
       </li> 
      </ul> 
     </li> 
    </ul> 
    <ul class="topMenu"> 
     <li>Kids 
      <ul class="menuCategory"> 
       <li>Walking 
        <ul class="menuItem"> 
         <li><a href="">Gloves</a></li> 
        </ul> 
       </li> 
      </ul> 
     </li> 
    </ul> 
    <ul class="topMenu"> 
     <li>Footwear 
      <ul class="menuCategory"> 
       <li>Walking 
        <ul class="menuItem"> 
         <li><a href="">Mens Walking Boots</a></li> 
         <li><a href="">Womens Walking Boots</a></li> 
        </ul> 
       </li> 
      </ul> 
     </li> 
    </ul> 
    <ul class="topMenu"> 
     <li>Sports & Activities 
      <ul class="menuCategory"> 
       <li>Walking 
        <ul class="menuItem"> 
         <li><a href="">Gloves</a></li> 
         <li><a href="">Jackets</a></li> 
        </ul> 
       </li> 
       <li>Equestrain 
        <ul class="menuItem"> 
         <li><a href="">Jackets</a></li> 
         <li><a href="">Boots</a></li> 
        </ul> 
       </li> 
      </ul> 
     </li> 
    </ul> 
</div> 

Jquery:

$('#main-nav ul li').click(function(e){ 
    e.preventDefault(); 
    var label=$(this).html(); 
    if($('#main-nav ul li').hasClass('menu-open')){ 
     $('#main-nav ul li').removeClass('menu-open');   
     $('.menuCategory').css('display','none'); 
    }else{ 
     $('#main-nav ul li').addClass('menu-open');   
     $('.menuCategory').css('display','block'); 
    } 

}); 

DEMO

Answer 1

мне удалось сделать это с помощью цикла throuhg БД и создания массива верхних элементов уровня, а затем создать уль Li уль Li для суб туманы, а затем опуская их в DIV

while($row = db_fetch_array($sql)){ 
    $newTopLevel = stripslashes($row['menu_title']);  
    $newCatLevel = stripslashes($row['category_title']); 
    $menu_item = stripslashes($row['top_menu_item_title']); 
    $menu_link = stripslashes($row['tag_sef_name']); 

    //if new top level item 
    if($newTopLevel!=$oldTopLevel){ 
     if($oldTopLevel!='1' && $i>0){//if not first top level item 
      $subMenu .= '</ul></li></ul>'; 
     } 
     if($i>0){//if not first sub menu 
      $subMenu .='</li></ul>'; 
     } 
     $subMenu .='<ul class="topMenuList"><li><ul class="menuCategory" id="'.substr($newTopLevel,0,3).'">'; 

     $oldCatLevel='1'; 
     $topMenuArray[$j]=$newTopLevel; //add topmenu item to array 
     $j++;   
     $first=0;//set first submenu to zero 
    } 

    if($newCatLevel!=$oldCatLevel){//if new category 
     if($oldCatLevel!='1'){//if not first category 
      $subMenu .= '</ul></li>';   
     } 
     if($first==0){//if first category in this top menu item 
      $subMenu .= '<li class="first"><span class="topMenuCatName">'.$newCatLevel.'</span><ul class="menuItem">'; 
     }else{ 
      $subMenu .= '<li><span class="topMenuCatName">'.$newCatLevel.'</span><ul class="menuItem">';   
     } 
     $first++; 

    } 

    $subMenu .= '<li><a href="'.$menu_link .'">'.$menu_item.'</a></li>';//add item to menu 

    $oldCatLevel = $newCatLevel; 
    $oldTopLevel = $newTopLevel; 
    $i++; 
} 

$output = '<div id="fullTopMenu"><ul>';//build top menu with sub menu 
foreach ($topMenuArray as $topMenuItem){ 
    $output .= '<li>'.$topMenuItem.'<span class="topMenuIcon"></span></li>'; 
} 
$output .= '</ul>'.$subMenu.'</div>'; 

return $output;