css弄下拉菜单 |css3 文字弯曲

/* 基础的下拉菜单样式 */
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}
/* 横向下拉菜单样式 */
.dropdown-horizontal {
display: inline-block;
position: relative;
}
.dropdown-content-horizontal {
display: none;
position: absolute;
right: 0;
z-index: 1;
}
.dropdown-horizontal:hover .dropdown-content-horizontal {
display: block;
}
/* 垂直下拉菜单样式 */
.dropdown-vertical {
position: relative;
display: inline-block;
}
.dropdown-content-vertical {
display: none;
position: absolute;
top: 100%;
z-index: 1;
}
.dropdown-vertical:hover .dropdown-content-vertical {
display: block;
}

以上代码是三种下拉菜单的基本CSS样式，分别为基础下拉菜单、横向下拉菜单和垂直下拉菜单。其中，基础下拉菜单的原理是将下拉菜单内容设为绝对定位，通过:hover效果使其展开。横向下拉菜单和垂直下拉菜单基本相同，只是在下拉菜单的方向上略有不同。

下面是示例代码：

<div class="dropdown">
<button>下拉菜单</button>
<div class="dropdown-content">
<a href="#">选项1</a>
<a href="#">选项2</a>
<a href="#">选项3</a>
</div>
</div>
<div class="dropdown-horizontal">
<button>横向下拉菜单</button>
<div class="dropdown-content-horizontal">
<a href="#">选项1</a>
<a href="#">选项2</a>
<a href="#">选项3</a>
</div>
</div>
<div class="dropdown-vertical">
<button>垂直下拉菜单</button>
<div class="dropdown-content-vertical">
<a href="#">选项1</a>
<a href="#">选项2</a>
<a href="#">选项3</a>
</div>
</div>

将以上代码复制到你自己的HTML文件中，你将可以看到三种不同的下拉菜单效果。

当然，以上只是CSS下拉菜单的基础应用，还有更多的扩展和变化。如果你感兴趣，可以进一步了解CSS下拉菜单的详细技巧。