<!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. Mysql新建表，插入中文时报错“Incorrect string value: '\xE4\xBD\xA0\xE5\xA5\xBD' for column”问题

    有时候我们在往数据库中输入信息时,如果输入的内容是中文,会报错“Incorrect string value: '\xE4\xBD\xA0\xE5\xA5\xBD' for column”. 例如: ...

  2. NumberPicker设置宽度，设置文字颜色

    修改宽度 wheel = (NumberPicker) findViewById(R.id.info_wheel_province); wheel.setLayoutParams(new Linear ...

  3. Python开发【第八章】：Socket

    一.Socket socket通常也称作"套接字",用于描述IP地址和端口,是一个通信链的句柄,应用程序通常通过"套接字"向网络发出请求或者应答网络请求. so ...

  4. Git stash 常见用法

    Git stash git stash这个命令可以将当前的工作状态保存到git栈,在需要的时候再恢复 1.1 git stash  保存当前的工作区与暂存区的状态,把当前的工作隐藏起来,等以后需要的时 ...

  5. Inside Flask - globals 全局变量（对象代理）

    Inside Flask - globals 全局变量(对象代理) 框架是一个容器,在框架内编程,一般是要遵守框架的约定和使用模式.通常这样的模式是 IoC,即由框架调用用户的代码,而不是用户调用框架 ...

  6. 成都开发一个app大概好多钱？

    目前,移动APP已成为很多小企业业务销售的新渠道之一,于是问题来了,一般想到要开发一个自己的app,就想问:开发一个app好多钱?去百度.360.搜狗等等平台去找相关的app开发公司咨询或者问问朋友有 ...

  7. APP定制开发：APP软件开发的语言和开发环境

    APP软件开发是移动互联网开发公司常开发的一种手机应用系统,对于刚刚进入APP软件开发领域的新手来说,选择什么编程语言和需要什么开发环境来开发APP软件是常遇到的问题.下面亿合科技小编来为大家分享下: ...

  8. 服务器IP地址后修改SQL Server配置

    1. 修改TCP/IP 属性的IP 地址 修改该实例的协议.修改TCP/IP协议的属性,将IP地址更新为当前的最新IP 地址.然后重启该实例. 2.查看全部侦听再检查SQL Server 实例的TCP ...

  9. 用OOP设计以下场景。太阳发出太阳光，照射在墙壁上，在地面形成影子。

    首先分析出有哪些实体类,太阳.太阳光.墙壁.地面.影子 然后分析太阳应该继承自发光体类.太阳光继承自光类.墙壁继承自物体类 地面是一个承载影子的容器.

  10. HTML5中的时间类型，另外EL表达式的时间值来读取时间，并且还可以更改时间

    HTML5规范里只规定date新型input输入类型,并没有规定日历弹出框的实现和样式.所以,各浏览器根据自己的设计实现日历.目前只有谷歌浏览器完全实现日历功能.相信这种局面很快就会结束,所有的浏览器 ...