纯CSS实现的二级下拉菜单效果代码实例

纯CSS实现的二级下拉菜单效果代码实例:
二级下拉是最为常用的效果之一,当前的此效果一般哟结合js实现,本章节介绍一个使用纯CSS实现的二级下拉菜单效果,希望能够给需要的朋友带来一定的帮助,不过此代码也有一点浏览器兼容问题,那就是在IE6中不兼容。
代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
ul{
  padding:0;
  font:15px "微软雅黑";
}
.item{
  width:100px;
  padding:0 5px;
  border:solid 1px #eee;
  display:block;
  float:left
}
.item ul li{
  width:100px;
  padding:6px 0;
  text-align:center;
  display:none;
  cursor:default
}
.item ul .f, .item:hover ul li{display:block}
.item ul li:hover{background:#f0f0f0}
.item:hover ul li{border-bottom:solid 1px #eee;}
.item:hover ul .l, .item ul .l{border-bottom:0}
</style>
</head>
<body>
<ul class="menu">
  <li class="item">
    <ul>
      <li class="f">文件</li>
      <li>打开</li>
      <li>关闭</li>
      <li>保存</li>
      <li>打印</li>
      <li class="l">退出</li>
    </ul>
  </li>
  <li class="item">
    <ul>
      <li class="f">编辑</li>
      <li>撤销</li>
      <li>重做</li>
      <li>粘贴</li>
      <li>剪切</li>
      <li class="l">全选</li>
    </ul>
  </li>
  <li class="item">
    <ul>
      <li class="f">帮助</li>
      <li>帮助文档</li>
      <li class="l">关于</li>
    </ul>
  </li>
</ul>
</body>
</html>

以上代码实现下拉菜单效果,但是IE6浏览器下不兼容,因为IE6不支持li:hover,支持超链接的:hover。

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=10894

更多内容可以参阅:http://www.softwhy.com/divcss/

时间: 2024-10-10 17:50:39

纯CSS实现的二级下拉菜单效果代码实例的相关文章

纯CSS实现的二级下拉导航菜单实例代码

纯CSS实现的二级下拉导航菜单实例代码:二级下拉菜单在众多的网站都有应用,不但能够有效的组织分类导航,并且能够节省大量的网站空间,也能够实现网站的动态化效果,大多数二级导航菜单都是结合javascript实现,本章节介绍一下使用纯css实现的下拉菜单.代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" co

纯css和js版下拉菜单

<!doctype html> <html> <head> <meta charset="utf-8"> <title>css版下拉菜单</title> <style type="text/css"> div,body,ul,li{padding:0;margin:0; list-style:none;} .all{width:550px; height:30px; backgrou

用纯css改变select的下拉菜单

select { /*Chrome和Firefox里面的边框是不一样的,所以复写了一下*/ border: solid 1px #000; /*很关键:将默认的select选择框样式清除*/ appearance:none; -moz-appearance:none; -webkit-appearance:none; /*在选择框的最右侧中间显示小箭头图片*/ background: url("http://ourjs.github.io/static/2015/arrow.png")

CSS3实现的横向二级下拉菜单代码实例

CSS3实现的横向二级下拉菜单代码实例:横向二级下拉菜单是非常常用的效果,例如很多网站的导航栏就是这样的二级下拉菜单效果,非常好用,本章节分享一段使用CSS3实现的下拉菜单,当然当下很多浏览器都不支持,不过相信用不了多久这种现状就会被改变.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content

用三种方式实现导航菜单中的二级下拉菜单

如何实现导航菜单栏中的二级下拉菜单? 我们在淘宝.搜狐等大型网站上都可以看到使用的一些二级下拉菜单,比如下面这张图片. 但是如何实现类似的图片呢?实际上,我们有至少三种方式来实现,下面,我附上代码供大家参考. 1.仅使用html和css <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</tit

纯CSS3实现宽屏二级下拉菜单

今天我们要来分享一款基于纯CSS3的宽屏二级下拉菜单,这款菜单的子菜单在展开的时候是很宽敞的,菜单项中可以自定义格式的内容,非常实用,也很大气.由于是用纯CSS3实现,所以这款下拉菜单不用运行Javascript,展示速度当然是非常快的. 在线预览   源码下载

CSS+JS感应鼠标展开的的二级下拉菜单

<!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> <title>CSS+JS感应鼠标展开的的二级下拉菜单丨

如何实现导航菜单栏中的二级下拉菜单?

我们在淘宝.搜狐等大型网站上都可以看到使用的一些二级下拉菜单,比如下面这张图片. 但是如何实现类似的图片呢?实际上,我们有至少三种方式来实现,下面,我附上代码供大家参考. 1.仅使用html和css 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 <meta charset="UTF-8"> <title>Documen

行内/块级垂直居中、图像文本替换以及二级下拉菜单的制作

经过近一个月对HTML与css的学习,利用HTML以及div+css对简单的静态网页进行简单的布局有了一定的基础,但是对于网页结构布局的分析.部分属性的使用存在着问题,希望在以后的学习能有所提高,这里就最近的学习情况进行一下总结与归纳: 一.行内元素与块级元素水平.垂直居中问题 (一)CSS设置行内元素的水平居中 div{text-align:center} /*DIV内的行内元素均会水平居中*/ CSS设置行内元素的垂直居中 div{height:30px; line-height:30px}