將SubSub菜單添加到水平菜單？

我試圖在這個已經創建的水平菜單中獲得子菜單，但我沒有這樣做的運氣。當某人懸停在子菜單上時，我希望子菜單懸停在子菜單的右側，然後在子菜單項沒有懸停時隱藏。將SubSub菜單添加到水平菜單？

也有可能獲得另一個sububsub菜單到這些subub菜單項？

我很難做到這一點。下面是我的代碼至今：

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菜單添加到水平菜單？

回答

相關問題