效果

代码实现

<!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. heritrix 3.2.0 下载

    由于archive.org屏蔽,编译完成版本 http://builds.archive.org/maven2/org/archive/heritrix/heritrix/3.2.0/ 无法下载. 现 ...

  2. 【转】Android用NDK和整套源码下编译JNI的不同

    原文网址:http://www.devdiv.com/android_ndk_jni_-blog-99-2101.html 前些天要写个jni程序,因为才几行代码,想着用ndk开发可能容易些,就先研究 ...

  3. 如何在程序中调用Caffe做图像分类

    Caffe是目前深度学习比较优秀好用的一个开源库,采样c++和CUDA实现,具有速度快,模型定义方便等优点.学习了几天过后,发现也有一个不方便的地方,就是在我的程序中调用Caffe做图像分类没有直接的 ...

  4. kafka与Spring的集成

    准备工作 kafka版本:kafka_2.10-0.10.1.0 spring版本:spring4.3 配置文件 pom文件配置(也可以直接下载jar包) Kafka和spring集成的支持类库,sp ...

  5. PHP冒泡排序,选择排序,插入排序

    1  冒泡排序是两个元素相互比较,找到最小值,然后冒泡到最后,代码如下:

  6. Android应用程序消息处理机制（Looper、Handler）分析

    文章转载至CSDN社区罗升阳的安卓之旅,原文地址:http://blog.csdn.net/luoshengyang/article/details/6817933 Android应用程序是通过消息来 ...

  7. Linux经常使用命令大全

    系统信息  arch 显示机器的处理器架构(1)  uname -m 显示机器的处理器架构(2)  uname -r 显示正在使用的内核版本号  dmidecode -q 显示硬件系统部件 - (SM ...

  8. VS2008下编译boost_1_47_0

      1,boost下载 如果不想自己编译,可下载http://boostpro.com/download/boost_1_47_setup.exe,安装后,程序会提供选项供下载已经编译好的库文件,基于 ...

  9. UIButton-初识IOS

    今天,我学到了所有app经常用到的UIButton控件,废话不多说,这些都是我学习的时候总结的一些,希望可以帮到以后的初学者,IOS初学不应该直接拖拽,感觉不易于理解,所以我总结的基本上全是纯代码编辑 ...

  10. 利用jquery来隐藏input type="file"

    <li> <input type="text" name="token" value = "<?php ech$_SESSIO ...