css案例学习之ul li dl dt dd实现二级菜单
效果
代码实现
<!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=gb2312" />
<title>二级菜单</title>
<style type="text/css"> /* 整体设置*/
#menu {
margin:;
padding:;
width:610px;
list-style-type:none;
font:14px Arial;
} #menu li {
float:left;
padding:;
margin: 1px ;
width:150px;
} /* 设置菜单项*/
#menu li dl {
width:150px;/*ie6*/
margin: ;
padding: 10px ;
background: #cb6 url(images/bottom.gif) no-repeat bottom left;
} #menu li dt a,#menu li dd a{ display:block;} /* 设置菜单项的dt */
/* 设置菜单项的dt */
#menu li dt {
margin:;
padding: 5px;
text-align:center;
border-bottom:1px solid #b00;
background:#ed8 url(images/top.gif) no-repeat top left;
} #menu li dt a ,#menu li dt a:visited {
display:block;
color:#;
text-decoration:none;
} /* 设置菜单项的dd */
#menu li dd { margin:;
padding:;
color: #fff;
background: #47a;
} #menu li dd.last {
border-bottom:1px solid #b00;
} #menu li dd a, #menu li dd a:visited {
height:1em;
display:block;
color:#fff;
text-decoration:none;
padding:4px 5px 4px 20px;
background: #47a url(images/arrow.gif) no-repeat 10px 10px;
} /*关闭子菜单*/ #menu li dd { display:none;} /* 设置鼠标响应 */ #menu li:hover dd { display:block;} #menu li dd a:hover {
background: #;
color:#9cf;
} </style>
</head> <body>
<ul id="menu">
<li>
<dl>
<dt><a href="#">Artech Studio</a></dt>
<dd><a href="#">Web Dev</a></dd>
<dd><a href="#">Web Design</a></dd>
<dd><a href="#">Books</a></dd>
<dd class="last"><a href="#">Contact Us</a></dd>
</dl>
</li>
<li>
<dl>
<dt><a href="#">Artech Store</a></dt>
<dd><a href="#">Books</a></dd>
<dd><a href="#">DVDs</a></dd>
<dd><a href="#">Movies</a></dd>
<dd class="last"><a href="#">Service</a></dd>
</dl>
</li>
<li>
<dl>
<dt><a href="#">Artech Achi</a></dt>
<dd><a href="#">Landscape</a></dd>
<dd><a href="#">Plan</a></dd>
<dd><a href="#">Design</a></dd>
<dd class="last"><a href="#">Maps</a></dd>
</dl>
</li>
<li>
<dl>
<dt><a href="#">Artech Science</a></dt>
<dd><a href="#">Physics</a></dd>
<dd><a href="#">Maths</a></dd>
<dd><a href="#">Chemistry</a></dd>
<dd class="last"><a href="#">Courses</a></dd>
</dl>
</li>
</ul>
</body>
</html>
针对ie6进行后期优化
<!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=gb2312" />
<title>二级菜单</title>
<style type="text/css"> /* 整体设置*/
#menu {
margin:;
padding:;
width:610px;
list-style-type:none;
font:14px Arial;
} #menu li {
float:left;
padding:;
margin: 1px ;
width:150px;
} /* 设置菜单项*/
#menu li dl {
width:150px;/*ie6*/
margin: ;
padding: 10px ;
background: #cb6 url(images/bottom.gif) no-repeat bottom left;
} #menu li dt a,#menu li dd a{ display:block;} /* 设置菜单项的dt */
#menu li dt {
margin:;
padding: 5px;
text-align:center;
border-bottom:1px solid #b00;
background:
} #menu li dt.orange { background:#fa5 url(images/top.gif) no-repeat top left;}
#menu li dt.yellow { background:#ee5 url(images/top.gif) no-repeat top left;}
#menu li dt.green { background:#5e5 url(images/top.gif) no-repeat top left;}
#menu li dt.blue { background:#5cf url(images/top.gif) no-repeat top left;} #menu li dt a ,#menu li dt a:visited {
display:block;
color:#;
text-decoration:none;
} /* 设置菜单项的dd */
#menu li dd { margin:;
padding:;
color: #fff;
background: #47a;
} #menu li dd.last {
border-bottom:1px solid #b00;
} #menu li dd a, #menu li dd a:visited {
display:block;
color:#fff;
text-decoration:none;
padding:4px 5px 4px 20px;
background: #47a url(images/arrow.gif) no-repeat 10px 10px;
height:1em;
} /*关闭子菜单*/ #menu li dd { display:none;} /* 设置鼠标响应 */ #menu li:hover dd , #menu li a:hover dd { display:block;} #menu li:hover, #menu li a:hover { border:;}/*ie6*/ #menu li dd a:hover {
background: #;
color:#9cf;
} /*针对ie6的设置*/
#menu table { border-collapse:collapse;
padding:;
margin:-1px;
font-size:1em;
} </style>
</head> <body>
<ul id="menu">
<li>
<!--[if lte IE ]><a href="#nogo"><table><tr><td><![endif]-->
<dl>
<dt class="orange"><a href="#">Artech Studio</a></dt>
<dd><a href="#">Web Dev</a></dd>
<dd><a href="#">Web Design</a></dd>
<dd><a href="#">Books</a></dd>
<dd class="last"><a href="#">Contact Us</a></dd>
</dl>
<!--[if lte IE ]></td></tr></table></a><![endif]-->
</li>
<li>
<!--[if lte IE ]><a href="#nogo"><table><tr><td><![endif]-->
<dl>
<dt class="yellow"><a href="#">Artech Store</a></dt>
<dd><a href="#">Books</a></dd>
<dd><a href="#">DVDs</a></dd>
<dd><a href="#">Movies</a></dd>
<dd class="last"><a href="#">Service</a></dd>
</dl>
<!--[if lte IE ]></td></tr></table></a><![endif]-->
</li>
<li>
<!--[if lte IE ]><a href="#nogo"><table><tr><td><![endif]-->
<dl>
<dt class="green"><a href="#">Artech Achi</a></dt>
<dd><a href="#">Landscape</a></dd>
<dd><a href="#">Plan</a></dd>
<dd><a href="#">Design</a></dd>
<dd class="last"><a href="#">Maps</a></dd>
</dl>
<!--[if lte IE ]></td></tr></table></a><![endif]-->
</li>
<li>
<!--[if lte IE ]><a href="#nogo"><table><tr><td><![endif]-->
<dl>
<dt class="blue"><a href="#">Artech Science</a></dt>
<dd><a href="#">Physics</a></dd>
<dd><a href="#">Maths</a></dd>
<dd><a href="#">Chemistry</a></dd>
<dd class="last"><a href="#">Courses</a></dd>
</dl>
<!--[if lte IE ]></td></tr></table></a><![endif]-->
</li>
</ul>
</body>
</html>
css案例学习之ul li dl dt dd实现二级菜单的更多相关文章
- HTML 列表 <ol><ul><li><dl><dt><dd>
<ol>标签-有序列表 定义和用法: <ol>标签定义有序列表. HTML 与 XHTML 之间的差异 在 HTML 4.01 中,ol 元素的 "compact&q ...
- DIV+CSS中标签ul ol li dl dt dd用法
ul ol li dl dt dd都是DIV+CSS做网页长用的东西,相当于一棵树的树技,下面就了解一下这些东西的全体用法,本人用dd,dt,dd用得很少,懂得结合使用对做架构是很有好处的哦! DIV ...
- Div+css中ul ol li dl dt dd使用
ol 有序列表.<ol><li>……</li><li>……</li><li>……</li></ol>表现 ...
- HTML中的ul, ol,li , dl,dt, dd标签
ul: unordered lists ol: ordered lists li: Lists ol 有序列表. <ol><li>……</li><li> ...
- html dl dt dd标签元素语法结构与使用
dl dt dd认识及dl dt dd使用方法 <dl> 标签用于定义列表类型标签. dl dt dd目录 dl dt dd介绍 结构语法 dl dt dd案例 dl dt dd总结 一. ...
- 【HTML】dl dt dd
摘要 看到没怎么使用过的html 标签,记录下 定义 dl 类似于 ul ,无任何样式,自定义列表容器, ul 为无序列表容器,ol 为有序列表容器 dt dd 类似于 li ,无任何样式,为帮助实现 ...
- html-2, a img ul li ol dl dt dd 标签与列表标签的简单使用
<!-- a: a{ /*清除a标签的下划线*/ text-decoration: none; } (1)超链接 href 超链接的地址 target: _self 默认 在当前中打开链接地 ...
- dl,dt,dd,ul,li,ol区别
dl.dt.dd也是列表项,不过它们被忽视得比较厉害,人们只知道ul.ol.li,却经常漠视它们的存在,其实有时候,dl.dt.dd也是非常好用的,这两个家族是近亲,很多地方都是一模一样. dl类似u ...
- ol,li,ul,dl,dt,dd
块级元素div尽量少用,其实和table一样,嵌套越少越好,它也是会影响速度的! ol 有序列表. <ol> <li>……</li> <li>……< ...
随机推荐
- gnuplot
一. 简介 gnuplot是一个命令行驱动的科学绘图工具,可将数学函数或数值资料以平面图或立体图的形式画在不同种类终端机或绘图输出装置上.gnuplot既支持命令行交互模式,也支持脚本. 二. 特性 ...
- php-timeit估计php函数的执行时间
首先,前段时间利用手头的日本VPS搭建了一个google代理,访问速度还行,分享给大家: 谷歌 谷歌:guge119.com 谷歌学术:scholar.guge119.com 有时候我们在PHP性能优 ...
- 沙湖王 | 用Scipy实现K-means聚类算法
沙湖王 | 用Scipy实现K-means聚类算法 用Scipy实现K-means聚类算法
- iOS开发-Runtime详解（简书）
简介 Runtime 又叫运行时,是一套底层的 C 语言 API,其为 iOS 内部的核心之一,我们平时编写的 OC 代码,底层都是基于它来实现的.比如: [receiver message]; // ...
- IOS 采用https 协议访问接口
申请好证书后,发现ios 仍无法使用https协议访问到数据,发现ios 需要ssl 支持 TLS1.2 . 更改nginx 配置: ssl_protocols TLSv1 TLSv1. TLSv1. ...
- JUnit4基础 使用JUnit4进行单元测试
JUnit 4全面引入了Annotation来执行我们编写的测试. 关于JUnit 3的使用可以参见:http://www.cnblogs.com/mengdd/archive/2013/03/26/ ...
- PC--CSS技巧
1.图片不存在的时候,显示一个默认图片 <img src=”01.jpg” onerror=”this.src=’02.jpg'” /> 2.CSS强制图片自适应大小 img {width ...
- Angular Textarea 高度自动变化
很多前端开发的朋友可能都会遇到textarea 输入框的高度不能自动随着用户的输入变化的问题,今儿小生也遇到了, 并通过网络上的信息解决了这个问题,于是将解决方法贴上,以作备忘. directiveA ...
- flashback database操作步骤
默认情况数据库的flashback database是关闭的. 启用Flashback Database 步骤:1.配置Flash Recovery Area 检查是否启动了flash recover ...
- Android编译过程详解（二）
通过上篇文章,我们分析了编译android时source build/envsetup.sh和lunch命令,在执行完上述两个命令后, 我们就可以进行编译android了. 1. make 执行ma ...