CSS实现三级菜单[转]

头部导航条布局

html代码：

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8">

     <title>头部导航条制作</title>

     <link rel="stylesheet" type="text/css" href="css/master8.css">

 </head>

 <body>

 <div class="navbox">

     <ul class="clearfix">

         <li><a href="#">首页</a></li>

         <li><a href="#">资讯</a></li>

         <li><a href="#">web前端</a></li>

         <li><a href="#">前端新闻</a></li>

         <li><a href="#">联系我们</a></li>

         <li><a href="#">关于我们</a></li>

     </ul>

 </div>

 </body>

 </html>

用无序列表制作头部导航条：

无序列表是上下布局排列的，那我们需要思考的是让他左右布局的方式排列
左右排列的方式我们所用的是float:left;浮动的方法让li左右布局

CSS样式：

 .navbox{

    width: 960px;

    height: 40px;

    margin: 20px auto;

    background: #08c;

 }

 .navbox >ul>li{

    float: left;

    width: 160px;

    height: 40px;

    line-height: 40px;

    text-align: center;

    font-size: 16px;

 }

鼠标移入时实现颜色的变换

HTML代码：

 <div class="navbox">

     <ul class="clearfix">

         <li><a href="#">首页</a></li>

         <li><a href="#">资讯</a></li>

         <li><a href="#">web前端</a></li>

         <li><a href="#">前端新闻</a></li>

         <li><a href="#">联系我们</a></li>

         <li><a href="#">关于我们</a></li>

     </ul>

 </div>

思路：
鼠标移入时每个<li>显示为另一种颜色background: #00bfff;
css代码：

 .navbox ul li a{

     display: block;

     color: #fff;

     background: #08c;

 }

 .navbox ul li a:hover{

     text-decoration: none;

     background: #00bfff;

 }

下拉菜单实现

html：

 <div class="navbox">

     <ul class="clearfix">

         <li><a href="#">首页</a></li>

         <li><a href="#">资讯</a></li>

         <li><a href="#">web前端</a>

             <ul class="subnav">

                 <li><a href="#">HTML</a></li>

                 <li><a href="#">CSS</a></li>

                 <li><a href="#">JavaScript</a></li>

             </ul>

         </li>

         <li><a href="#">前端新闻</a></li>

         <li><a href="#">联系我们</a></li>

         <li><a href="#">关于我们</a></li>

     </ul>

 </div>

思路：
在一级菜单web前端下实现二级菜单<ul class="subnav">

html
css
JavaScript
当鼠标移入菜单时web前端时显示二级菜单，移出时隐藏；
CSS代码实现：

 .subnav{

     display: none;

 }

 /*鼠标没有移入“web前端”选项栏时二级菜单隐藏*/

 .navbox ul li:hover .subnav{

     display: block;

 }

 /*当鼠标移入“web前端”选项栏时显示二级菜单*/

三级菜单实现

 <div class="navbox">

     <ul class="clearfix">

         <li><a href="#">首页</a></li>

         <li><a href="#">资讯</a></li>

         <li><a href="#">web前端</a>

             <ul class="subnav">

                 <li><a href="#">HTML</a></li>

                 <li><a href="#">CSS</a>

                     <ul class="threenav">

                         <li><a href="#">css1</a></li>

                         <li><a href="#">css2</a></li>

                         <li><a href="#">css3</a></li>

                     </ul>

                 </li>

                 <li><a href="#">JavaScript</a></li>

             </ul>

         </li>

         <li><a href="#">前端新闻</a></li>

         <li><a href="#">联系我们</a></li>

         <li><a href="#">关于我们</a></li>

     </ul>

 </div>

思路：
前面与二级菜单思路相似唯一不同的是三级菜单显示的位置。

我们看看css的绝对定位与相对定位这篇文章

CSS代码：

 .subnav>li{

     position: relative;

 }

 .threenav{

     position: absolute;

     top: 0;

     left: 160px;

     width: 160px;

 }

 .subnav, .threenav{

     display: none;

 }

 .subnav li:hover .threenav{

     display: block;

 }

最后实现的效果如下图：

CSS实现三级菜单[转]的更多相关文章

