H5+CSS实现三级菜单（包括水平、垂直菜单和网页架构）

用H5和CSS实现三级菜单以及基本网页架构。
代码如下，仅供参考：

在这里插入代码片
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CSS实现三级菜单</title>
</head>
<style>*{padding:0;margin:0;}header{width:100%;height:100px;background-color: cyan;}.one{width:33%;height:100px;background-color: coral;float:left;margin-right: 6px;margin-bottom: 5px;border-bottom: 1px solid #234567;}.two{width:33%;height:100px;background-color: coral;float:left;margin-right: 6px;margin-bottom: 5px;border-bottom: 1px solid #234567;}.three{width:33%;height:100px;background-color: coral;float:right;margin-bottom: 5px;border-bottom: 1px solid #234567;}footer{width:100%;height:200px;background-color: cyan;margin-top: 418px;}nav{margin-left: 170px;position: absolute;top:58px;}a{text-decoration: none;display: block;font-weight: bold;line-height: 40px;height:40px;text-align: center;padding:0px 10px;border-right: solid 1px #fff;background-color: darkgoldenrod;color:#fff;}ul li a:hover{background: crimson;}/*一级菜单背景色*/ul li{float:left;list-style: none;position:relative;}ul li ul{position:absolute;display: none;}ul li:hover ul{display:block;}/*当鼠标放到一级菜单上，二级菜单显示*/ul li ul li{float:none;width:90px;top:1px;}ul li ul li a{border-right: none;margin-top: 1px;}ul li ul li a:hover{background: darkblue;}/*二级菜单背景色*/ul li ul li ul li a:hover{background: black;}/*三级菜单背景色*/ul li:hover ul li ul{display:none;}/*当鼠标放在一级菜单的上面，三级菜单不显示*/ul li ul li ul li a{margin-left:90px;width:70px;}ul li ul li:hover ul{display:block;}/*当鼠标放在二级菜单的上面，三级菜单显示*/ul li ul li ul{position:absolute;display: none;}ul li ul li ul li{top:-41px;margin-left: 1px;}.ones{margin-bottom: 10px;}
</style>
<body>
<header><nav><ul><li><a href="#">消息中心</a></li><li><a href="#">联系人</a><ul><li><a href="#">我的好友</a></li><li><a href="#">我的分组</a></li><li><a href="#">我的群聊</a><ul><li><a>家人群</a></li><li><a>同学群</a></li><li><a>好友群</a></li><li><a>陌生人群</a></li></ul></li><li><a href="#">我的设备</a></li></ul></li><li><a href="#">新闻看点</a></li><li><a href="#">好友动态</a></li><li><a href="#">关于自己</a></li></ul></nav>
</header>
<section class="ones"><article class="one"></article><article class="two"></article><article class="three"></article>
</section>
<section class="twos"><article class="one"></article><article class="two"></article><article class="three"></article>
</section>
<section class="threes"><article class="one"></article><article class="two"></article><article class="three"></article>
</section>
<section class="fours"><article class="one"></article><article class="two"></article><article class="three"></article>
</section>
<footer></footer>
</body>
</html>

H5+CSS实现三级菜单（包括水平、垂直菜单和网页架构）相关推荐

html导航栏圆角,纯css实现蓝色圆角效果水平导航菜单代码
纯css实现蓝色圆角效果水平导航菜单代码这是一款可爱的蓝色圆角水平导航菜单,用到几张背景图片,我觉得这款菜单挺实用,特别是用在个人博客中非常合适.在兼容性方面做的'也很好,几乎兼容所有的浏览器. 运 ...
纯css实现蓝色圆角效果水平导航菜单代码
这是一款可爱的蓝色圆角水平导航菜单,用到几张背景图片,我觉得这款菜单挺实用,特别是用在个人博客中非常合适.在兼容性方面做的也很好,几乎兼容所有的浏览器. 运行效果截图如下: 代码如下: <!DO ...
【CSS】绝对定位元素设置水平 / 垂直居中 ( 绝对定位元素居中设置 - 先偏移 50% 再回退子元素一半尺寸 | 绝对定位居中设置 )
文章目录一.问题提出二.绝对定位居中设置 1.设置固定尺寸 2.先偏移50%再回退固定值三.绝对定位元素水平 / 垂直居中一.问题提出绝对定位不能通过设置 margin: auto ...
CSS span标签中文字水平垂直对齐
1.text-align: center--水平居中仅对文字.图片.按钮等行内元素有效(display设置为inline或inline-block等)进行水平居中 2.height:60px;lin ...
CSS基础学习--17 布局 - 水平垂直对齐
一.元素居中对齐要水平居中对齐一个元素(如 <div>), 可以使用 margin: auto;.设置到元素的宽度将防止它溢出到容器的边缘.元素通过指定宽度,并将两边的空外边距平均分配: ...
如何用css实现一个盒子的水平垂直方向的居中
1)先将元素通过top:50%和left:50%定位到页面的中心,然后再通过translate来调整元素的中心点到页面的中心.该方法需要考虑浏览器兼容问题 .parent { position: ...
CSS实现的带头像的彩色垂直菜单源码
大家好,今天给大家介绍一款,用CSS实现的带头像的彩色垂直菜单源码(图1).送给大家哦,获取方式在本文末尾. 图1 鼠标悬停在相应区域,就会出现头像图2 带切换动画(图3) 图4 部分代码: * { ...
水平导航菜单（DIV+CSS）
水平导航菜单(DIV+CSS) 完全用DIV+CSS做的菜单,相比传统用图片做的打开速度更快.预览最终效果>> #nav{height: 44px;width: 425px;backgro ...
CSS 中的各种居中 (水平、垂直)
导读: CSS 的居中有水平居中和垂直居中,这两种居中又分为行内元素居中和块级元素居中.根据父.子元素的高度是否清楚,又会使得不同的居中用不同方法.本文就其中一些情况做下简单说明,以作笔记之用,仅供大 ...

H5+CSS实现三级菜单（包括水平、垂直菜单和网页架构）

H5+CSS实现三级菜单（包括水平、垂直菜单和网页架构）相关推荐

最新文章

热门文章