CSS做的下拉菜单

原创 2016年06月02日 12:52:03
 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="robots" content="all" />
<title>纯CSS的下拉菜单 支持IE6 IE7 Firefox</title> 
<style type="text/css"> 
*{margin:0;padding:0;}  
.menu{font-size:12px;position:relative;z-index:100;}  
.menu ul{list-style:none;}  
.menu li {float:left;position:relative;}  
.menu ul ul {visibility:hidden;position:absolute;left:3px;top:23px;}  
.menu table {position:absolute; top:0; left:0;}  
.menu ul li:hover ul,  
.menu ul a:hover ul{visibility:visible;}  
.menu a{display:block;border:1px solid #aaa;background:#cacaca;padding:2px 10px;margin:3px;color:#fff;text-decoration:none;}  
.menu a:hover{background:#fafafa;color:#000;border:1px solid #000;}  
.menu ul ul{}  
.menu ul ul li {clear:both;text-align:left;font-size:12px;}  
.menu ul ul li a{display:block;width:100px;height:15px;margin:0;border:0;border-bottom:1px solid #858585;}  

</style> 
</head> 
 
<body> 
 
<div class="menu"> 
          <ul> 
              <li><a href="#">XHTML/CSS  
                  <!--[if IE 7]><!--></a><!--<![endif]--> 
                  <!--[if lte IE 6]><table><tr><td><![endif]--> 
                  <ul> 
                      <li><a href="#">标准</a></li> 
                      <li><a href="#">教程</a></li> 
                      <li><a href="#">技术文章</a></li> 
                      <li><a href="#">常见问题</a></li> 
                      <li><a href="#">布局教程专题</a></li> 
                      <li><a href="#">CSS菜单</a></li> 
                      <li><a href="#">浏览器兼容</a></li> 
           

版权声明:本文为博主原创文章,未经博主允许不得转载。

创建一个纯CSS下拉菜单,支持三级菜单

我们将创建两个子类别特性,父悬停激活链接。 第一级sub-links主要出现在导航栏,然后第二个级的链接从第一个下拉飞出水平。 HTML 123456789101112131415161718192...
  • nature_fly088
  • nature_fly088
  • 2016年06月10日 12:33
  • 2087

div+css下拉菜单效果实现

本人前端小白,第一次写博客,如有错误希望大家指出。 这篇博客主要是如何用div+css去完成下拉菜单效果的简单教程,适合和我一样刚入门的小伙伴,下拉菜单效果在网上很多插件,而我在自己写一个之前用的是b...
  • pingyang111
  • pingyang111
  • 2017年04月03日 22:41
  • 294

Web前端开发实战1:二级下拉式菜单之CSS实现

二级下拉式菜单在各大学校网站,电商类网站,新闻类网站等大型?网站很常见,那么它的实现原理是什么呢? 学习了Web前端开发的知识后,我们是可以实现这样的功能的。复杂的都是从基础效果上添加做出来的,原理和...
  • erlian1992
  • erlian1992
  • 2015年12月30日 20:47
  • 12322

DIV+CSS实操六:经管系网页添加导航栏下拉菜单

其实很久之前就想实现这个功能,一直没有去付诸行动,大早上的就开始看老师讲过的一些简单的JS下拉菜单的 知识,可能是我们基础差,老师讲的也是非常基础的一些,但是我们还是没有听懂,仔细研究了一番,反反复...
  • erlian1992
  • erlian1992
  • 2015年12月10日 10:43
  • 4049

使用DIV+CSS实现下拉列表菜单

  • lifuxiangcaohui
  • lifuxiangcaohui
  • 2011年01月19日 11:09
  • 4303

网页下拉菜单之CSS实现

网页下拉菜单的实现 一、什么是网页下拉菜单?                      网页下拉菜单就是多级菜单,最为简单的就是二级菜单,如下图所示:                 二、网页下拉菜...
  • CoralLMY
  • CoralLMY
  • 2017年03月04日 13:54
  • 3110

HTML+CSS+JavaScript实现简易下拉菜单

html lang="en"> head> meta charset="UTF-8"> title>下拉列表title> link rel="stylesheet" href=...
  • darongzi1314
  • darongzi1314
  • 2016年09月14日 16:17
  • 862

纯CSS的导航下拉菜单

写在案例前: 本案例并非原创,百度一搜“css下拉菜单”一定能看见一模一样的案例,而且不止一个,所以就仿照这个案例又自己做了一遍,并且总结一下自己遇到的一些问题结合思考给出的解决办法,虽然不...
  • chris_z_0622
  • chris_z_0622
  • 2017年04月04日 17:03
  • 4708

单纯使用CSS实现下拉菜单

教你单纯使用css实现下拉菜单
  • a727911438
  • a727911438
  • 2016年07月26日 02:34
  • 1347

用div+css做下拉菜单,当鼠标移向2级菜单时,为什么1级菜单的a:hover背景色就不管用了?

伪类:hover只是鼠标停留当前元素时。 鼠标一离开马上就没有了。 主菜单鼠标经过样式单写一个,例 .nav_hover{background-color:blue;} 判断一下: if(鼠标移到此...
  • sinat_36146776
  • sinat_36146776
  • 2016年09月23日 21:43
  • 1160
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS做的下拉菜单
举报原因:
原因补充:

(最多只允许输入30个字)