0

この垂直メニュー バーにサブメニューを作成したいと考えています。サブメニューを作成するには 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>

ユーザーがこのメニュー（設定）にカーソルを合わせたときに、さらに2つの垂直サブメニューを追加したい..このように

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

1 に答える 1