头部导航条布局

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">

      1. html

      2. css

      3. 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实现三级菜单[转]的更多相关文章

  1. 纯css制作三级菜单

    <!DOCTYPE html> <html> <head> <title>三级菜单</title> <meta charset=&qu ...

  2. css三级菜单效果

    一个简单实用的css三级菜单效果 <!doctype html> <html> <head> <meta charset="utf-8"& ...

  3. 用css实现三级导航菜单

    主要使用css的hover伪类来实现该功能. 主要思路:先搭出三级菜单的框架,然后使用css的:hover来实现! 对li添加类selected,对该类添加position:relative属性,然后 ...

  4. CSS打造三级下拉菜单

    <html><head><meta http-equiv="Content-Type" content="text/html; charse ...

  5. JS+CSS打造三级折叠菜单,自动收缩其它级 js

    <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="C ...

  6. HTML+CSS实现简单三级菜单

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. css 实现三级联动菜单

    昨天因为项目中想要把二级联动菜单改成三级联动菜单,所以我就单独写了一个tab导航栏,用纯css的方式实现的三级联动.一开始我想着可以用js实现,但是js的hover事件和mouseenter,mous ...

  8. js左侧三级菜单导航实例代码

    在左侧三级菜单导航想必大家都见到过吧,它的实现过程也并不复杂,下面有个不错的示例,感兴趣的朋友可以了解下 实例代码:   <!DOCTYPE html PUBLIC "-//W3C// ...

  9. Web前端开发实战6:CSS实现导航菜单结合二级下拉式菜单的简单变换

    前面几篇博文都在讲导航菜单和二级下拉式菜单,事实上有非常多方法都能够实现的.详细的情况还要视情况而定. 在后面学习到jQuery框架之后,会有更丰富的动画效果.因为在学习Ajax和jQuery的初步阶 ...

随机推荐

  1. 英语单词character

    来源——tr帮助说明 TR() User Commands TR() NAME tr - translate or delete characters SYNOPSIS tr [OPTION]... ...

  2. 阿里云服务器 Ubuntu 安装 LNMP

    1.设定实例化服务器IP密码. 2.设定安全组件端口 80 和 3306 系统默认提供端口 22. //阿里云需要设定安全组件端口必须设定. 3.安装一键lnmp系统. 教程地址 https://ln ...

  3. save change is not permitted

    https://support.microsoft.com/en-my/help/956176/error-message-when-you-try-to-save-a-table-in-sql-se ...

  4. EZOJ #362历史

    分析 就是保存前pi-1个数每个ai出现多少次 然后维护这些数当前剩余的最大值 每次和新加进来的比较即可 如果新的大直接取 否则新的最大值一定不大于原来的最大值 因此o(n) 代码 #include& ...

  5. import的项目结构不对

    问题如下,在我们新导入一个maven项目时,碰到这样的目录结构,总有点别扭,而且在运行Tomcat的时候,突然发现build i选项下面少了两个我们经常使用的两个选项 window  --Perspe ...

  6. maven将依赖第三方包打包(package)到jar中

    前提:项目是一个纯maven的java工程,通过idea中file-->new-->project-->maven来创建的,不是spring boot工程(不是通过file--> ...

  7. Linux运维知识之linux shell date 用当天时间做备份文件名

    本文主要向大家介绍了Linux运维知识之linux shell date 用当天时间做备份文件名,通过具体的内容向大家展现,希望对大家学习Linux运维知识有所帮助. #!/bin/bash #dat ...

  8. Altium Designer chapter4总结

    原理图设计进阶中需要注意如下: (1)多电路原理图的设计:图纸连接符是连接各个电路图的电器连接:VCC GND属于特殊的网络标号,在多电路原理图中不需要添加. (2)层次式电路原理图设计:注意自上而下 ...

  9. Netty之大名鼎鼎的EventLoop

    EventLoopGroup 与Reactor: 前面的章节中我们已经知道了,一个Netty 程序启动时,至少要指定一个EventLoopGroup(如果使用到的是NIO,通常是指NioEventLo ...

  10. "源文件名长度大于文件系统支持的长度无法删除"的解决方案

    import java.io.File; import java.io.IOException; import org.apache.commons.io.FileUtils; /** * @auth ...