转换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菜单

回答

相关问题