<!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>  

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  

 <title>纯css3圆角下拉菜单</title>  

 <style type="text/css">  

 *{margin:; padding:;}  

 #nav{  

 width:608px;  

 margin:10px auto;  

 font-family:Arial;  

 font-size:16px;  

 color:#0000FF;}  

 #nav b{  

     clear:both;  

     display:block;  

     height:1px;  

     background: #;  

 }  

 .b1,.b10{margin: 4px;}  

 .b2,.b9{margin: 3px; border-left:solid 1px; border-right:solid 1px;}  

 .b3,.b8{margin: 2px; border-left:solid 1px; border-right:solid 1px;}  

 .b4,.b7{margin: 1px;border-left:solid 1px; border-right:solid 1px;}  

 .b5,.b6{margin:;}  

 #nav #dh{  

     height:24px;  

     background: #;  

 }  

 #nav #dh a{display:block;  

 text-decoration:none;  

 float:left;  

 width:100px;  

 text-align:center;  

 border-right:solid  #CCC 1px;  

 line-height:%;  

 color: #FFF;  

 position:relative;  

 }  

 #nav #dh a.limit{  

     border:none;  

 }  

 #nav #dh a ul{  

     list-style:none;  

     position: absolute;  

     display:none;  

     background: #;  

     left:;  

     top:24px;  

 }  

 #nav #dh a ul li{  

     width:100px;  

 }  

 #nav #dh a:hover ul{  

     display:block;  

 }     

 #nav #dh a:hover ul li:hover{  

     background:#CC9966;  

     color:#FFFF00;  

 }  

 </style>  

 </head>  

 <body>  

 <div id="nav">  

 <b class="b1"></b>  

 <b class="b2"></b>  

 <b class="b3"></b>  

 <b class="b4"></b>  

 <b class="b5"></b>  

 <div id="dh">  

         <a href="#">首页  

         <ul>  

         <li>下载排行</li>  

         <li>源码下载</li>  

         </ul>  

         </a>  

         <a href="#">ASP  

         <ul>  

         <li>博客系统</li>  

         <li>图片相册</li>  

         <li>社区程序</li>  

         </ul>  

         </a>  

         <a href="#">PHP  

          <ul>  

         <li>图库微博</li>  

         <li>社区论坛</li>  

         <li>企业相册</li>  

         </ul>  

         </a>  

         <a href="#">JSP  

          <ul>  

         <li>企业</li>  

         <li>新闻系统</li>  

         <li>留言</li>  

         </ul>  

         </a>  

         <a href="#">VC++  

          <ul>  

         <li>企业整站</li>  

         <li>图片相册</li>  

         <li>社区程序</li>  

         </ul>  

         </a>  

         <a  class="limit" href="#">DELPHI  

          <ul>  

         <li>系统相关</li>  

         <li>数据库</li>  

         </ul>  

         </a>  

 </div>  

 <b class="b6"></b>  

 <b class="b7"></b>  

 <b class="b8"></b>  

 <b class="b9"></b>  

 <b class="b10"></b>  

 </div>  

 </body>  

 </html>

