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

随机推荐

用VS2013+VELT进行Linux开发
快乐虾 http://blog.csdn.net/lights_joy/(QQ群:Visual EmbedLinux Tools 375515651) 欢迎转载,但请保留作者信息 1.1.1 什么是 ...
c++ 02
一.堆内存的动态分配与释放 malloc/calloc/realloc/free new/delete:详见memory.cpp 1.通过new运算符分配单个变量数据类型* 指针变量 = new 数 ...
《Java程序员面试笔试宝典》之字符串创建与存储的机制是什么
在Java语言中,字符串起着非常重要的作用,字符串的声明与初始化主要有如下两种情况: (1) 对于String s1=new String("abc")语句与Strin ...
High bridge, low bridge（离散化，前缀和）
High bridge, low bridge Q:There are one high bridge and one low bridge across the river. The river h ...
图解server端网络架构
这篇是计算机类的优质首发推荐>>>><图解server端网络架构> 467张图表讲透构建高可用高性能server实战写给网络架构师 serverproject师的 ...
编程算法 - 圆圈中最后剩下的数字(递推公式) 代码(C++)
圆圈中最后剩下的数字(递推公式) 代码(C++) 本文地址: http://blog.csdn.net/caroline_wendy 题目: 0,1...,n-1这n个数字排成一个圆圈, 从数字0開始 ...
Chrome 开发者工具详解(4)：Profiles 面板
概述当前使用的Chrome最新版为54.0.2840.71,这个版本的Profiles面板比之前提供的功能更多也更强大,下面是该面板所包含的功能点: Record JavaScript CPU Pr ...
MVC 错误处理1
实例1. /// <summary> /// 错误处理 /// 404 处理 /// </summary> protected void Application_Error(o ...
Code Complete 读后总结和新的扩展阅读计划
Code Complete 读后总结和新的扩展阅读计划用了一年时间终于将代码大全读完了,在这里做一个简单的总结,并安排下一阶段的扩展阅读计划. 1.选择代码大全作为我程序员职业入门的第一本书,我认为 ...
关于arm-linux-gcc的安装与配置
在嵌入式开发中我们经常会用到arm-linux-gcc来编译我们的应用程序.作为arm-linux-gcc的入门,我们先看看如何安装arm-linux-gcc. 安装arm-linux-gcc还是比较 ...

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

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

随机推荐

热门专题