轉換CSS菜單，多層次的CSS菜單

我的CSS菜單這是兩個層面的意思是一個主要的等是其subsequest。比如轉換CSS菜單，多層次的CSS菜單

Home--Link1 
     Link2 
     Link3 
     Link4

但現在我需要這個菜單擴展到更多的後續這樣

Home--Link1--SLink1 
     Link2 SLInk2 
     Link3 SLink3 
     Link4--Slink1 
      Slink2

但我無法unserstAND如何轉換菜單中的多級請任何一個可以幫助我做到這一點以下鏈接是我的CSS代碼

#sddmSFPL 
{ margin: 0; 
    padding: 0; 
    z-index: 30} 

#sddmSFPL li 
{ margin: 0; 
    padding: 0; 
    list-style: none; 

    font: 11px Tahoma} 

#sddmSFPL li a 
{ display: block; 
    margin: 0 1px 0 0; 
    padding: 4px 10px; 
    width: 100px; 
    background: #FFFFFF; 
    color: #222222; 
    text-align: Left; 

    text-decoration:none} 

#sddmSFPL li a:hover 
{ background: #EEEEEE; 
    color:#222222; 
    border:solid 1px #EEEEEE; 
    padding:3px 9px; 
    border-left-color:#DD4b39;  
    } 


