图片素材没有发，就一个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横向二级导航的更多相关文章

  1. html css二级导航栏

    二级导航栏制作: 1.将一级导航栏去除列表样式(list-style:none),并给予浮动,使其横向排列(float:left) 2.给每个li中添加一个<a></a>标签, ...

  2. js二级导航

    js写二级导航要点 1.ul li 2.js获取元素 3.setInterval(function(),time); 代码如下 <style type="text/css"& ...

  3. 一款jquery编写图文下拉二级导航菜单特效

    一款jquery编写图文下拉二级导航菜单特效,效果非常简洁大气,很不错的一款jquery导航菜单特效. 这款jquery特效适用于很多的个人和门户网站. 适用浏览器:IE8.360.FireFox.C ...

  4. jQuery制作右侧边垂直二级导航菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. TP3.2二级导航与高亮显示

    闲来无事,记记笔记 二级导航的实现,就是一个二级联动,嗯 先来看看数据库,我喜欢用一个表,表多了就不好玩了 二级代号取一级导航的代号就行了,做个简单的栗子: 代码部分: 看控制器,大头在这: < ...

  6. 纯CSS实现二级导航下拉菜单--css的简单应用

    思想:使用css的display属性控制二级下拉菜单的显示与否.当鼠标移动到一级导航菜单的li标签时,显示二级导航菜单的ul标签.由于实现起来比较简单,所以在这里直接给出了参考代码. 1.纯CSS二级 ...

  7. PHPCMS V9 添加二级导航

    今天看了看phpcms 写到二级导航时发现点问题,查询导航栏的信息时返回的$r[arrchildid]与自己想象的不符,文档上说是返回子栏目id但是却有些不同. 开始的思路: <ul class ...

  8. jquery-menu-aim插件实现二级导航

    jquery-menu-aim插件是实现二级导航亚马逊式三角滑动的强力工具,它在性能上极佳,快速滑动,基本无延迟效果,源码位置见对应作者的github,接下来附上样例代码: $(function () ...

  9. jQuery垂直二级导航菜单代码

    http://www.sucaihuo.com/js/395.html 分享一个简单的垂直二级菜单导航.   HTML <div id="my_menu" class=&qu ...

随机推荐

  1. 剖析Defi之Uinswap_1

    学习UniswapERC20,它是交易对的父合约.UniswapV2ERC20 是流动性代币合约,也称为 LP Token.功能主要实习ERC20代币功能以及对线下签名授权. 1 pragma sol ...

  2. javaScript系列 [09]-javaScript和JSON (拓展)

    本文输出JSON搜索和JSON转换相关的内容,是对前两篇文章的补充. JSON搜索 在特定的开发场景中,如果服务器端返回的JSON数据异常复杂(可能超过上万行),那么必然就有对JSON文档进行搜索的需 ...

  3. 制作登录页面，点击键盘的 Enter 键或者单击“登录”按钮，验证用户输入的邮箱和密码是否正确

    查看本章节 查看作业目录 需求说明: 制作登录页面 点击键盘的 Enter 键或者单击"登录"按钮,验证用户输入的邮箱和密码是否正确 实现思路: 准备登录的静态页面 在页面中嵌入脚 ...

  4. org.reflections 接口通过反射获取实现类源码研究

    org.reflections 接口通过反射获取实现类源码研究 版本 org.reflections reflections 0.9.12 Reflections通过扫描classpath,索引元数据 ...

  5. python 使用@property 操作属性时，报“RecursionError:maximun recursion depth exceeded”

    使用@property获取和修改属性,出现报错"RecursionError:maximun recursion depth exceeded",超过了最大的递归深度 原因: 方法 ...

  6. Selenium_单选框和复选框的选中状态判定以及元素是否可用和可见判定（10）

    简单写个单选框和复选框界面 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /&g ...

  7. [flask] jinja自定义filter来过滤html标签

    问题描述 数据库存储了html格式的博客文章,在主页(index)显示的时候带有html标签,如何过滤掉呢? 解决方案 用jinja自定义filter过滤掉html标签 我是用的工厂函数,因此在工厂函 ...

  8. github 创建网络仓库 ，使用git工具将本地文件上传/删除 --- 心得

    1.前言 使用  git做项目控制版本工具,当然,使用SVN也可以,但是,git让人感觉更先进一些,与GitHub结合,用起来很方便,服务端由官网控制. 而SVN分客户端和服务端,都是个人控制,因此, ...

  9. sql创建表格时出现乱码

    1.新建数据库时,第一次只填写了数据库名称保存数据库,如下图: 2.创建一个Student表格,代码如下,其中有数据有中文,创建完后查看表格数据,发现中文为乱码 create table Studen ...

  10. 使用.NET 6开发TodoList应用(29)——实现静态字符串本地化功能

    系列导航及源代码 使用.NET 6开发TodoList应用文章索引 需求 在开发一些需要支持多种语言的应用程序时,我们需要根据切换的语言来对应展示一些静态的字符串字段,在本文中我们暂时不去讨论如何结合 ...