纯css3圆角下拉菜单 都没敢用js的更多相关文章

  1. html 布局；css3+jq 下拉菜单；table分页动态添加行；html5本地存储；简单易用的html框架

    简单好用的html框架,预览图见最后: 源码: 1.页面布局使用table: table 嵌套 +iframe 布局: 2.下拉菜单为jq+css3 动画; css input 无边框,select下 ...

  2. CSS3制作下拉菜单

    导航菜单其实是没有什么可说的,制作方法到处可见,今天这个案例本来不只是一个导 航,还有一个搜索表单的,可是为了偷懒,把搜索表单部分去掉了,就变成了一个CSS3 制作的下拉菜单.在这个导航中主要两点,一 ...

  3. 纯css实现下拉菜单

    今天给大家分享一个纯html+css实现的下拉菜单.在此声明一点,源码并非出自本人之手,是同项目组一兄弟PLUTO写的.好东西嘛,所以果断拿出来和大家分享.如果有更好的想法或者建议,一定记得留言哦!好 ...

  4. 用纯css实现下拉菜单的几种方式

    第一种:display:none和display:block切换 <!DOCTYPE html> <html lang="en"> <head> ...

  5. Html5+Css3制作下拉菜单的三种方式

    一.渐变式改变ol的高度 1.外部为ul标签,在每个li里嵌套一个ol列表2.设置外部li左浮动,内部ol标签绝对定位,外部li标签相对定位3.设置ol的高为0,溢出隐藏4.外部li标签:hover ...

  6. 纯CSS实现下拉菜单及下拉容器等（纯CSS实现导航条及导航下拉容器）

    虽然网上类似甚至相同的案例有很多,但是我还是写下,以记下笔记,也可供大家参考 希望大家可以指导批评~~ 首先我们以列表ul li 来开始我们菜单也可以说导航条的制作: 在页面中我们首先构建以下XHTM ...

  7. 小米网css3导航下拉菜单代码

    效果:http://hovertree.com/texiao/css3/19/ 代码如下: <!doctype html> <!-- W3C规范 --> <html la ...

  8. CSS3手风琴下拉菜单

    在线演示 本地下载

  9. HTML5/CSS3动画下拉菜单

    在线演示 本地下载

随机推荐

  1. ArcGIS Server 创建站点失败

    前期解决方案中部分解决方法汇总:①安装Server时创建的ArcGIS Server Account (操作系统级别用户,默认用户名arcgis)对创建站点时新建的站点目录arcgisserver文件 ...

  2. 使用Entity Framework 自动产生的Sql语句

    对于一个单独实体的通常操作有3种:添加新的实体.修改实体以及删除实体. 1.添加新的实体 Entity Framework Code First添加新的实体通过调用DbSet.Add()方法来实现. ...

  3. C#编程之委托与事件四(二)【转】

    C#编程之委托与事件(二)       我在上一篇文章(C#编程之委托与事件(一) )中通过示例结合的方法介绍了委托,在本文中,我同样以代码示例的方式来介绍C#里的事件机制. 二.事件   1.了解概 ...

  4. Hibernate - lazy, fetch, inverse, cascade

    Inverse是hibernate双向关系中的基本概念.inverse的真正作用就是指定由哪一方来维护之间的关联关系.当一方中指定了"inverse=false"(默认),那么那一 ...

  5. iOS:给Git仓库上传代码时，超过100M会被拒绝（例如github和oschina）

    处理GitHub不允许上传大于100M文件问题?本人也遇到这个坑... 来自转载,原文链接:http://www.cnblogs.com/qmmq/p/4604862.html 1.报错: 自己的项目 ...

  6. matlab中实现Gabor滤波器

    1.spatialgabor.m描述gabor函数 % SPATIALGABOR - applies single oriented gabor filter to an image%% Usage: ...

  7. 《zw版·Halcon-delphi系列原创教程》 Halcon分类函数002·AI人工智能

    <zw版·Halcon-delphi系列原创教程> Halcon分类函数002·AI人工智能 AI人工智能:包括knn.gmm.svm等 为方便阅读,在不影响说明的前提下,笔者对函数进行了 ...

  8. C#的path.GetFullPath 获取上级目录实现方法

    这篇文章主要介绍了C#的path.GetFullPath 获取上级目录实现方法,包含了具体的C#实现方法以及ASP.net与ASP等的方法对比,非常具有实用价值,需要的朋友可以参考下   本文实例讲述 ...

  9. 解决连接VPN后无法上网问题

    解决连接VPN后无法上网问题 VPN的英文全称是“Virtual Private Network”,翻译过来就是“虚拟专用网络”.顾名思义,虚拟专用网络可以把它理解成是虚拟出来的企业内部专线. 在公司 ...

  10. [转]Git调用第三方对比工具beyondCompare

    点击阅读原文 对于我这种 git 命令行小白来说, git 自带的对比工具各种水土不服,想念以前的 svn 小乌龟 + beyondCompare 的日子...纠结完 gitHub client 未果 ...