利用html依靠css实现导航栏与jq依靠css实现导航栏的区别

当用css实现二级导航有更改缺陷

缺陷

当使用css实现页面导航栏，需要更改导航文本时，要将数个页面的导航文本全部修改，这样给我们的程序设计造成里极大的不便，还影响本身项目的上线时间。但是我们使用jQuery来实现导航栏时，则不会将所有的页面一一更改。下面给将jq代码以及个人对代码的理解送上

html代码

<div class="nav">
		<div class="navCenten">
			<ul>
				<li><a href="#">首页</a></li>
				<li>
					<a href="#">最新产品</a>
					<ul>
						<li><a href="#">电子产品</a></li>
						<li><a href="#">可穿戴产品</a></li>
						<li><a href="#">研究新品	</a></li>
					</ul>
				</li>
				<li>
					<a href="#">我的商城</a>
					<ul>
						<li><a href="#">我的购买</a></li>
						<li><a href="#">购物车</a></li>
					</ul>
				</li>
				<li>
					<a href="#">会员中心</a>
					<ul>
						<li><a href="#">会员登陆</a></li>
						<li><a href="#">vip会员</a></li>
						<li><a href="#">会员福利</a></li>
						<li><a href="#">会员专享</a></li>
					</ul>
				</li>
				<li>
					<a href="#">联系我们</a>
					<ul>
						<li><a href="#">业务洽谈</a></li>
						<li><a href="#">防伪查询</a></li>
						<li><a href="#">授权查询</a></li>
						<li><a href="#">加盟合作</a></li>
					</ul>
				</li>
				<li><a href="#">关于我们</a></li>
			</ul>
		</div>
	</div>

上述代码为HTML代码，本代码将页面所需要的元素全部罗列出来然后用css代码来实现下拉菜单功能

css代码实现功能

*{
   margin:0;}
a{
   
	text-decoration:none;
}
.nav{
   
	width:100%;height:50px;
	background-color: #ff5857