纯CSS的下拉菜单

 代码如下 复制代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html>  
  
<head>  
<meta http-equiv="Content-Type" c />  
<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:red;padding:2px 10px;margin:3px;color:#fff;text-decoration:none;}   
.menu a:hover{background:#f2cdb0;color:#f00;border:1px solid red;}   
.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:13px;margin:0;border:0;border-bottom:1px solid red;}   
.menu ul ul li a:hover{border:0;background:#f2cdb0;border-bottom:1px solid #fff;}   
</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>  
                <li><a href="">滚动条相关</a></li>  
                <li><a href="">圆角矩形专题</a></li>  
                <li><a href="">CSS特效欣赏专题</a></li>  
            </ul>  
            <!--[if lte IE 6]></td></tr></table></a><![endif]-->  
        </li>  
        <li><a href="">AJAX   
            <!--[if IE 7]><!--></a><!--<![endif]-->  
            <!--[if lte IE 6]><table><tr><td><![endif]-->  
            <ul>  
                <li><a href="">AJAX教程</a></li>  
                <li><a href="">AJAX技术</a></li>  
            </ul>  
            <!--[if lte IE 6]></td></tr></table></a><![endif]-->  
        </li>  
        <li><a href="">Javascript   
            <!--[if IE 7]><!--></a><!--<![endif]-->  
            <!--[if lte IE 6]><table><tr><td><![endif]-->  
            <ul>  
                <li><a href="">JSON</a></li>  
                <li><a href="">技术文章</a></li>  
            </ul>  
            <!--[if lte IE 6]></td></tr></table></a><![endif]-->  
        </li>  
        <li><a href="">DOM</a></li>  
        <li><a href="">XML</a></li>  
        <li><a href="">正则表达式   
            <!--[if IE 7]><!--></a><!--<![endif]-->  
            <!--[if lte IE 6]><table><tr><td><![endif]-->  
            <ul>  
                <li><a href="">正则表达式简介</a></li>  
                <li><a href="">正则表达式之道</a></li>  
            </ul>  
            <!--[if lte IE 6]></td></tr></table></a><![endif]-->  
        </li>  
        <li><a href="">网站优化</a></li>  
        <li><a href="">电脑网络</a></li>  
        <li><a href="">建站技术   
            <!--[if IE 7]><!--></a><!--<![endif]-->  
            <!--[if lte IE 6]><table><tr><td><![endif]-->  
            <ul>  
                <li><a href="">PHP</a></li>  
                <li><a href="">ASP</a></li>  
                <li><a href="">ASP.NET</a></li>  
                <li><a href="">JSP</a></li>  
                <li><a href="">SQL</a></li>  
                <li><a href="">Flash</a></li>  
                <li><a href="">Dreamweaver</a></li>  
            </ul>  
            <!--[if lte IE 6]></td></tr></table></a><![endif]-->  
        </li>  
    </ul>  
</div>  
  
<br /><br />  
<a href=http://www.111cn.net target="_blank">   2007-4-16</a>  
css drop down menu   
</body>  
</html>
时间： 2024-08-03 20:11:20

纯CSS的下拉菜单的相关文章

纯CSS实现下拉菜单及下拉容器等（纯CSS实现导航条及导航下拉容器）

原文:纯CSS实现下拉菜单及下拉容器等(纯CSS实现导航条及导航下拉容器)  虽然网上类似甚至相同的案例有很多,但是我还是写下,以记下笔记,也可供大家参考 希望大家可以指导批评~~ 首先我们以列表ul li 来开始我们菜单也可以说导航条的制作: 在页面中我们首先构建以下XHTML结构: <body> <ul id="navWrapper"> <li> <a href="#">Menu A</a> <u

纯Css实现下拉菜单的简单例子

大家可能会经常用到hover这属性,用hover实现鼠标经过的颜色改变等等之类,其实hover非常强大. 分享一个鼠标经过,弹出下拉菜单的小技巧: 当我们建好一个列表: <ul> <li class="home"><a href="javascript:;" target="_blank" title="">一级菜单</a></li> <li class=&qu

支持IE6 IE7 Firefox 的纯CSS的下拉菜单_经验交流

XHTML/CSS 标准 教程 技术文章 常见问题 布局教程专题 CSS菜单 浏览器兼容 滚动条相关 圆角矩形专题 CSS特效欣赏专题 AJAXAJAX教程 AJAX技术 JavascriptJSON 技术文章 DOM XML 正则表达式正则表达式简介 正则表达式之道 网站优化 电脑网络 建站技术PHP ASP ASP.NET JSP SQL Flash Dreamweaver 2007-4-16 css drop down menu

纯CSS的下拉菜单 支持IE6 IE7 Firefox

XHTML/CSS 标准 教程 技术文章 常见问题 布局教程专题 CSS菜单 浏览器兼容 滚动条相关 圆角矩形专题 CSS特效欣赏专题 AjaxAJAX教程 AJAX技术 javascriptJSON 技术文章 正则表达式正则表达式简介 正则表达式之道 建站技术PHP ASP ASP.NET JSP SQL Flash Dreamweaver

网页布局+纯CSS纵向下拉菜单 IE6/IE7兼容_经验交流

logo banner mail 第一分类 XHTML CSS PHP MySQL Fireworks Photoshop Flash Illustrator 第一分类 XHTML CSS PHP MySQL Fireworks Photoshop Flash Illustrator 第一分类 XHTML CSS PHP MySQL Fireworks Photoshop Flash Illustrator 第一分类 XHTML CSS PHP MySQL Fireworks Photoshop

纯CSS触碰式下拉菜单

破洛洛教学网 网页设计 PS教程 平面设计 破洛洛 Photoshop 疑难杂症 实用范例 css 实用案例 辅助工具 转载请注明:破洛洛 更多代码:中国WEB第一站 http://www.111cn.net

导航菜单-简洁的纯CSS二级下拉菜单

菜单1 菜单1-1 菜单1-2 菜单1-3 菜单2 菜单2-1 菜单2-2 菜单2-3 菜单3 菜单3-1 菜单3-2 菜单3-3

纯CSS纵向下拉菜单特效代码

视频 健康 房产 广州 北京 上海 深圳 天津 重庆 武汉 杭州 四川 家居 教育 读书 连载 书库 原创 文学 VIP全本 排行榜 书讯 书评 文摘 访谈 博客 论坛 微博 艺术 游戏 激战2 洛奇英雄传 英雄联盟 星球大战 最终幻想14 流星蝴蝶剑 三国演义 九阴真经 新水浒 彩票

经典纯css+div 下拉菜单代码[兼容多浏览器]

提示:您可以先修改部分代码再运行 Home Single Level Dropdown Dropdown one Dropdown 1.1 Dropdown 1.2 Dropdown 1.3 Dropdown 1.4 Dropdown 1.5 Dropdown 1.6 Dropdown two Dropdown 2.1 Dropdown 2.2 Dropdown 2.3 Dropdown 2.4 Dropdown 2.5 Dropdown three Dropdown four Dropdown