效果

代码实现

<!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实现二级菜单的更多相关文章

  1. HTML 列表 <ol><ul><li><dl><dt><dd>

    <ol>标签-有序列表 定义和用法: <ol>标签定义有序列表. HTML 与 XHTML 之间的差异 在 HTML 4.01 中,ol 元素的 "compact&q ...

  2. DIV+CSS中标签ul ol li dl dt dd用法

    ul ol li dl dt dd都是DIV+CSS做网页长用的东西,相当于一棵树的树技,下面就了解一下这些东西的全体用法,本人用dd,dt,dd用得很少,懂得结合使用对做架构是很有好处的哦! DIV ...

  3. Div+css中ul ol li dl dt dd使用

    ol 有序列表.<ol><li>……</li><li>……</li><li>……</li></ol>表现 ...

  4. HTML中的ul, ol,li , dl,dt, dd标签

    ul: unordered lists ol: ordered lists li: Lists ol 有序列表. <ol><li>……</li><li> ...

  5. html dl dt dd标签元素语法结构与使用

    dl dt dd认识及dl dt dd使用方法 <dl> 标签用于定义列表类型标签. dl dt dd目录 dl dt dd介绍 结构语法 dl dt dd案例 dl dt dd总结 一. ...

  6. 【HTML】dl dt dd

    摘要 看到没怎么使用过的html 标签,记录下 定义 dl 类似于 ul ,无任何样式,自定义列表容器, ul 为无序列表容器,ol 为有序列表容器 dt dd 类似于 li ,无任何样式,为帮助实现 ...

  7. html-2, a img ul li ol dl dt dd 标签与列表标签的简单使用

    <!-- a:  a{ /*清除a标签的下划线*/ text-decoration: none; }  (1)超链接 href 超链接的地址 target: _self 默认 在当前中打开链接地 ...

  8. dl,dt,dd,ul,li,ol区别

    dl.dt.dd也是列表项,不过它们被忽视得比较厉害,人们只知道ul.ol.li,却经常漠视它们的存在,其实有时候,dl.dt.dd也是非常好用的,这两个家族是近亲,很多地方都是一模一样. dl类似u ...

  9. ol,li,ul,dl,dt,dd

    块级元素div尽量少用,其实和table一样,嵌套越少越好,它也是会影响速度的! ol 有序列表. <ol> <li>……</li> <li>……< ...

随机推荐

  1. VC运行库版本不同导致链接.LIB静态库时发生重复定义问题的一个案例分析和总结

    转帖:http://blog.csdn.net/whygosofar/article/details/2821875 MSDN中对于在不同的配置下Link的LIB作了说明: C Runtime Lib ...

  2. 深入浅出Node.js (4) - 异步编程

    4.1 函数式编程 4.1.1 高阶函数 4.1.2 偏函数用法 4.2 异步编程的优势与难点 4.2.1 优势 4.2.2 难点 4.3 异步编程解决方案 4.3.1 事件发布/订阅模式 4.3.2 ...

  3. juicer模板引擎使用

    http://www.juicer.name/ <script src="~/Scripts/jquery-1.8.2.min.js"></script> ...

  4. 《Algorithms 4th Edition》读书笔记——2.4 优先队列(priority queue)-Ⅶ(延伸:堆排序的实现)

    2.4.5 堆排序 我们可以把任意优先队列变成一种排序方法.将所有元素插入一个查找最小元素的有限队列,然后再重复调用删除最小元素的操作来将他们按顺序删去.用无序数组实现的优先队列这么做相当于进行一次插 ...

  5. sudo nopasswd

    preface,不问头条,但汝读荐,诚意满满的!

  6. MySQL的备份和还原

    MySQL的备份和还原 备份:副本    RAID1,RAID10:保证硬件损坏而不会业务中止:        DROP TABLE mydb.tb1; 备份类型:        热备份.温备份和冷备 ...

  7. java匿名内部类,多态,接口练习

    1多态以及接口调用方法: public class Interface { public static void main(String[] args) { Al x = new Al(); jian ...

  8. Duanxx的STM32学习:STM32命名规则

  9. 高性能WEB开发(6) - web性能測试工具推荐

    WEB性能測试工具主要分为三种.一种是測试页面资源载入速度的,一种是測试页面载入完成后页面呈现.JS操作速度的,另一种是整体上对页面进行评价分析,以下分别对这些工具进行介绍,假设谁有更好的工具也请一起 ...

  10. linux cache swap 以及 虚拟内存等

    提出四个问题及解答: 1)若进程在运行过程中,物理内存不足会发生什么? 2)为何进程在占用物理内存不变的情况下,系统的物理内存会增加? 3)为何程序的大小大于实际占用的物理内存?(假如程序30M,却只 ...