web前端实战系列[4]—

1.代码

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title>三级菜单</title><style type="text/css">.top-nav{ font-family: "Microsoft Yahei"; font-size: 12px; font-weight: bold;list-style: none;  margin: 0 auto;padding: 0 auto;}.top-nav li{ float:left; margin-right: 1px; }.top-nav li a{ line-height: 20px; text-decoration: none; background-color: #eee; color: #666;display: block; width: 80px; text-align: center;}.top-nav li ul{ display: none; list-style: none; padding:0;position:relative; }/*最后一句解决了二级菜单和一级菜单没对齐的问题*//*鼠标移动到超链接上菜单变色*/.top-nav li a:hover{background-color:blue; color:white; }/*鼠标移动到一级菜单的时候要显示二级菜单*/.top-nav li:hover ul{ display: block; width: 80px; background-color: #827bdd; }/*二级菜单显示的时候需要隐藏三级菜单*/.top-nav li:hover ul li ul{ display: none; }/*三级菜单在二级菜单范围内浮动*/.top-nav li ul li:hover ul{ display: block; top:0; left:81px; position: absolute;}</style></head>
<body><ul class="top-nav"><li class="firstMenu"><a href="#">首页</a></li><li class="firstMenu"><a href="#">课程大厅+</a><ul><li><a href="#">前端+</a><ul><li><a href="#">JavaScript</a></li><li><a href="#">JQuery</a></li><li><a href="#">CSS</a></li></ul></li><li><a href="#">后台</a></li><li><a href="#">手机</a><ul><li><a href="#">Android开发</a></li><li><a href="#">IOS开发</a></li></ul></li></ul></li><li class="firstMenu"><a href="#">学习中心+</a><ul><li><a href="#">视频学习</a></li><li><a href="#">案例学习</a></li><li><a href="#">交流平台</a></li></ul></li><li class="firstMenu"><a href="#">经典案例</a></li><li class="firstMenu"><a href="#">关于我们</a></li></ul>
</body>
</html>

2.总结

1).去列表前面的圆点：list-style:none.
2).怎么让二级菜单竖着排列？加width。

转载于:https://www.cnblogs.com/helloIT/articles/5155892.html

web前端实战系列[4]——多级菜单相关推荐

web前端实战系列[1]——三列布局
1.代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...
【Web前端学习系列01】—HTML
[Web前端学习系列01]-HTML HTML 基本标签-head head title标签 meta标签 link标签 style标签 script标签 base标签文本标题标签 h 段落标签 ...
Web前端技术分享：CSS菜单图标相关知识
CSS是一种用来表现HTML或XML等文件样式的计算机语言,它是Web前端人才必须要掌握的基础技能之一.想要学习Web前端,最开始的基础学习一定是CSS.接下来我就给大家简单分享CSS菜单图标相关知识 ...
40个web前端实战项目，练完即可就业，从入门到进阶，基础到框架，html_css【附视频+源码】
当下前端开发可以说是一个比较火的职业,所以学习的人比较多,不管是培训还是自学都是希望通过前端可以找到一份好的工作,但是很多自学的朋友在自学过程中有些盲目,不仅大大降低了学习的效率,而且也会打击自己的学 ...
【2022最新版】Web前端实战教程
随着互联网与移动互联网的迅猛发展和普及,传统的站点已经不在能满足人们的需求.而现在网上购物,网上直播,网上订餐等都已经成为生活的一部分.而这些内容的呈现,就是 WEB 前端的展示.当你在朋友圈,好 ...
前端实战系列：如何开发微信小程序
[课程简介] 小程序开发相对于App开发,开发快捷推广成本低,依托微信平台非常好推广,市面上很多企业现在都想开发自己的小程序.本次课程带大家开发一个小程序,从账号注册到编写全流程讲解,实现一个< ...
Python Web前端实战案例——电商网站商品菜单导航栏
jQuery是一个快速.小巧.轻量级的.写的少.做的多.功能丰富的 JavaScript 库,是目前最流行的 JS 框架.利用它可以帮我们快速实现一些炫酷的效果. 目录 1 原理先知 2 思路概要 3 ...
【2023最新】32个web前端实战项目，练完即可就业，从入门到进阶，基础到框架，你想要的全都有，建议码住！
1.[网易云音乐首页制作] 2.[实战项目之今日头条] 3.[实战项目之拉勾网] 4.[ReactNative项目之美食APP] 5.[uni-APP项目实战教程] 6.[React项目管理后台系统] ...
web前端复习系列[1]——标签
<h1>一般用于网站标题. 加入强调语气,使用<strong>和<em>标签.<em> 表示强调,<strong> 表示更强烈的强调.并且在 ...

web前端实战系列[4]——多级菜单

1.代码

2.总结

web前端实战系列[4]——多级菜单相关推荐

最新文章

热门文章