二级图片导航菜单-白红宇

二级图片导航菜单

阅读量：4315 次

发布时间：2019-06-06

本文共 1840 字，大约阅读时间需要 6 分钟。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>CSS Sprites技术(将背景图整合到一张图中，再利用CSS背景图片定位到要显示的位置)</title>

body { font-family: Verdana; font-size: 12px; line-height: 1.5; }

a { color: #000; text-decoration: none; }

a:hover { color: #F00; }

#menu { height:28px; margin:0 auto; border-bottom:3px solid #E10001;}

#menu ul { list-style: none; margin: 0px; padding: 0px; }

#menu ul li { float:left; margin-right:2px;}

#menu ul li a { display:block; width:87px; height:28px; line-height:28px; text-align:center; background:url(pic.gif) 0 -28px no-repeat; font-size:14px;}

#menu ul li a:hover { background:url(pic.gif) 0 -56px no-repeat;}

#menu ul li a#current { background:url(pic.gif) 0 0 no-repeat; font-weight:bold; color:#fff;}

/*#menu ul li a#current的说明：ID=menu的元素下的UL下的LI下的A元素ID=current的元素，最终指的是a元素*/

#menu ul li ul li{ float:none; width:85px; background:#eee; margin:0}

#menu ul li ul li a { background:none}

#menu ul li ul li a:hover{ background:#000; color:#fff}

#menu ul li ul { border:1px solid #ccc; display: none; position: absolute; }

#menu ul li ul a:hover{ display:block}

#menu ul li:hover ul{ display:block} /*定义当鼠标移至按钮显示二级菜单*/

</style>

</head>

<body>

<ul>

<ul>

</ul>

</li>

<ul>

</ul>

</li>

</ul>

</div>

</body>

</html>

转载于:https://www.cnblogs.com/robt/p/4635358.html

你可能感兴趣的文章

可持久化数组

查看>>

去除IDEA报黄色/灰色的重复代码的下划波浪线

【转】使用 WebGL 进行 3D 开发，第 1 部分: WebGL 简介

查看>>

js用正则表达式控制价格输入

查看>>

chromium浏览器开发系列第三篇：chromium源码目录结构

查看>>

java开发操作系统内核：由实模式进入保护模式之32位寻址

Azure ARMTemplate模板，VM扩展命令

查看>>

使用Masstransit开发基于消息传递的分布式应用

查看>>

[CF808A] Lucky Year（规律）

批量Excel数据导入Oracle数据库（引用自 wuhuacong(伍华聪)的专栏）