我正在尝试在 CSS 中实现下拉效果,就像您在这张 JPG 中看到的那样。有什么想法可以做到这一点吗?只需要弄清楚如何使它沿对 Angular 线移动...谢谢!
最佳答案
试试这个可能会有帮助
<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);
}
关于css - 如何用CSS实现这种对 Angular 线下拉效果?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12921472/