css - CSSでこの斜めのドロップダウン効果を実現するにはどうすればよいですか?

Question

このJPGに見られるように、CSSでドロップダウン効果を実現しようとしています..これを行う方法はありますか? 斜めにする方法を理解する必要があります...ありがとう！

Answer 1

これを試してみてください

<ul class="menu">
    <li ><p class="inner">Item 1</p>
        <ul>
            <li  class="inner">sub menu 1</li> 
            <li class="inner">sub menu 2</li>   
            <li class="inner">sub menu 3</li>   
            <li class="inner">sub menu 4</li>               
        </ul>     
    </li>
    <li class="inner"><p class="inner">Item 2</p>
        <ul>
            <li class="inner">sub menu 1</li> 
            <li class="inner">sub menu 2</li>   
             <li class="inner">sub menu 3</li>   
            <li class="inner">sub menu 4</li>               
        </ul>     
    </li>
</ul>
​

CSS：

.menu{
   margin:20px;
}
.menu > li {
    margin:0px 10px;            
    width:70px;
    display:inline-block;
    float:left;
    width: 120px;
    height: 100px;
    -webkit-transform: skew(-20deg,0);
       -moz-transform: skew(-20deg,0);
         -o-transform: skew(-20deg,0);     
            -ms-transform: skew(-20deg,0);   
              transform: skew(-20deg,0);  
}
.menu>li:hover{
   background: #4BA2E9;
   color:white;
}
.menu li:hover  ul {
   display:block;
 }

.menu li ul{
    display:none;
    color:Blue;
}
.inner{
        -webkit-transform: skew(20deg,0);
           -moz-transform: skew(20deg,0);
             -o-transform: skew(20deg,0); 
               -ms-transform: skew(20deg,0);   
                  transform: skew(20deg,0);  
}

デモ