纯css制作三级菜单
<!DOCTYPE html> <html> <head> <title>三级菜单</title> <meta charset=&qu ...
css三级菜单效果
一个简单实用的css三级菜单效果 <!doctype html> <html> <head> <meta charset="utf-8"& ...
用css实现三级导航菜单
主要使用css的hover伪类来实现该功能. 主要思路:先搭出三级菜单的框架,然后使用css的:hover来实现! 对li添加类selected,对该类添加position:relative属性,然后 ...
CSS打造三级下拉菜单
<html><head><meta http-equiv="Content-Type" content="text/html; charse ...
JS+CSS打造三级折叠菜单，自动收缩其它级 js
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="C ...
HTML+CSS实现简单三级菜单
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
css 实现三级联动菜单
昨天因为项目中想要把二级联动菜单改成三级联动菜单,所以我就单独写了一个tab导航栏,用纯css的方式实现的三级联动.一开始我想着可以用js实现,但是js的hover事件和mouseenter,mous ...
js左侧三级菜单导航实例代码
在左侧三级菜单导航想必大家都见到过吧,它的实现过程也并不复杂,下面有个不错的示例,感兴趣的朋友可以了解下实例代码: <!DOCTYPE html PUBLIC "-//W3C// ...
Web前端开发实战6：CSS实现导航菜单结合二级下拉式菜单的简单变换
前面几篇博文都在讲导航菜单和二级下拉式菜单,事实上有非常多方法都能够实现的.详细的情况还要视情况而定. 在后面学习到jQuery框架之后,会有更丰富的动画效果.因为在学习Ajax和jQuery的初步阶 ...

随机推荐

http各个状态码的含义
http各个状态码的含义:由三位数字组成,第一位定义了状态码的类型常见状态码及解决方法 404:找不到,地址错误 500:逻辑错误 400:一般是入参不匹配 504:超时 2开头:(请求成功)表示成 ...
handy源码阅读（一）：EventBase类
类EventBase继承于类EventBases,继承于noncopyable. 其中noncopyable是一个去除了拷贝构造和赋值构造的类. noncopyable: class noncopy ...
2，ArrayList
一,ArrayList简介 1,ArrayList 是一个数组队列,相当于动态数组.与Java中的数组相比,它的容量能动态增长. 2,ArrayList 继承了AbstractList,实现了List ...
CKeditor粘贴图片在IE下自动上传的研究
我司需要做一个需求,就是使用富文本编辑器时,不要以上传附件的形式上传图片,而是以复制粘贴的形式上传图片. 在网上找了一下,有一个插件支持这个功能. WordPaster 安装方式如下: 直接使用Wor ...
[CF1166C]A Tale of Two Lands题解
比赛的时候lowerbound用错了现场WA on test4(好吧我承认我那份代码确实有除了lowerbound以外的问题) 于是只能手动二分 (我好菜啊QAQ 经过一波数学推算,我们发现,设序列 ...
atoi()和stoi()函数
C++的字符处理函数,把数字字符串转换成int输出头文件都是#include<cstring> atoi()的参数是 const char* ,因此对于一个字符串str我们必须调用 c_ ...
（线性基）Operation
http://acm.hdu.edu.cn/showproblem.php?pid=6579 线性基https://blog.csdn.net/a_forever_dream/article/deta ...
IntelliJ IDEA最新版配置Tomcat（完整版教程）
查找该问题的童鞋我相信IntelliJ IDEA,Tomcat的下载,JDK等其他的配置都应该完成了,那我直接进入正题了. 1.新建一个项目 2.由于这里我们仅仅为了展示如何成功部署Tomcat,以及 ...
如何把vue.js项目部署到服务器上
如何把vue.js项目部署到服务器上面,我用的是tomcat服务器 1-改一下config/index.js文件,如下图,把assetsPublicPath: './', productionSour ...
服务器-Web服务器-Tengine：Tengine 百科
ylbtech-服务器-Web服务器-Tengine:Tengine 百科 Tengine是由淘宝网发起的Web服务器项目.它在Nginx的基础上,针对大访问量网站的需求,添加了很多高级功能和特性.它 ...

CSS实现三级菜单[转]

头部导航条布局

鼠标移入时实现颜色的变换

下拉菜单实现

三级菜单实现

CSS实现三级菜单[转]的更多相关文章

随机推荐

热门专题