二级导航下拉菜单
Posted gl博越
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了二级导航下拉菜单相关的知识，希望对你有一定的参考价值。
纯css3二级导航下拉菜单，新增一些css3的特效，提供借鉴学习，如有雷同之处勿喷
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>二级下拉导航</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link rel="stylesheet" type="text/css" href="http://www.website68.com/tx/style.css">
</head>
<body>
<!-- 头部 never -->
<div class="header " >
<!-- nav -->
<div class="nav nav_num_0 ">
<ul>
<li class=""><span class="nav-one"><a href="" class="cn f13" style="color:#000">首页</a></span></li>
<li data-cid="8" class=""><span class="nav-one"><a target="_self" href="" class="cn f13" style="color:#000">走进房产</a></span>
<div class="childer"><a class="childer-a" href="">集团介绍</a><a class="childer-a" href="">企业文化</a></div>
</li>
<li data-cid="4" class=""><span class="nav-one"><a target="_self" href="" class="cn f13" style="color:#000">综合业态</a></span>
<div class="childer"><a class="childer-a" href="">住宅地产</a><a class="childer-a" href="">商业地产</a><a class="childer-a" href="">旅游地产</a></div>
</li>
<li data-cid="27" class=""><span class="nav-one"><a target="_self" href="" class="cn f13" style="color:#000">投资者关系</a></span>
<div class="childer"><a class="childer-a" href="">企业管制</a><a class="childer-a" href="">财务摘要</a><a class="childer-a" href="">年度/中期报告</a><a class="childer-a" href="">公告与通函</a></div>
</li>
<li data-cid="1" class=""><span class="nav-one"><a target="_self" href="" class="cn f13" style="color:#000">新闻中心</a></span>
<div class="childer"><a class="childer-a" href="">公司新闻</a><a class="childer-a" href="">行业新闻</a></div>
</li>
<li data-cid="21" class=""><span class="nav-one"><a target="_self" href="" class="cn f13" style="color:#000">房产招聘</a></span></li>
<li data-cid="12" class=""><span class="nav-one"><a target="_self" href="" class="cn f13" style="color:#000">投资咨询</a></span>
<div class="childer"><a class="childer-a" href="">联系方式</a><a class="childer-a" href="">在线留言</a></div>
</li>
</ul>
</div>
<!-- /nav --></div>
</div>
<!-- /头部 -->
</body>
</html>
以上是关于二级导航下拉菜单的主要内容，如果未能解决你的问题，请参考以下文章
用原生JS实现的一个导航下拉菜单，下拉菜单的宽度与浏览器视口的宽度一样（js+html+css）