div+css 二级下拉菜单导航代码(1/4)
1 2 3 4
/*++++++++++++++++++++++二级菜单++++++++++++++++++++++++++++++++++++++++++++++++++++*/
a{ font-family:"黑体";font-size:12px;text-decoration:none;}
.menu ul,.menu li{ margin:0px; padding:0px;}
.menu {position:relative; width:126px;}
.menu ul { margin:0px;list-style-type:none;}
.menu li {float:left;position:relative;}
.menu ul ul {visibility:hidden;position:absolute;}
.menu ul li:hover ul,.menu ul a:hover ul{ margin:0px; padding:0px;visibility:visible;}
.menu a{ font-size:14px;display:block;color:#333;text-decoration:none;}
.menu a:hover{color:#007071;}
.menu ul ul,.menu ul ul li { margin:0px; padding:0px;width:126px;clear:both;text-align:center}
.menu ul li ul li{ margin:0px; padding:0px; height:30px;background:url(../img/nav_001.gif) no-repeat;}
.menu ul ul li a{display:block;height:30px; line-height:30px;}
.menu ul ul li a:hover{}
/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/<div class="menu">
<ul>
<li><a href="product.asp教程"><img src="img/nav_03.gif" border="0" /></a>
<ul>
<li><a href="product.asp?cid=317">手工焊枪</a></li>
<li><a href="product.asp?cid=315">挤压焊枪</a></li>
<li><a href="product.asp?cid=321">工业加热器</a></li>
<li><a href="product.asp?cid=316">自动焊机</a></li>
<li><a href="product.asp?cid=320">配件/附件</a></li>
</ul>
</li>
</ul>
</div>
- 上一篇:div css 下拉菜单效果代码
- 下一篇:css实现图片圆角效果代码