<!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. NEC学习 ---- 模块 - 左图右文图文列表

    该模块效果图: 这个模块也是在开发中经常使用的一种: HTML代码: <div class="container"> <div class="m-lis ...

  2. Git的常用操作

    $ git log //查看commit记录 $ git add <file> //添加文件到commit中 .代表所有改动的文件 $ git commit -m 'meesage' // ...

  3. CentOS7安装mysql5.6.23

    ============安装glibc版本============== 一.下载glibc版本的Mysql mysql-advanced-5.6.23-linux-glibc2.5-x86_64.zi ...

  4. qmake的使用（可设置c编译器flag参数）

    本文由乌合之众 lym瞎编,欢迎转载 my.oschina.net/oloroso***还是先说一下当前的系统环境:Ubuntu 14.04 + Qt5.4如果没有安装过QT,可以安装下面几个qt软件 ...

  5. Redis的Python客户端redis-py

    1. 安装 1. redis-py a. 使用easy_install 1 sudo easy_install redis  b. 源码安装 1 2 3 git clone https://githu ...

  6. Maven-005-部署构件至 nexus 私服

    nexus 私服仓库中宿主仓库主要用于储存装置内部的或一些无法从公共仓库获取的第三方构件,供项目组的人员使用.日常开发中,可将各版本构件直接部署到 Nexus 中对应策略的宿主仓库中.上篇文章中讲述了 ...

  7. awk 反过滤不想要的列 和循环列

    [root@elk_m ~]# awk '{print $0}' install.log.syslog |head -1 <86>Feb 29 02:58:28 groupadd[1598 ...

  8. ROW_NUMBER

    16:23 2015/4/16 删除重复数据,连续被两位同事问到完全相同的重复记录如何删除只保留一条 create table del_samerecords (id )) go insert int ...

  9. ios-高仿别踩白块游戏的实现

    先看下效果图片 前几天看到一个游戏叫别踩白块,下载量还挺大几百万了都,下载下来玩了玩看了看,这个游戏还挺简单的.俗话说想一千遍,一万遍不如动手做一遍来的实在.昨晚以及今天白天闲的没事就开搞了,下午六点 ...

  10. 如何将SVN patch的修改做成old&new文件

    背景 最近解决lua的一则协程问题, 需要将一个patch添加到我们自己的lua库代码中, 由于我们整合的lua库代码目录,与原始的lua库代码不一致,导致不能直接使用path应用到我们自己的lua代 ...