纯HTML+CSS制作三级下拉菜单
1.html代码
xml代码将内容复制到剪贴板。
三级下拉菜单导航栏
手机数码冲印
移动电话
小米
华为
魅族
电脑类
平
笔记本
桌面
照相机
男装女装尺寸
夹克
衬衫
T恤
裤子
牛仔裤
休闲裤
Outdoor sports come
运动鞋
运动装
体育器材
时尚百货店
法国的使用寿命
万能的支付
充水
电费
教育和培训
预付费充值
吃的食物
家用纺织品尺寸
床上用品
被子
枕头
客厅家具
茶具
沙发
椅子
2.css代码
CSS代码将内容复制到剪贴板。
* {
填充:0;
保证金:0;
}
UL {
列表样式类型:无;
}
三角形{。
字体大小:1em;
颜色:白色;
}
一个{
文字装饰:无;
文本对齐:中心;
字体重量:大胆;
}
导航
UL
浮点数:左;
border: 1px solid灰色;
左缘:10%;
边距:10px;
边界半径:4px;
位置:固定;
}
ul.nav李{
浮点数:左;
宽度:9em;
背景颜色:黄绿色;
}
ul.nav一{
显示块;
颜色:白色;
行高:1.5em;
右:白色边框1px solid;
左:白色边框1px solid;
填料:5px;
}
ul.nav:悬停,
ul.nav:焦点{
颜色:黑色;
背景颜色:# 98fb98;
不透明性:0.5;
}
ul.nav李:第一个孩子{
左边框:0;
边界底部:0;
}
ul.nav李:去年孩子{
边界权:0;
边界底部:0;
}
两个导航
Ul.nav Li UL {
宽度:10em;
位置:绝对;
左:- 1000em;
}
李:ul.nav悬停UL {
宽度:10em;
左:汽车;
}
Ul.nav Li UL {
边境上:1px solid白色;
底部边框:1px solid白色;
左边框:0;
边界权:0;
}
三导航
李:UL Li ul.nav悬停UL {
宽度:10em;
位置:绝对;
左:- 1000em;
}
ul.nav李:李:悬停悬停UL UL {
左:汽车;
左:9.1em保证金;
边距:-2.1em;
}
李:ul.nav悬停ul:UL Nav1 {盘旋。
左:汽车;
左:-9.1em保证金;
边距:-2.1em;
}
以上是本文的全部内容,欢迎大家学习完善。