<!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. 带清空按钮的EditText

    public class ClearEditText extends EditText implements OnFocusChangeListener, TextWatcher { // 删除按钮的 ...

  2. Linq 动态查询排序

    Linq的排序一般是这样写的: query.OrderBy(x => x.Tel).Skip().Take(); 实际使用中排序字段可能是通过字符类型的参数来设置的,于是想这样实现: query ...

  3. iOS开发UI篇—Quartz2D使用（绘制基本图形）

    iOS开发UI篇—Quartz2D使用(绘制基本图形) 一.简单说明 图形上下文(Graphics Context):是一个CGContextRef类型的数据 图形上下文的作用:保存绘图信息.绘图状态 ...

  4. webService 发送soap请求，并解析返回的soap报文

    本例应用场景:要做一个webService测试功能,不局限于任何一种固定格式的webService,所以像axis,cxf等框架就不好用了.只有深入到webService的原理,通过发收soap报文, ...

  5. Fiddler-010-网络延时应用小技巧-模拟低网速环境

    在日常的网络测试中,经常需要测试网络超时或在网络传输速率不佳的情况的应用场景,而与此同时我们有时手边资源有限,实现在各种真实网络(2G\3G)环境下测试有些局限性.其实 fiddler 已经提供了类似 ...

  6. git cherry-pick. 如何把已经提交的commit, 从一个分支放到另一个分支

    问题 在本地master提交了一个commit(8d85d4bca680a5dbcc3e5cfb3096d18cd510cc9f),如何提交的test_2分之上? 方法 使用cherry-pick 用 ...

  7. .NET中string[]数组和List<string>泛型的相互转换以及Array类的Sort()方法（转）

    从string[]转List<string>: " }; List<string> list = new List<string>(str); 从List ...

  8. 关键字static/const的作用

    static关键字的作用:(1)设置变量的存储域,函数体内static变量的作用范围为该函数体,不同于auto变量,该变量的内存只被分配一次,因此其值在下次调用时仍维持上次的值:(2)限制变量的作用域 ...

  9. swift项目初体验--教你打造一款个性化图片浏览器(篇幅过大,慎入)

    项目需求:做一个图片浏览器,点击图片查看大图,大图模式下,左右滚动能查看不同的图片. 项目的主要核心技术:图片的弹出和消失动画     项目源代码: Photo-Browser   一.对代码进行重构 ...

  10. Node.js的核心与红利(zz)

    唯有明晰历史,才能了然当下,预知未来.作者从历史角度解读Node.js,帮助读者透过猜忌和谣言,看清真实的Node.js,了解Node.js的核心与红利. 令人惴惴不安的Node.js 我们越来越频繁 ...