Добавление меню SubSub в горизонтальное меню?

Я пытаюсь получить подпункт меню в этом уже созданном горизонтальном меню, но у меня нет никакой удачи в этом. Я хочу, чтобы подпункт меню зависал справа от части подменю, когда кто-то нависает над ним, а затем скрывается, когда над элементом подменю не навешивается.Добавление меню SubSub в горизонтальное меню?

Также возможно получить еще одно подзадачное меню для этих элементов подзаголовка?

Мне тяжело это делать. Вот коды я до сих пор:

http://jsfiddle.net/ndn4life104/pp5Mf/

HTML

<ul> <li><a href="#">Menu 1</a> <div class="primary-nav-sub-menu-2"> <ul class="column"> 
    <li><a href="#">Submenu</a></li> 
     <li><a href="#">part1</a></li>                                                           
     <li><a href="#">part2</a></li>                       
     <li><a href="#">part3</a></li>                        
     <li><a href="#">part4</a></li> 
</ul> 
    <ul class="column">                        
    <li><a href="#">part5</a></li>                                                   
    <li><a href="#">part6</a></li>                       
    <li><a href="#">part7</a></li>                           
    <li><a href="#">part8</a></li> 

    </ul></div> </li></ul>

источник

2013-09-28 ndn4life104

FIDDLE

попробовать это:

HTML:

<head><link rel="stylesheet" type="text/css" href="m.css"></head> 
<div id="top_menu">      
      <ul> 
       <li class="first">menu1     
        <div id="submenu"> 
         <ul class="abc"> 
          <li class="second">item1  
           <div id="submenu2"> 
            <ul class="abc"> 
             <li class="second">item1_1 
              <div id="submenu3"> 
               <ul class="abc"> 
                <li class="second">item1_1_1</li> 
                <li class="second">item1_1_2</li> 
                <li class="second">item1_1_3</li> 
               </ul> 
              </div> 
             </li> 
             <li class="second">item1_2</li> 
             <li class="second">item1_3</li> 
            </ul> 
           </div>        
          </li> 
          <li class="second">item2 
           <div id="submenu2"> 
            <ul class="abc"> 
             <li class="second">item2_1</li> 
             <li class="second">item2_2</li> 
             <li class="second">item2_3</li> 
            </ul> 
           </div>        
          </li> 
          <li class="second">item3 
           <div id="submenu2"> 
            <ul class="abc"> 
             <li class="second">item3_1</li> 
             <li class="second">item3_2</li> 
             <li class="second">item3_3</li> 
            </ul> 
           </div>        
          </li> 
         </ul> 
        </div> 
       </li> 

       <li class="first">menu2 
        <div id="submenu"> 
         <ul class="abc"> 
          <li class="second">item1</li> 
          <li class="second">item2</li> 
          <li class="second">item3</li> 
          <li class="second">item4</li> 
         </ul> 
        </div> 
       </li> 

      </ul> 
     </div>

CSS:

ul{ 
    padding:10px; 
    padding-right:0px; 
} 
li.first{ 
    display:block; 
    display:inline-block; 
    padding:5px; 
    padding-right:25px; 
    padding-left:25px; 
    cursor:pointer; 
} 
li.second{ 
    list-style:none; 
    margin:0px; 
    padding:5px; 
    padding-right:25px; 
    margin-bottom:5px; 
    cursor:pointer; 
} 
#submenu li.second:hover{ 
    background:red; 
    border-radius:5px; 
} 

#submenu2 li.second:hover{ 
    background:green; 
    border-radius:5px; 
} 
/*********MAIN LOGIC***************/ 

#submenu,#submenu2,#submenu3{ 
    visibility:hidden; 
} 
#top_menu li.first:hover #submenu,#submenu li.second:hover #submenu2,#submenu2 li.second:hover #submenu3{ 
    visibility:visible; 
} 
/**********STYLING SUBMENUS**************/ 
#submenu{ 
    padding-right:0px; 
    text-align:left; 
    position:absolute; 
    background:white; 
    box-shadow:0px 0px 5px; 
    border-radius:5px; 
} 
#submenu2{ 
    text-align:left; 
    position:absolute; 
    left:70px; 
    top:0px; 
    background:red; 
    box-shadow:0px 0px 5px; 
    border-radius:5px; 
} 
#submenu3{ 
    text-align:left; 
    position:absolute; 
    left:80px; 
    top:0px; 
    background:green; 
    box-shadow:0px 0px 5px; 
    border-radius:5px; 
}

просто понять логику этого кода, и вы можете сделать как много подменю, как вы хотите.

источник

2013-10-02 12:25:59 AmanS

Добавление меню SubSub в горизонтальное меню?

ответ

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