css - 如何用 CSS 实现这种对角下拉效果？

Question

我正在尝试在 CSS 中实现下拉效果，就像您在此 JPG 中看到的那样。有什么想法可以做到这一点吗？只需要弄清楚如何使它对角线......谢谢！

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

演示