Question

我的输出：

Home  | cat | Info
      |sub1
      | sub1sub1
      | sub1sub2
      |sub2
      | sub2sub1    


<div class="menu" >
    <span>
        <ul id="nav">
            <li><a href="#" >HOME</a></li>
            <li><a href="#">cat</a>
                <div class="subs">
                    <div class="wrp2">
                        <ul>
                            <li><a href="#" >sub1</a></li>
                                <ul>
                                    <li><a href="#" >sub1sub1</a></li>
                                    <li> <a href="#" >sub1sub2</a></li>
                                </ul>       
                        </ul>
                        <ul>
                            <li><a href="#" >sub2</a></li>
                                <ul><li><a href="#" >sub2sub1</a></li>
                             </li>
             <li><a href="#">Info</a></li>
        </ul>
    </span>
</div>

我的CSS：

/* main menu styles */
.menu {

    background: none repeat scroll 0px 0px rgba(255, 255, 255, 0.65);
    text-align:center;
    width:100%;
    height:30px;
    text-transform: uppercase;
    padding-top: 8px;
    padding-bottom: 5px;
    font-size:19px;

}
.menu > span {
    display:inline-block;
    margin:0 auto;
}
#nav {
    display:inline;
    text-align:left;
    position:relative;
    list-style-type:none;
}
#nav > li {
    float:left;
    padding:0;
    position:relative;

}
#nav > li > a {

    color:black;
    display:block;

    padding:3px 10px;
    position:relative;
    text-decoration:none;
}
#nav > li > a:hover {
       background-color:rgba(255, 255, 255, 0.65);
    color:black;

}

#nav > li.selected  > a {
    z-index:2;
}
#nav li div {
    position:relative;
}
#nav li ul  a {
    font-size: 100%;
    color:black;
    display:block;
    margin-bottom:1px;
    padding:3px 5px;
    text-decoration:none;

}
#nav li ul a:hover{
    background-color:rgba(255, 255, 255, 0.65);
    color:black;
}

#nav li div div {


    padding:12px 0;
    display:none;

    margin:0;
    position:absolute;
    top:6px;
    background: none repeat scroll 0px 0px rgba(255, 255, 255, 0.65);
    z-index:999;
    width:auto;
}
#nav li div div.wrp2 {
    width:380px;
}
#nav .sep {
    left:190px;

    bottom:0;
    height:auto;
    margin:15px 0;
    position:absolute;
    top:0;
    width:1px;
}
#nav li div ul {
    padding-left:10px;
    padding-right:10px;
    position:relative;
    width:170px;
    float:left;
    list-style-type:none;

}
#nav li div ul li {
    margin:0;
    padding:0;
}
#nav li div ul li h3 {

    color:black;

    margin:0 5px 4px;

    padding-bottom:3px;
    padding-top:3px;
}
#nav li ul ul {
    padding:0 0 8px;
     padding-left:5px;
}
#nav li ul ul li {
    margin:0;
    padding:0;
}
#nav li ul ul li a {
    font-size: 90%;
    color:black;
    display:block;
    margin-bottom:1px;
    padding:3px 5px;
    text-decoration:none;


}
#nav li ul ul li a:hover{
    background-color:rgba(255, 255, 255, 0.65);
    color:black;
}

如何只使用CSS和NO jquery使cat可见。它应该是：如果我点击cat，子菜单应该出现。淡入/淡出效果会很棒。一般来说可能吗？

Answer 1

是的，你可以这样做＆gt; 尝试在cat菜单中显示：none。你必须把它们：悬停在显示屏上：阻止

Answer 2

确定。它是东方只是使用display：none创建一个新的子菜单。这意味着这个块不会自行打开它。之后放入另一个类：悬停并将其显示为块

Answer 3

如果您需要click，则可以使用:target伪类和元素ID来控制可见内容。

使用指向ID的链接更新HTML中的相关行：

<li id="cat"><a href="#cat">cat</a>

然后添加一些简单的CSS：

li .subs {
    visibility:hidden;
    opacity:0;
    transition:visibility 0s linear 0.5s,opacity 0.5s linear;
}
li:target .subs {
    visibility:visible;
    opacity:1;
    transition-delay:0s;
}

您还需要删除任何会隐藏子菜单的display:none个样式，因为我们将使用visibility和opacity代替。这使我们有一个很好的淡入淡出效果。

显示带CSS和CSS淡入的菜单

3 个答案: