文章提供二款经典的div+css 二级下拉菜单导航代码下载,如果你想制作出漂亮的css div的下拉菜单的话就看看这两款吧。
代码如下
复制代码
/*++++++++++++++++++++++二级菜单++++++++++++++++++++++++++++++++++++++++++++++++++++*/
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>
1 2 3 4
下拉导航菜单被遮住解决办法
css 导航菜单实现代码
css实现各种导航菜单实现代码
css ul li实现纵向导航菜单效果
css 水平横向导航菜单效果
纯css 下拉导航菜单代码
jquery CSS导航下拉菜单代码
滑动门导航菜单,参数:对象id、样式、选择器
纯css导航菜单代码
闪客帝国 导航菜单样式代码
上一页:css实现图片圆角效果代码下一页:div css 下拉菜单效果代码
相关评论
注意:本文章由网友或兼职供稿,如有侵权行为请邮件:admin@111cn.net 站长将在24小时内与您取得联系!
申明:发表评论既代表用户观点,不代表本站支持,所有评论均与本站无关。
问题没有得到解决?立即加入我们微信吧,请求站长帮忙处理!