#sddmSFPL div 
{ position: absolute; 
    visibility: hidden; 
    margin:-24px 120px; 
    padding:4px 10px;   
    background: #FFFFFF;  
    border: 1px solid #EEEEEE} 

    #sddmSFPL div a 
    { position: relative; 
     display: block; 
     margin: 0 0 0 0; 
     padding: 4px 10px;  
     width: auto; 
     white-space:normal; 
     text-align: left; 
     text-decoration: none; 
     background: #FFFFFF; 
     color: #222222; 
     font: 11px Tahoma} 

    #sddmSFPL div a:hover 
    { background: #EEEEEE; 
     color: #222222; 
     padding:3px 9px; }

在這裏，許多事情我想轉換成多級

<ul id="sddmSFPL">  
    <li> 
    <a href="#" id="MilkReports" runat=server >Milk Reports</a> 
     <div id="m29" onmouseover="mcancelclosetime()" onmouseout="mclosetime()"> 
     <a href="http://sml.com.pk/sfpl/milk.php" target=_blank >Milk Receipt Dashboard</a> 
     <a href="http://foods.shakarganj.com.pk/pdf/procurement_structure.pdf" target=_blank> Milk Procurement Structure</a>   
    </div> 
    </li> 
</ul>

在這裏，在菜單中的鏈接是我的JS代碼來打開和關閉menues

<!-- 
var timeout   = 2000; 
var closetimer  = 0; 
var ddmenuitem  = 0; 

// open hidden layer 
function mopen(id) 
{ 


// onmouseover="timer1=setTimeout(function(){show('tip1');}, 500);" 
//onmouseout="clearTimeout(timer1);" 



    // cancel close timer 
    mcancelclosetime(); 

    // close old layer 
    if(ddmenuitem) ddmenuitem.style.visibility = 'hidden'; 

    // get new layer and show it 
    ddmenuitem = document.getElementById(id); 
    ddmenuitem.style.visibility = 'visible'; 

} 
// close showed layer 
function mclose() 
{ 
    if(ddmenuitem) ddmenuitem.style.visibility = 'hidden'; 
} 

// go close timer 
function mclosetime() 
{ 
    closetimer = window.setTimeout(mclose, timeout); 
} 

// cancel close timer 
function mcancelclosetime() 
{ 
    if(closetimer) 
    { 
     window.clearTimeout(closetimer); 
     closetimer = null; 
    } 
} 

// close layer when click-out 
//document.onmouseover = mclose; 
// -->

來源

2012-03-28 Adeel Aslam

LIVE DEMO

在這裏，我給你一個純CSS的多級CSS菜單。

HTML：

<div id="navigation"> 
    <ul class="top-level"> 
     <li><a href="#">Home</a> 
      <ul class="sub-level"> 
       <li><a href="#">Sub Menu Item 1</a> 
       </li> 
       <li><a href="#">Sub Menu Item 2</a> 
        <ul class="sub-level"> 
         <li><a href="#">Sub Sub Menu Item 1</a></li> 
         <li><a href="#">Sub Sub Menu Item 2</a></li> 
         <li><a href="#">Sub Sub Menu Item 3</a></li> 
         <li><a href="#">Sub Sub Menu Item 4</a></li> 
        </ul> 
       </li> 
       <li><a href="#">Sub Menu Item 3</a></li> 
       <li><a href="#">Sub Menu Item 3</a></li> 
      </ul> 
     </li> 
     <li><a href="#">About</a></li> 
     <li><a href="#">Contact</a></li> 
     <li> 
      <a href="#">FAQ</a> 
      <ul class="sub-level"> 
       <li><a href="#">Sub Menu Item 1</a></li> 
       <li><a href="#">Sub Menu Item 3</a> 
        <ul class="sub-level"> 
         <li><a href="#">Sub Sub Menu Item 1</a></li> 
         <li><a href="#">Sub Sub Menu Item 2</a></li> 
         <li><a href="#">Sub Sub Menu Item 3</a></li> 
         <li><a href="#">Sub Sub Menu Item 4</a></li> 
        </ul> 
       </li> 
      </ul> 
     </li> 
     <li> 
      <a href="#">News</a> 
      <ul class="sub-level"> 
       <li><a href="#">Sub Menu Item 1</a> 
        <ul class="sub-level"> 
         <li><a href="#">Sub Sub Menu Item 1</a></li> 
         <li><a href="#">Sub Sub Menu Item 2</a></li> 
         <li><a href="#">Sub Sub Menu Item 3</a></li> 
         <li><a href="#">Sub Sub Menu Item 4</a></li> 
        </ul> 
       </li> 
       <li><a href="#">Sub Menu Item 2</a></li> 
       <li><a href="#">Sub Menu Item 3</a></li> 
      </ul> 
     </li> 
    </ul> 
</div>

CSS：

#navigation {font-size:0.75em; width:150px;} 
#navigation ul {margin:0px; padding:0px;} 
#navigation li {list-style: none;} 

ul.top-level {background:#666;} 
ul.top-level li { 
border-bottom: #fff solid; 
border-top: #fff solid; 
border-width: 1px; 
} 

#navigation a { 
color: #fff; 
cursor: pointer; 
display:block; 
height:25px; 
line-height: 25px; 
text-indent: 10px; 
text-decoration:none; 
width:100%; 
} 
#navigation a:hover{ 
text-decoration:underline; 
} 

#navigation li:hover { 
background: #f90; 
position: relative; 
} 

ul.sub-level { 
    display: none; 
} 

ul.sub-level { 
    display: none; 
} 
li:hover .sub-level { 
    background: #999; 
    border: #fff solid; 
    border-width: 1px; 
    display: block; 
    position: absolute; 
    left: 75px; 
    top: 5px; 
} 

ul.sub-level { 
    display: none; 
} 
li:hover .sub-level { 
    background: #999; 
    border: #fff solid; 
    border-width: 1px; 
    display: block; 
    position: absolute; 
    left: 75px; 
    top: 5px; 
} 
ul.sub-level li { 
    border: none; 
    float:left; 
    width:150px; 
} 

/*Seconda Level*/ 
#navigation .sub-level { 
    background: #999; 
} 

/*Third Level*/ 
#navigation .sub-level .sub-level { 
    background: #09C; 
} 

/*RESET STYLES*/ 
li:hover .sub-level .sub-level { 
    display:none; 
} 
.sub-level li:hover .sub-level { 
    display:block; 
}

來源

2012-11-08 17:21:53

轉換CSS菜單，多層次的CSS菜單

回答

相關問題