龙盟编程博客 | 无障碍搜索 | 云盘搜索神器
快速搜索
主页 > web编程 > div+css/html >

div+css 二级下拉菜单导航代码(1/4)

时间:2012-12-29 08:41来源:未知 作者:admin 点击:
分享到:
文章提供二款经典的div+css 二级下拉菜单导航代码下载,如果你想制作出漂亮的css div的下拉菜单的话就看看这两款吧。文章提供二款经典的div+css教程 二级下拉菜单导航代码下载,如果你
文章提供二款经典的div+css 二级下拉菜单导航代码下载,如果你想制作出漂亮的css div的下拉菜单的话就看看这两款吧。文章提供二款经典的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
精彩图集

赞助商链接