css - 将 css 菜单转换为多级 css 菜单

Question

我有两个级别的 css 菜单，一个是主要的，另一个是它的子序列。例如

Home--Link1
      Link2
      Link3
      Link4

但现在我需要将此菜单扩展到更多类似这样的后续链接

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

但我无法取消服务以及如何将菜单转换为多级请任何人帮助我做到这一点这是我的 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 代码

<!--
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; 
// -->

Answer 1

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;
}