HTML横向二级导航
图片素材没有发,就一个logo还有一个Nav背景图。
效果
HTML
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>企业小栈</title>
<style type="text/css">
*{padding: 0;margin: 0;}
body{background: url(images/body_bg.gif);}
.container{width: 1000px;margin: 0 auto;}
/* 顶部 */
header{height: 100px;padding-top: 30px;box-sizing: border-box;}
header .hlist{float: right;line-height: 65px;height: 50px;}
header a{text-decoration: none;color: gray;}
header .hlist span{padding: 0px 5px;color: gray;}
header .hlist img{vertical-align: middle;}
/* 导航栏 */
nav{height: 97px;background: url(images/menu_center.jpg) repeat-x;}
/*一二级共有样式*/
nav ul{list-style: none;}
nav a{text-decoration: none;display: inline-block;width: 150px;background-position: bottom;background-repeat: no-repeat;}
/*一级导航*/
nav>ul>li{float: left;text-align: center;}
nav>ul>li>a{color: #eee;height: 50px;line-height: 50px;}
/*滑动门*/
/* nav>ul>li>a{display: inline-block;background-position: left center;background-repeat: no-repeat;}
nav>ul>li>a>span{display: inline-block;width: 150px;height: 97px;background-position: right center;background-repeat: no-repeat;}
nav>ul>li>a:hover{background-image: url(images/menu_left.jpg);}
nav>ul>li>a>span:hover{background-image: url(images/menu_right.jpg);} */
/*二级导航*/
nav>ul>li>ul{position: absolute;visibility: hidden;}/*脱流,脱出父元素宽度*/
nav>ul>li>ul>li{float: left;}
nav>ul>li>ul>li>a{color: #000;height: 40px;line-height: 40px;}
/*一级导航鼠标动作*/
nav>ul>li>a:hover{color: orange;background-image: url(images/list_bg.gif);}/*注意此处的属性,不可连写,不然会覆盖上文设置的属性值*/
nav>ul>li:hover ul{visibility: visible;}
/*二级导航鼠标动作*/
nav>ul>li>ul>li>a:hover{color: orange;background-image: url(images/list_bg.gif);}/*注意此处的属性,不可连写,不然会覆盖上文设置的属性值*/
/*页脚*/
</style>
</head>
<body>
<header class="container">
<a href="#"><img src="data:images/logo.gif" /></a>
<div class="hlist">
<a href="#">网站首页</a>
<span>|</span>
<a href="#">行业知识</a>
<span>|</span>
<a href="#">联系我们</a>
<span>|</span>
<a href="#">网站地图</a>
<a href="#"><img src="data:images/english.gif"/></a>
<a href="#"><img src="data:images/Japan.gif" ></a>
</div>
</header>
<nav>
<ul class="container">
<li><a href="#"><span>公司首页</span></a></li>
<li>
<a href="#"><span>公司品牌</span></a>
<ul>
<li><a href="#"><span>品牌故事</span></a></li>
<li><a href="#"><span>品牌类型</span></a></li>
<li><a href="#"><span>品牌人生</span></a></li>
<li><a href="#"><span>认识品牌</span></a></li>
</ul>
</li>
<li><a href="#"><span>经营发展</span></a></li>
<li><a href="#"><span>新闻中心</span></a></li>
<li><a href="#"><span>企业文化</span></a></li>
<li><a href="#"><span>关于我们</span></a></li>
</ul>
</nav>
<footer></footer>
</body>
</html>
HTML横向二级导航的更多相关文章
- html css二级导航栏
二级导航栏制作: 1.将一级导航栏去除列表样式(list-style:none),并给予浮动,使其横向排列(float:left) 2.给每个li中添加一个<a></a>标签, ...
- js二级导航
js写二级导航要点 1.ul li 2.js获取元素 3.setInterval(function(),time); 代码如下 <style type="text/css"& ...
- 一款jquery编写图文下拉二级导航菜单特效
一款jquery编写图文下拉二级导航菜单特效,效果非常简洁大气,很不错的一款jquery导航菜单特效. 这款jquery特效适用于很多的个人和门户网站. 适用浏览器:IE8.360.FireFox.C ...
- jQuery制作右侧边垂直二级导航菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- TP3.2二级导航与高亮显示
闲来无事,记记笔记 二级导航的实现,就是一个二级联动,嗯 先来看看数据库,我喜欢用一个表,表多了就不好玩了 二级代号取一级导航的代号就行了,做个简单的栗子: 代码部分: 看控制器,大头在这: < ...
- 纯CSS实现二级导航下拉菜单--css的简单应用
思想:使用css的display属性控制二级下拉菜单的显示与否.当鼠标移动到一级导航菜单的li标签时,显示二级导航菜单的ul标签.由于实现起来比较简单,所以在这里直接给出了参考代码. 1.纯CSS二级 ...
- PHPCMS V9 添加二级导航
今天看了看phpcms 写到二级导航时发现点问题,查询导航栏的信息时返回的$r[arrchildid]与自己想象的不符,文档上说是返回子栏目id但是却有些不同. 开始的思路: <ul class ...
- jquery-menu-aim插件实现二级导航
jquery-menu-aim插件是实现二级导航亚马逊式三角滑动的强力工具,它在性能上极佳,快速滑动,基本无延迟效果,源码位置见对应作者的github,接下来附上样例代码: $(function () ...
- jQuery垂直二级导航菜单代码
http://www.sucaihuo.com/js/395.html 分享一个简单的垂直二级菜单导航. HTML <div id="my_menu" class=&qu ...
随机推荐
- Max-Mahalanobis Linear Discriminant Analysis Networks
目录 概 主要内容 Pang T, Du C, Zhu J, et al. Max-Mahalanobis Linear Discriminant Analysis Networks[C]. inte ...
- 编写Java程序,使用 Java 的 I/O 流将 H:\eclipse.zip 文件拷贝至 E 盘下,重新命名为 eclipse 安装 .zip。
查看本章节 查看作业目录 需求说明: 使用 Java 的 I/O 流将 H:\eclipse.zip 文件拷贝至 E 盘下,重新命名为 eclipse 安装 .zip.在拷贝过程中,每隔2000 毫秒 ...
- javascript中逻辑运算(||,&&,!)
作为一个后端开发的程序员,一直就对JavaScript情有独钟,作为一门前后端通吃的语言,必须赞一下.而且之前很长一段时间都有在做JavaScript,一路都是和ie8死磕,磕完又找低版本的谷歌磕,坑 ...
- JUC之多线程锁问题
多线程锁 8种问题锁状态: 该部分全部围绕的是以下内容并结合相应的例子:synchronized实现同步的基础:Java中每个对象都可以作为锁. 具体表现为以下三种形式:(之前只是简单的了解) 对于普 ...
- Linux 使用 tail 命令查看文件内容
使用方法: $ tail --help 用法:tail [选项]... [文件]... 以标准输出的形式打印文件的最后10行内容: 如果不指定文件,或者文件为"-",则从标准输入中 ...
- 2.HTML5基本标签
一.标题标签 h1-->h6 h1最大 h6最小 <body> <h1>一级标题</h1> <h2>二级标题</h2> ...
- linux 下安装minconda3
一.关于bashrc目录,此文件是隐藏的,如果要打开此文件需要用: vim /root/.bashrc 二.linux下关于防火墙的命令 1.查看防火墙状态 firewall-cmd --state ...
- HIVE执行引擎TEZ学习以及实际使用
概述 最近公司在使用Tez,今天写一篇关于Tez的学习和使用随笔.Tez是Apache最新的支持DAG作业的开源计算框架,它可以将多个有依赖的作业转换为一个作业从而大幅提升DAG作业的性能.Tez并不 ...
- scanf报错问题
VS2013 scanf()函数报错问题. 编译器就是说这个环境下用scanf()函数不安全,建议使用scanf_s()函数.如何要使用scanf()函数的话,就需要在头文件或者源文件开头加上:use ...
- 《剑指offer》面试题31. 栈的压入、弹出序列
问题描述 输入两个整数序列,第一个序列表示栈的压入顺序,请判断第二个序列是否为该栈的弹出顺序.假设压入栈的所有数字均不相等.例如,序列 {1,2,3,4,5} 是某栈的压栈序列,序列 {4,5,3,2 ...