<!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. m=m++，结果让你大吃一惊。

    如图,本来以为m=m++和m++是同一个效果,没想到m的值居然还是0. 原来m++是一个表达式,是有返回值的,它的返回值就是m自加前的值,Java对自加是这样处理的:首先把m的值(注意是值,不是引用) ...

  2. 周记：Linux下C编程

    也啥都没干,计划一个都没干.吼吼-- 周六去看[21天学通Linux_C编程]笔记: 突然都对这本书没信心了.刚开始,就出现的不满如下:1.创建vim启动器时候,类型要选择[终端下的应用程序]没说,虽 ...

  3. Maven-003-私人定制 maven archetype

    在使用 Maven 创建项目模块的时候,依据其默认的 archetype 模板,创建出的目录.及默认的单元测试工具为 JUnit 3.8.1,而且有些常用的资源文件目录.配置文件(例如:Log4J 的 ...

  4. Python开发【第七章】：Python面向对象进阶

    1.静态方法 通过@staticmethod装饰器即可把其装饰的方法变为一个静态方法,什么是静态方法呢?其实不难理解,普通的方法,可以在实例化后直接调用,并且在方法里可以通过self.调用实例变量或类 ...

  5. 安装 Open Live Writer

    2016年12月19日20:22:02 一直希望能有一个独立的客户端来书写博客,作为一个新手,希望能够有一个强大的编辑器来实现这个功能.然后就赶着去下载windows live Writer.然后才发 ...

  6. AJAX-----09iframe模拟ajax文件上传效果原理1

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. install sublime for linux

    Download Your Free eBooks NOW - 10 Free Linux eBooks for Administrators Python API, that available f ...

  8. java基本数据类型包装类

    Java语言是一个面向对象的语言,但是Java中的基本数据类型却是不面向对象的,这在实际使用时存在很多的不便,为了解决这个不足,在设计类时为每个基本数据类型设计了一个对应的类进行代表,这样八个和基本数 ...

  9. ListView的LayoutParams设置

    // Temp is the root view that was found in the xml final View temp = createViewFromTag(root, name, a ...

  10. MS CRM商机产品等Mapping

    商机明细:报价明细  SELECT  EntityMapId  FROM    EntityMapBase  WHERE   TargetEntityName='quotedetail' AND So ...