Question

我想在这个垂直菜单栏上创建一个子菜单。我知道我必须更改css才能生成子菜单但是我不能正常使用css3。我正在使用的css文件没有提供子菜单代码。真正的HTML代码就像这样

      <body><ul class="ca-menu">
            <li>
                <a href="pagehome.php">
                    <span class="ca-icon">D</span>
                    <div class="ca-content">
                        <h2 class="ca-main">Home</h2>
                    </div>
                </a>
            </li>
            <li>
                <a href="settingpage.php">
                    <span class="ca-icon">S</span>
                    <div class="ca-content">
                        <h2 class="ca-main">Setting</h2>
                    </div>
                </a>
            </li>
        </ul></body>

当用户将鼠标悬停在此菜单上时，我想再添加两个垂直子菜单（设置）..就像这样

    <body><ul class="ca-menu">
            <li>
                <a href="pagehome.php">
                    <span class="ca-icon">D</span>
                    <div class="ca-content">
                        <h2 class="ca-main">Home</h2>
                    </div>
                </a>
            </li>
            <li class='has-sub'>
                <a href="settingpage.php">
                    <span class="ca-icon">S</span>
                    <div class="ca-content">
                        <h2 class="ca-main">Setting</h2>
                    </div>
                </a>
                       <!-- this UL will be openning for new submenu
                       <ul>  
                            <li><a href="settingpage.php">         <!-- Edit Here
                                 <span class="ca-icon">S</span>    <!-- Edit Here
                                 <div class="ca-content">          <!-- Edit Here
                                 <h2 class="ca-main">Submenu 1</h2><!-- Edit Here
                                 </div></a>
                            </li>
                            <li> <a href="settingpage.php">        <!-- Edit Here
                                 <span class="ca-icon">S</span>    <!-- Edit Here
                                 <div class="ca-content">          <!-- Edit Here
                                 <h2 class="ca-main">Submenu 2</h2><!-- Edit Here
                                 </div></a>
                            </li>
                       </ul>
                       this UL will be end for new submenu -->
            </li>
        </ul></body>

这是我正在使用的CSS3文件

@font-face {
 font-family: 'WebSymbolsRegular';
 src: url('websymbols/websymbols-regular-webfont.eot');
 src: url('websymbols/websymbols-regular-webfont.eot?#iefix') format('embedded-opentype'),
    url('websymbols/websymbols-regular-webfont.woff') format('woff'),
    url('websymbols/websymbols-regular-webfont.ttf') format('truetype'),
    url('websymbols/websymbols-regular-webfont.svg#WebSymbolsRegular') format('svg');
 font-weight: normal;
 font-style: normal;
}
.ca-menu{
 padding:0;
 margin:5px auto;
 width: 145px;
}
.ca-menu li{
 width: auto;
 height: 50px;
 overflow: hidden;
 position: relative;
 display: block;
 background: #fff;
 -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
 -moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
 box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
 margin-bottom: 4px;
 -webkit-transition: all 300ms ease-in-out;
 -moz-transition: all 300ms ease-in-out;
 -o-transition: all 300ms ease-in-out;
 -ms-transition: all 300ms ease-in-out;
 transition: all 300ms ease-in-out;
}
.ca-menu li:last-child{
 margin-bottom: 0px;
}
.ca-menu li a{
 text-align: left;
 width: 100%;
 height: 100%;
 display: block;
 color: #333;
 position: relative;
}

.ca-icon{
 font-family: 'WebSymbolsRegular', cursive;
 font-size: 20px;
 color: #333;
 text-shadow: 0px 0px 1px #333;
 line-height: 25px;
 position: absolute;
 width: 9px;
 left: 2px;
 text-align: center;
 -webkit-transition: all 300ms linear;
-moz-transition: all 300ms linear;
-o-transition: all 300ms linear;
-ms-transition: all 300ms linear;
transition: all 300ms linear; 
}
.ca-content{
 position: absolute;
 left: 30px;
 width: 370px;
 height: 60px;
 top: 5px;
}
.ca-main{
 line-height: 25px;
 font-size: 15px;
 -webkit-transition: all 300ms linear;
-moz-transition: all 300ms linear;
-o-transition: all 300ms linear;
-ms-transition: all 300ms linear;
transition: all 300ms linear; 
}
.ca-sub{
 font-size: 14px;
 color: #666;
}
.ca-menu li:hover{
 background-color: #000;
}
.ca-menu li:hover .ca-icon{
 color: #f900b0;
 font-size: 120px;
 opacity: 0.2;
 left: -20px;
 -webkit-transform: rotate(20deg);
 -moz-transform: rotate(20deg);
 -ms-transform: rotate(20deg);
 transform: rotate(20deg);
}
.ca-menu li:hover .ca-main{
 color: #f900b0;
 opacity: 0.8;
}
.ca-menu li:hover .ca-sub{
 color: #fff;
 opacity: 0.8;
}

Answer 1

将其添加到样式表的末尾：

.ca-menu .has-sub > ul { display: none; }
.ca-menu .has-sub:hover > ul {
    display: block;
    position: relative;
    left: 100%;
    top: -100%;
    z-index: 10;
    padding: 0;
}
.ca-menu li { overflow: visible; }
.ca-menu a { overflow: hidden; }

并修改以下内容...
...来自第84行：

.ca-menu li:hover .ca-icon{

为：

.ca-menu li:hover > a > .ca-icon{

......来自第94行：

.ca-menu li:hover .ca-main{

为：

.ca-menu li:hover > a > .ca-content > .ca-main{

jsfiddle

在这里您可以找到CSS选择器的一个很好的摘要： http://www.w3schools.com/cssref/css_selectors.asp

如何使用此css添加子菜单

1 个答案: