当前位置：首页 > 经验 > 数码摄影 > 电脑

css技巧分享：怎么用css制作横排二级下拉菜单

关注：45 发布时间：2021-10-01 10:32:01

导语本文整理了css技巧分享：怎么用css制作横排二级下拉菜单经验知识，帮助您全面了解，小白也能成为高手，跟随小编一起来看一看吧！

需要准备的物品

笔记本

浏览器

详细介绍方法/步骤

打开记事本，先输入个页面框架

！声明文档类型

html xmlns=" http://www .w3。org/1999/xhtml "

伸角

/hade

身体

/body

框架好了，那么就该定义页面的标题，关键词关键字，和描述描述

meta charset=" utf-8 " content=" text/html " http-equiv=" content-type "

标题纯钢性铸铁二级导航下拉菜单/title

元名称="关键字"内容="搜狗略懂"

元名称="描述"内容="描述"

这些内容只能在头部/头部中完成。

定义页面使用的钢性铸铁样式，也是需要在头里定义的。

style type="text/css "

* {

边距n:0

padding:0

}。jiao ul li a:hover{

颜色： #红色；

}

ul，li {

列表样式：无；

}

a {

text-decoration : none

}。娇{

border:5px实心#粉色；

右边框：无；

飞越：隐藏；

float:left

余量：200px 0 0 600px

}。阿利

边框-右：实心；

border-top:2px虚线# 666;

