实用的二级导航，自定义方便

2024-09-05 12:20:51

字体：大中小

来源：转载

供稿：网友

实用简洁的二级导航菜单，自定义比较方便，有二级菜单的，给li加class="menu"就行了，没有的不用加，先美化成这样，不满意的自己动手美化，没什么好难的，就当练习CSS水平了。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>二级菜单</title><style type="text/css">*{margin:0; padding:0}.navs{width:960px; margin:20px auto; font-size:14px;}#nav {background-color:blue; color:#fff;height:25px;line-height:25px;text-align:center;list-style:none;}	#nav a{color:#fff;}	#nav li{width:75px;float:left;position:relative;z-index:1;}	#nav li .title{display:block;}	#nav li:hover{background-color:green;}	#nav li .submenu{width:75px;margin:0 auto;background:green;position:absolute;left:0;top:25px;display:none; height:160px;}	#nav li .submenu dd{border-top:1px dotted #ddd;color:#fff;}    #nav li .submenu dd:hover{background-color:red;}</style><script type="text/javascript"></script></head><body> <div class="navs"><div id="nav">		<li class="menu">			走进亮点			<dl class="submenu">				<dd>新闻动态</dd>				<dd>亮点故事</dd>				<dd>360°店堂</dd>			</dl>		</li>		<li class="menu">			精英团队			<dl class="submenu">				<dd>团队观点</dd>				<dd>入队指南</dd>			</dl>		</li>		<li class="menu">			婚礼回放			<dl class="submenu">				<dd>DV秀</dd>				<dd>照片秀</dd>				<dd>顶级婚礼</dd>			</dl>		</li>		<li class="menu">			近期公告			<dl class="submenu">				<dd>外展活动</dd>			</dl>		</li>		<li class="menu">			婚礼服务			<dl class="submenu">				<dd>婚礼策划</dd>				<dd>精致场景</dd>				<dd>舞美特效</dd>			</dl>		</li>		<li class="menu">			商务礼仪			<dl class="submenu">				<dd>商务庆典</dd>				<dd>会议服务</dd>				<dd>各种party</dd>			</dl>		</li>        		<li class="menu">			创业加盟			<dl class="submenu">				<dd>加盟天地</dd>				<dd>人才加盟</dd>			</dl>		</li>		<li>			在线订购		</li></div></div><script type="text/javascript"></script></body></html>

上一篇：加入了jQuery，二级菜单就有味道了

下一篇：你一定喜欢的CSS中英文双语菜单代码

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注