效果

代码实现

<!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. 多目录下多文件 makefile编写

    前面已经分享了单目录项下多文件的makefile的编写,现在来看看多目录下多文件makefile的编写: 在做项目时,一般文件都会分几个目录来存放:基本的是  include/  bin/ src/ ...

  2. Thinkphp交友手机首页简明前台、后台

    先来说下后台吧,后台要写后台模板-V,后台控制器-C 后台模板如下代码: <!DOCTYPE html> <html> <head> <meta charse ...

  3. SQL 2008存储图片和读取图片

    用SQL Server存储文字数据非常easy实现,假设用SQL Server存储图片呢?大家有没有实现思路呢?如今我用一个Demo来为大家提供一种在SQL Server中存储图片的思路. 场景:在s ...

  4. 【Spark Core】任务运行机制和Task源代码浅析1

    引言 上一小节<TaskScheduler源代码与任务提交原理浅析2>介绍了Driver側将Stage进行划分.依据Executor闲置情况分发任务,终于通过DriverActor向exe ...

  5. Leetcode 238 Product of Array Except Self 时间O(n)和空间O(1)解法

    1. 问题描写叙述 给定一个n个整数的数组(n>1n>1)nums,返回一个数组output,当中的元素outputioutput_i的值为原数组nums中除numsinums_i之外的全 ...

  6. [Immutable.js] Exploring Sequences and Range() in Immutable.js

    Understanding Immutable.js's Map() and List() structures will likely take you as far as you want to ...

  7. Android学习笔记—Windows下NDK开发简单示例

    该示例假设Android开发环境已经搭建完成,NDK也配置成功: 1.在Eclipse上新建Android工程,名称为ndkdemo.修改res\layout\activity_main.xml &l ...

  8. 移动前端开发之 viewport 的深入理解

    移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport了,只有明白了viewport的概念以及弄清楚了跟viewport有关的meta标签的使用,才能更好地让我们的网页适配或响 ...

  9. ASP.NET 导出Excel文档

    System.IO.TextWriter writer = new System.IO.StreamWriter(Server.MapPath("/provprice.xls"), ...

  10. Xcode6和Xcode5获取app名字

    1.在Xcode5下,获取程序名字(app name)的方法为: NSDictionary *infoDictionary = [[NSBundle mainBundle] infoDictionar ...