背景： #黑色；

}。焦裕利{ float:left}。焦阿利{横向：150像素；高度：80 pxtext-中心对齐：行高：100 pxdisplay : block border-right :5 px实心#红色；背景： #红色： #红色；}。jiao ul li ul {位置：；display:none}。jiao ul li :悬停ul {显示：块；}。焦裕利{ float:none}

！- navul只选择航行下一级里面的保险商实验所元素

nav ul选择航行内所包含的所有保险商实验所元素

navul比nav ul限定更严格，必须后面的元素只比前面的低一个级别。

这里根据你的需求来自己定义。

-

/style

添加一个差异标签，在页面中划分出一个块来，用来显示。

差异中所用的样式为刚才咱们声明的样式"娇"这个盒子来描述

然后使用无序标签保险商实验所样式里来实现模块。

div class="jiao "

保险商实验所

lia href="# "搜狗略懂/a

保险商实验所

lia href="# "搜狗问问/a/li

lia href="# "搜狗输入法/a/li

lia href="# "搜狗浏览器/a/li

lia href="# "搜狐/a/li

/ul

/div

放上全部的代码吧，可以参考一下啊，

！声明文档类型

html xmlns=" http://www .w3。org/1999/xhtml "//允许你通过一个网址来识别你的标记

头

meta http-equiv=" content-type " content=" text/html；charset=utf-8" /

元名称="关键字"内容="利用钢性铸铁实现下拉菜单"

元名称="描述"内容="搜狗略懂、css分享"

titlecss实现下拉导航栏菜单/title

style type="text/css "

* {

边距n:0

padding:0

}。jiao ul li a:hover{

颜色： #红色；

}

ul，li {

列表样式：无；

}

a {

text-decoration : none

}。娇{

border:5px实心#粉色；

右边框：无；

飞越：隐藏；

float:left

余量：200px 0 0 600px

}。阿利

边框-右：实心；

border-top:2px虚线# 666;

背景： #黑色；

}。焦裕利{ float:left}。焦阿利{横向：150像素；高度：80 pxtext-中心对齐：行高：100 pxdisplay : block border-right :5 px实心#红色；背景： #红色： #红色；}。jiao ul li ul {位置：；display:none}。jiao ul li :悬停ul {显示：块；}。焦裕利{ float:none}

！- navul只选择航行下一级里面的保险商实验所元素

nav ul选择航行内所包含的所有保险商实验所元素

navul比nav ul限定更严格，必须后面的元素只比前面的低一个级别。

这里根据你的需求来自己定义。

-

/style

/head

身体

div class="jiao "

保险商实验所

lia href="# "搜狗略懂/a

保险商实验所

lia href="# "搜狗问问/a/li

lia href="# "搜狗输入法/a/li

lia href="# "搜狗浏览器/a/li

lia href="# "搜狐/a/li

/ul

/li

/ul

/div

/body

/html

如果要添加更多的菜单，只需要后边继续添加ul/li即可

温馨提示

在写代码的过程中，一定要记得换行，开头留白，不然后面会有发现，甚至不知道写什么。如何谈在哪里找？

猜你喜欢

  • 搜狗输入法的翻页键是什么

    搜狗输入法的翻页键是什么14人喜欢

    搜狗输入法的翻页键是什么，如何设置翻页键？以下小系列教你。详细介绍方法/步骤首先，我们右击搜狗输入法悬浮窗口左侧的位置；弹出界面，我们点击设置属性；弹出界面，我们点击按钮；我们可以看到翻页按钮。我…

    更新时间：2021-08-03 14:17:02

  • 电脑怎么做系统

    电脑怎么做系统20人喜欢

    1.首先，我们搜索pe工具箱官方网站下载软件。如果没有系统映像，我们可以搜索“我告诉你”网站下载系统。2.下载后将默认安装pe工具箱(请在运行安装程序之前关闭防病毒软件和安全软件。这个软件涉及…

    更新时间：2021-12-23 17:01:01

  • 系统还原后电脑开机黑屏怎么办?

    系统还原后电脑开机黑屏怎么办?22人喜欢

    1.重启电脑。如果能正常进入系统，说明最后的异常只是偶然的程序或系统操作错误，没关系。2.如果您不能经常正常进入系统，请在启动后立即按f8键，查看您是否可以最后一次进入安全模式或配置正确的模式。…

    更新时间：2022-05-05 11:00:05

  • 电脑为什么总是自动断网?

    电脑为什么总是自动断网?92人喜欢

    1.网线接触不良：首先检查网线是否接触不良。建议再次拔下网线，或者更换网线试试。有时网线老化或被鼠标咬到，会导致网络自动掉线。2.需要重置网络：搜索命令提示符，然后右击以管理员身份运行，然后输入ne…

    更新时间：2022-02-03 15:01:12

  • 用ps怎么快速做出一个空心的椭圆？

    用ps怎么快速做出一个空心的椭圆？43人喜欢

    用ps做一个空心椭圆。网上有很多教程，但是步骤太麻烦。小编想出了一个非常简单的方法。我们来看看。详细介绍方法/步骤单击文件-新建创建新画布。我们画一个长方体，长约14厘米，宽约5厘米；点击滤镜-失…

    更新时间：2021-09-22 19:01:05

  • 手机迅雷怎么更改设置文件的下载路径

    手机迅雷怎么更改设置文件的下载路径34人喜欢

    大家都会用迅雷下载一些视频，但是你要下载到指定路径就知道该怎么做了。现在我教你如何用手机迅雷改变设置文件的下载路径。详细介绍方法/步骤首先打开手机迅雷软件，如图1所示。点击右下角的我，会出…

    更新时间：2021-11-04 10:46:01

  • 电脑蓝屏0000000e9怎么解决

    电脑蓝屏0000000e9怎么解决30人喜欢

    1.先按f8键启动机器，然后进入操作和卸载的安全模式(或选择是否可以在最后一次正确配置后进入系统)。2.进入安全模式如下：右键点击我的电脑-属性-高级-启动和修复-设置；删除“系统故障”下的三个复选…

    更新时间：2022-01-03 10:46:02

  • 老式电脑机箱插线方法

    老式电脑机箱插线方法64人喜欢

    1.安装时需要插入许多针脚，如电源、usb、指示灯等。如果安装的时候不知道怎么连接，只需要在主板上找英文和一对一的连接。(接线时，连接器上的英文要对着主板上的英文。).2.电源led-是电源指示灯的正…

    更新时间：2021-12-24 14:31:05

  • 电脑自动关机是怎么回事

    电脑自动关机是怎么回事58人喜欢

    1.电脑散热不好，室温高或风扇转数不够导致系统过热，导致电脑自动关机。建议检查电脑的风扇工作是否正常。2.电脑机箱上灰尘过多会导致电脑短路或散热不良。你可以打开机箱，用吹风机除尘。3.病毒，病毒…

    更新时间：2022-03-30 14:15:01

  • 电脑怎么开麦

    电脑怎么开麦24人喜欢

    1.在[开始]菜单栏中选择[控制面板]。2.点击[声音]。3.单击[记录]列。4.双击[麦克风]。5.选择[级别]选项。6.调节麦克风声音。7.检查是否静音。8.如果静音，请点按[喇叭]以打开图标。…

    更新时间：2021-12-23 10:31:01

  • excel怎么统一在一列前加符号

    excel怎么统一在一列前加符号47人喜欢

    excel怎么把符号放在一列前面？以下小系列教你。详细介绍方法/步骤首先，我们在电脑上打开excel，然后我们在表格的一列中输入一些数字。；，我们在第一个数字后面的单元格中输入="aa"b2，然后按回车键。后，我…

    更新时间：2021-11-25 07:00:28

  • 笔记本电脑无线信号满格却无法连接上网怎么办

    笔记本电脑无线信号满格却无法连接上网怎么办130人喜欢

    1.首先，您可以尝试重启无线路由器。因为无线路由器也是硬件和软件的产物，会死机。重启可以解决很多问题，比如路由崩溃，网络断开。2.如果两条路由一起使用，则判断两台路由器的ip或dhcp可能冲突，需要重置…

    更新时间：2022-05-12 16:15:04

电脑热门经验