zoukankan      html  css  js  c++  java
  • 【新手入门教程】简洁纯CSS下拉导航菜单代码

    代码简介:

    一款比较简洁的CSS菜单导航,带有注释,若搞不懂这种菜单的话,相信你通过本款代码的一步步分解肯定就会明白了,虽说样式不怎么美观,但实质内容已经有了,美化要看你的色感了。

    代码内容:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>   
    <title>【新手入门教程】简洁纯CSS下拉导航菜单代码_网页代码站(www.webdm.cn)</title>  
    <style type="text/css">
    <!-- /*/ */
    * {font-family:"宋体";margin:0;padding:0;}
    body {padding:15px;}
    /* 设置table宽度、边框为0、(IE6) */
    .nav ul table {100%;border-collapse:collapse;border:0;}
    /* 默认隐藏下一级ul列表 */
    .nav ul li ul {display:none;}
    /* 鼠标经过显示下一级ul列表 */
    .nav ul li:hover ul,
    .nav ul li a:hover ul {display:block;100%;}
    .nav li a:hover {font-weight:bold;}
    /* 修饰样式一 */
    .nav {float:left;_height:22px;min-height:22px;border:solid #ccc;border-1px 0;}
    .nav li {float:left;120px;display:block;font-size:0;}
    .nav li a {120px;display:block;height:22px;line-height:22px;font-size:12px;text-align:center;color:#555;text-decoration:none;background:#f7f7f7;}
    .nav li:hover a,
    .nav li a:hover {border-bottom:0;background:#eee;font-weight:bold;color:red;}
    .nav li:hover li a,
    .nav li a:hover a {color:#555;background:#f7f7f7;font-weight:normal;border-bottom:0;}
    .nav li:hover li a:hover,
    .nav li a:hover a:hover {background:#fff;color:#333;}
    -->
    </style>  
    </head>
    <body>  
    <div class="nav">
    <ul>
    <li class="up"><a href="http://www.webdm.cn">网页代码站
    <!--[if IE 7]><!--></a><!--<![endif]--><table><tr><td>
    <ul>
    <li><a href="http://www.webdm.cn">ASP</a></li>
    <li><a href="http://www.webdm.cn">ASP</a></li>
    <li><a href="http://www.webdm.cn">ASP</a></li>
    </ul>
    </td></tr></table><!--[if lte IE 6]></a><![endif]-->
    </li>
    <li><a href="####">ASP源码
    <!--[if IE 7]><!--></a><!--<![endif]--><table><tr><td>
    <ul>
    <li><a href="http://www.webdm.cn">ASP</a></li>
    <li><a href="http://www.webdm.cn">ASP</a></li>
    <li><a href="http://www.webdm.cn">ASP</a></li>
    </ul>
    </td></tr></table><!--[if lte IE 6]></a><![endif]-->
    </li>
    <li><a href="/">PHP源码
    <!--[if IE 7]><!--></a><!--<![endif]--><table><tr><td>
    <ul>
    <li><a href="http://www.webdm.cn">PHP</a></li>
    <li><a href="http://www.webdm.cn">PHP</a></li>
    <li><a href="http://www.webdm.cn">PHP</a></li>
    </ul>
    </td></tr></table><!--[if lte IE 6]></a><![endif]-->
    </li>
    <li><a href="####">ASP.NET
    <!--[if IE 7]><!--></a><!--<![endif]--><table><tr><td>
    <ul>
    <li><a href="http://www.webdm.cn">PHP</a></li>
    <li><a href="http://www.webdm.cn">PHP</a></li>
    <li><a href="http://www.webdm.cn">PHP</a></li>
    </ul>
    </td></tr></table><!--[if lte IE 6]></a><![endif]-->
    </li>
    <li><a href="####">Ajax
    <!--[if IE 7]><!--></a><!--<![endif]--><table><tr><td>
    <ul>
    <li><a href="/">ajax</a></li>
    <li><a href="/">ajax</a></li>
    <li><a href="/">ajax</a></li>
    </ul>
    </td></tr></table><!--[if lte IE 6]></a><![endif]-->
    </li>
    <li><a href="####">jQuery
    <!--[if IE 7]><!--></a><!--<![endif]--><table><tr><td>
    <ul>
    <li><a href="/">jQuery</a></li>
    <li><a href="/">jQuery</a></li>
    <li><a href="/">jQuery</a></li>
    </ul>
    </td></tr></table><!--[if lte IE 6]></a><![endif]-->
    </li>
    </ul>
    </div>
    </body>  
    </html>
    <br>
    <p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码!</p>
    

    代码来自:http://www.webdm.cn/webcode/d05065ee-f88a-423c-97f3-1bc078ca55e8.html

  • 相关阅读:
    Cross-Site Scripting XSS 跨站攻击全攻略 分类: 系统架构 2015-07-08 12:25 21人阅读 评论(2) 收藏
    WAS集群:记一次Node Agent不活动问题解决过程
    Oracle RAC集群资料收集
    Linux使用 tar命令-g参数进行增量+差异备份、还原文件
    WAS7.0安装补丁升级程序无法替换文件 java/docs/autorun.inf解决办法
    Java程序员面试失败的5大原因
    Lemon OA第4篇:常用功能
    Lemon OA第3篇:核心功能
    Lemon OA第2篇:功能解析方法
    Activiti5小试牛刀demo流程
  • 原文地址:https://www.cnblogs.com/webdm/p/1989980.html
Copyright © 2011-2022 走看看