当前位置:首页 > 日记 > 正文

纯HTML+CSS制作三级下拉菜单

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

以上是本文的全部内容,欢迎大家学习完善。

相关文章

一个经典的个性签名签名愤愤不平

一个经典的个性签名签名愤愤不平

愤愤不平,个性签名,经典,电脑软件,记得让你最后一次感到困的时候,它是在什么签名,你首先想到的是下面请欣赏萧边推荐一个憋屈的签名。 在签名的选择愤愤不平: 1)解释是面具,面具是故事。 2)保护自己和爱别人,请不要在午夜出来害怕。 3)只是因为…

excel系列总结教程excel基础

excel系列总结教程excel基础

教程,系列,基础教程,电脑软件,基础,求和表是excel中最常用的函数之一。如果你的朋友不知道你需要学习这个功能,你可以吸取教训。接下来是教程Excel你带给萧边,供你参考。 excel一系列总结教程: 一个求和步骤1:选择刚才的数字,看看平均值、计数…

如何用QQ电脑管家来清理QQ的安全插

如何用QQ电脑管家来清理QQ的安全插

插件,管家,如何用,电脑软件,QQ,在计算机中,通常有许多无用的插件。为了节省计算机空间,我们可以用QQ电脑管家清理这些无用的插件。现在让萧边告诉你如何使用QQ电脑管家清理插件。 用QQ电脑管家来清理插件 首先,用户需要下载并安装腾讯电脑管…

解压缩文件为什么记忆是巨大的

解压缩文件为什么记忆是巨大的

文件,解压缩,记忆,电脑软件,问:我的系统内存为8GB,通常没有太多的记忆,也大约1GB,但每次提取压缩文件为例,提取7 ~ 8gb文件解压过程的记忆会一直上升,甚至占据了超过7GB,当鼠标拖动一卡一卡。有解决办法 答:解压缩文件不是特别的内存消耗,和你的情…

WPS如何隐藏音乐播放图标

WPS如何隐藏音乐播放图标

图标,音乐播放,电脑软件,WPS,把音乐添加到演示中可以给演讲过程增添一些色彩,使整个过程变得精彩,但不够的是会有一个插入音乐后,播放按钮,它的存在确实影响了美感,分散了我们的视线,那么我们如何隐藏音乐播放图标呢这是一个小技巧,只需几个步骤就…

关于存储格式的安排(BMP格式介绍)

关于存储格式的安排(BMP格式介绍)

格式,电脑软件,BMP,BMP BMP(全名位图)是Windows操作系统中的标准图像文件格式。 它可以分为两类:设备相关位图(DDB)和设备无关位图(DIB),它的应用非常广泛。 除了图像的深度以外,它使用了一种位图存储格式,除了其他任何压缩方式。因此,BMP文件占用…

轻松插入纸

轻松插入纸

轻松,电脑软件,已经有在WPS Office 2009提供了WPS WPS文字格式的设置,但论文格式默认设置对整个文档,不仅为论文格式半页或一个或两个页面,这是一个主要的缺点。毕竟,当教师在语文试卷的编制,经常需要插入一些论文格式在一张纸上,混合排版的文本…

PHP使用ffmpeg添加文本字幕的视频

PHP使用ffmpeg添加文本字幕的视频

字幕,文本,视频,电脑软件,PHP,本文主要介绍了PHP使用ffmpeg添加字幕的视频的方式。实例分析了PHP运行ffmpeg的技能添加字母视频,具有一定的参考价值和需要的朋友参考。 本文的例子讲方法,PHP使用ffmpeg添加字幕显示视频,分享给大家仅供参考。…

如何在传统WPS表单中简化成wordWPS

如何在传统WPS表单中简化成wordWPS

文本,教程,表单,传统,如何在,如果我们需要中国传统人物完成后编辑文件都转换成简体中文,那我应该怎么做,别担心,让萧边告诉你如何在传统的WPS表格将字的简化方法。 在传统WPS形式中,Word简化为方法: 打开WPS软件并创建一个新软件。以下是几句…

PS创意风格图标画家立体钢琴

PS创意风格图标画家立体钢琴

图标,创意,画家,钢琴,风格,本教程教学习者使用ps PS画家的创作钢琴图标,渲染出来的图标很有创意,立体感强。在压平的时候,我更喜欢这种效果,推荐它,一起学习吧。 以上方法是PS钢琴图标画家创作的立体风格,很好的教程,推荐一看!…

如何插入word文档链接ppt基本教程p

如何插入word文档链接ppt基本教程p

文档,教程,链接,电脑软件,word,在日常工作中,PPT经常用来写草稿。如果我们需要把word文档链接插入PPT,我们如何插入它让我们告诉你如何在PPT中插入word文档链接。 PPT中word文档链接的插入方法: 打开PPT软件,点击插入按钮。 单击文本框插入Wo…

如何调整PPT表行ppt制作高级教程

如何调整PPT表行ppt制作高级教程

教程,调整,高级,电脑软件,ppt,我们在PPT中添加的表格通常需要调整它们的行的高度。它可能不知道如何操作新来者。让我们来告诉你如何调整PPT表格的高度。 调整PPT表行高度的方法 1。选择表单,表单工具(布局)mdash;mdash;配电线路,使所有行均匀…