如何在CSS中启用单击启用的多级菜单..？ [英] How to make a click enabled multi level menu in CSS..?

问题描述

伙计们，我是CSS新手。我想在css中创建一个单击启用的多级菜单。在菜单中，选择节目保持选中，直到另一个事件发生。即，例如，如果我选择第二级的子菜单，我将鼠标移动到其他位置，选择应该仍然有效..



伙计们，请帮帮我..非常紧急。



（喜欢windows开始菜单）。

提前谢谢你...



这是我的css

Guys, I am new to CSS. I want to create a click enabled multi level menu in css. In the menu the selection show stay selected until another event happen. ie for eg if I'm selecting the sub menu of the second level and I'm moving the mouse to some other location the selection should still stand..

Guys, Please help me..Its very urgent.

(Like windows Start menu).
Thank you in advance...

Here is my css

#nav {
   display:block;vertical-align:middle;text-align:center;text-decoration:none;font:bold 16px Trebuchet MS;color:#000000;
   text-shadow:#FFF 0 0 1px;cursor:pointer;padding:5px;background-color:#5DBACB;background-image:url("mainbk.png");
   background-repeat:repeat;background-position:0 0;
   border-width:1px;border-style:solid;border-color:#5f5f5f;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;
   height:54px;
}
#nav ul
{
   background-color:#5DBACB;
    height:43px;
    list-style:none outside none;
    margin:0px;
    padding:1px;

}
#nav ul ul {
    background-color:#5DBACB;
    border:1px solid #8A867A;
    display:none;
    vertical-align:middle;text-align:left;text-decoration:none;font:bold 16px Trebuchet MS;color:#000000;
   text-shadow:#FFF 0 0 1px;
    left:0;
    padding:0;
    position:absolute;
    width:168px;

    background-image:-webkit-gradient(left center , #F8FAFF 0%, #B8D1F8 15%, #FFFFFF 15%, #FFFFFF 100%);
    background-image:-moz-linear-gradient(left center , #F8FAFF 0%, #B8D1F8 15%, #FFFFFF 15%, #FFFFFF 100%);
}
#nav ul ul ul {
    display:none;
    left:168px;
    position:absolute;
    top:-1px;
    width:168px;
}
#nav ul li {
    float:left;
    margin-right:1px;
    position:relative;
    height:26px;
    top: 0px;
    left: 0px;
}
#nav ul li a {
    border:1px solid #B8D1F8;
    color:#000;
    cursor:default;
    display:block;
    font:bold 16px Trebuchet MS;
    padding:10px 3px 4px;
    text-decoration:none;
    height:35px;

}
#nav ul li span {
    background:url("../images/u.gif") no-repeat scroll 90% center transparent;
    border:1px solid #B8D1F8;
    width:158px;background-color:#5DBACB;height:35px;
    cursor:default;
    display:block;
    font:bold 18px Trebuchet MS;
    padding:10px 3px 4px;
    position:relative;

}
#nav ul ul li span {
    background:url("../images/s.gif") no-repeat scroll 97% center transparent;
}
#nav ul ul li {
    float:none;
    margin-right:0;
    padding:3px;
    text-indent:10px;
}
#nav ul ul li a,#nav ul ul li span {
    border:1px solid transparent;
    padding:3px 3px 5px 2px;

}
#nav ul ul li a img,#nav ul ul li span img {
    border-width:0;
    float:left;
    margin-right:5px;
    vertical-align:middle;

}
#nav ul li:hover > a,#nav ul li:hover > span {
   background-color:#000000;background-image:none;color:#ffffff;text-decoration:none;height:19px;
}
#nav img.close {
    display:none;
    height:100%;
    left:0;
    position:fixed;
    top:0;
    width:100%;
    z-index:-1;
}

#nav ul li span:focus + ul,#nav ul li ul:hover,#nav ul:hover + img.close {
    display:block;
}

推荐答案

这篇关于如何在CSS中启用单击启用的多级菜单..？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！