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>……< ...

随机推荐

Pawn Brotherhood
Pawn Brotherhood 1 alpha_table = "abcdefgh" 2 3 def safe_pawns(pawns): 4 safe_count = 0 5 ...
【转】Android兼容性测试CTS Verifier-环境搭建、测试执行、结果分析
原文网址:http://www.cnblogs.com/zh-ya-jing/p/4452675.html CTS Verifier算是CTS的一部分,需要手动进行,主要用于测试那些自动测试系统无法测 ...
Asp.net MVC 3 防止 Cross-Site Request Forgery (CSRF)原理及扩展安全注入
原理:http://blog.csdn.net/cpytiger/article/details/8781457 原文地址:http://www.cnblogs.com/wintersun/archi ...
C# 使用枚举获取对应的数组值时
using System; enum Move { walk, run } class Program { static float[] speedAry = { 50.0f, 200.0f }; p ...
HDU 4287 (13.08.17)
Problem Description We all use cell phone today. And we must be familiar with the intelligent Englis ...
Android——SQLite实现面向对象CRUD
android中SQLite的使用,事实上倒也不难.可是与JDBC操作数据库相比,这个还是有点不顺手,并且我好久没写底层的封装了,使用SSM框架这些都不须要考虑......好了,废话不多说.以下直接建 ...
Python模块学习笔记— —time与datatime
Python提供了多个内置模块用于操作日期时间.像calendar,time,datetime.首先对time模块中最经常使用的几个函数作一个介绍,它提供的接口与C标准库time.h基本一致.然后再介 ...
5. openCV中常用函数学习
一.前言经过两个星期的努力,一边学习,一边写代码,初步完成了毕业论文系统的界面和一些基本功能,主要包括:1 数据的读写和显示,及相关的基本操作(放大.缩小和移动):2 样本数据的选择:3 数据归一化 ...
Microsoft Visual C++ 不支持long long
Microsoft Visual C++ 不支持long long 在C/C++中,64为整型一直是一种没有确定规范的数据类型.现今主流的编译器中,对64为整型的支持也是标准不一,形态各异.一般来说, ...
Biztalk2010安装及配置问题集
在安装Biztalk2010时,碰到很多问题,有的是粗心有的也是比较bt的,如: 1)在win7 64下引入x86 的cab,有点粗心,幸亏给我报错版本不兼容(呵呵): 2)安装的时候不知道为什么计 ...

css案例学习之ul li dl dt dd实现二级菜单

css案例学习之ul li dl dt dd实现二级菜单的更多相关文章

随机推荐

热门专题