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

随机推荐

【转】vim文件编码和乱码处理
原文网址:http://edyfox.codecarver.org/html/vim_fileencodings_detection.html 在 Vim 中,有四个与编码有关的选项,它们是:file ...
grep命令实例
grep一般用于查找文件中含有某些字符串的行,其命名格式如下 grep [OPTIONS] PATTERN [FILE...] 下面例举grep在linux使用过程中其常用使用实例: 1.grep递归 ...
HDOJ-1019 Least Common Multiple
http://acm.hdu.edu.cn/showproblem.php?pid=1019 题意:给出n个数,求它们的最小公倍数对于n个数,它们的最小公倍数等于[前n-1个数的最小公倍数和第n个数 ...
Java I/O 模型的演进
什么是同步?什么是异步?阻塞和非阻塞又有什么区别?本文先从 Unix 的 I/O 模型讲起,介绍了5种常见的 I/O 模型.而后再引出 Java 的 I/O 模型的演进过程,并用实例说明如何选择合适的 ...
使用itextsharp创建PDF文档——图片集合
文档管理系统中 ,扫描模块将文档或证件扫描后.为了便于保存多个图片,拟将多个图片生成一个PDF文档进行保存. 这里我们就需要PDF生成工具了.你可以在这里下载.PDFCreator 主要使用了开源工具 ...
time date 基础操作
一. 获取当前系统时间和日期并格式化输出: import java.util.Date;import java.text.SimpleDateFormat; public class NowStrin ...
Cocoa Pods的安装
CocoaPods是用Ruby实现的,要想使用它首先需要有Ruby的环境.幸运的是OS X系统默认已经可以运行Ruby了,因此我们只需执行以下命令: sudo gem install -n /usr/ ...
class、interface、struct的差别
1 struct和class有什么差别 1.1默认的继承訪问权限 Struct是public的,class是private的. 你能够写例如以下的代码: struct A { char a; }; s ...
【算法】插入排序 insertion_sort
准备写个<STL 源代码剖析>的读书笔记,开个专栏.名为<STL 的实现>,将源代码整理一遍.非常喜欢侯捷先生写在封底的八个字:天下大事.必作于细.他在书中写到:"我 ...
（转）SQL Server 触发器
SQL Server 触发器触发器是一种特殊类型的存储过程,它不同于之前的我们介绍的存储过程.触发器主要是通过事件进行触发被自动调用执行的.而存储过程可以通过存储过程的名称被调用. Ø 什么是触发器 ...

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

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

随机推荐

热门专题