zoukankan      html  css  js  c++  java
  • CSS实现的红色边框下拉导航菜单代码

    代码简介:

    只用CSS实现的导航下拉菜单,滑过变色,完全css代码,条例WEB标准,直接复制就可以使用啦,非常不错,推荐给大家。使用时候你可以复制多个菜单单元,这样就真正成了一个导航条,演示只是为了看效果,实际用时请根据你的网页面局修改一下

    代码内容:

    <!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>CSS实现的红色边框下拉导航菜单代码_网页代码站(www.webdm.cn)</title>
    <style>
    .Nav {
    }
    .Nav li{
    float:left;
    display:block;
    position:relative;
    }
    .Nav a{
    float:left;
    display:block;
    position:relative;
    padding:2px 10px 2px 10px;
    font-size:12px;
    text-decoration: none;
    }
    .Nav li a:hover
    {
    color:#ffffff;
    background:#ea0000;
    }
    .Nav li table {
    display:none;
    border-collapse:collapse;
    }
    .Nav li:hover table, .Nav a:hover table {
    display:block;
    position:absolute;
    top:18px;
    left:0;
    background:#ea0000;
    }
    .Nav li:hover table a, .Nav a:hover table a {
    float:none;
    background:#f2f2f2;
    color:#000;
    100px;
    border-bottom:1px solid #fff;
    }
    .Nav li:hover table a:hover, .Nav a:hover table a:hover {
    background:#565656;
    color:#fff;
    }
    </style>
    </head> 
    <body>
    
    <div class='Nav'>
    <li>
    <a href='http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码!
    '>代码资源
    <table><tr><td>
    <a href='/'>论坛社区</a>
    <a href='/'>新闻文章</a>
    </td></tr></table>
    </a>
    </li>
    <li>
    <a href='#'>脚本特效
    <table><tr><td>
    <a href='http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码!
    '>CSS菜单</a>
    <a href='/'>表单特效</a>
    </td></tr></table>
    </a>
    </li>
    </div>
    </body>
    </html>
    <br>
    <a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码!
    

    代码来自:http://www.webdm.cn/webcode/1920689a-2bec-48df-b897-4f70b12ce6be.html

  • 相关阅读:
    【解压缩命令】 -费元星
    【虚拟机取得该虚拟机的所有权失败】--费元星
    solr 常见的问题整理 -费元星
    oracle 建立一个视图,然后授权其他用户访问
    虚拟机安装win7 64位-完美解决-费元星
    solr 学习
    CentOS安装JDK1.7
    Nginx+Tomcat多站点访问默认主页问题-狒狒完美解决-Q9715234
    pip 安装时提示uvloop/loop.c:20:10: fatal error: Python.h解决
    MySQL锁总结
  • 原文地址:https://www.cnblogs.com/webdm/p/1973429.html
Copyright © 2011-2022 走看看