css中使用ul li ul li ul li ul li 实现四层级联菜单
& 发布时间： 17:08:23 & 作者：佚名 &
四级菜单的使用很常见实现的方法也有很多，在本文为大家介绍下使用ul li ul li ul li ul li 来轻松实现下，感兴趣的朋友可以参考下
代码如下: &!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& &title&&/title& &style type="text/css"& a { color:B /*--a标签的默认颜色为黑色--*/ text-decoration: /*--隐藏超链接的下划线--*/ } a:hover { /**--当鼠标聚焦到a标签的时候文字显示为红色--*/ color:R } #div1 ul { /*--去掉文字前面的小圆点--*/ list-style-type: } #div1 ul li { border-style: border-width:1 padding:6 width:2.2 text-align: background-color:# } #div1 ul li ul { display: /*--默认隐藏一级菜单外的其他菜单--*/ } #div1 ul li:hover ul { display: position: left:50 height:0 top:-25 } #div1 ul li:hover ul li ul /*--当鼠标聚焦到一级菜单下的li的时候，隐藏三级菜单--*/ { display: } #div1 ul li ul li:hover ul /*--当鼠标聚焦到二级菜单下的li的时候，显示三级菜单,并设置菜单显示为block样式--*/ { display: } #div1 ul li ul li:hover ul li ul /*--当鼠标聚焦到二级菜单下的li的时候，隐藏四级菜单--*/ { display: } #div1 ul li ul li ul li:hover ul /*--当鼠标聚焦到三级菜单下的li的时候，显示四级菜单,并设置菜单显示为block样式--*/ { display: } &/style& &script src="Scripts/jquery-1.4.1.js" type="text/javascript"&&/script& &script type="text/javascript"& function config() { if (confirm("你确定要联系我们吗？")) { //window.location.href = 'http://www.baidu.com'; //location.href = "http://www.baidu.com"; //window.open('http://www.baidu.com'); if (confirm("能不能不要联系我们啊？") == true) {
} else { window.open("http://www.baidu.com"); } } else {
} } &/script& &/head& &body& &div id="div1"& &ul& &li&&a href="#"&中国&/a& &ul& &li&&a href="#"&湖南&/a& &ul& &li&&a href="#"&长沙&/a& &ul& &li&&a href="#"&芙蓉区&/a&&/li& &li&&a href="#"&天心区&/a&&/li& &li&&a href="#"&雨花县&/a&&/li& &li&&a href="#"&望城区&/a&&/li& &li&&a href="#"&开福区&/a&&/li& &/ul& &/li& &li&&a href="#"&衡阳&/a& &ul& &li&&a href="#"&雁峰区&/a&&/li& &li&&a href="#"&朱辉区&/a&&/li& &li&&a href="#"&石鼓县&/a&&/li& &li&&a href="#"&祁东县&/a&&/li& &li&&a href="#"&南岳区&/a&&/li& &/ul& &/li& &li&&a href="#"&永州&/a& &ul& &li&&a href="#"&零陵区&/a&&/li& &li&&a href="#"&冷水滩区&/a&&/li& &li&&a href="#"&东安县&/a&&/li& &li&&a href="#"&潇湘区&/a&&/li& &/ul& &/li& &/ul& &/li& &li&&a href="#"&北京&/a& &ul& &li&&a href="#"&朝阳区&/a&&/li& &/ul& &/li& &li&&a href="#"&广东&/a& &ul& &li&&a href="#"&广州&/a& &ul& &li&&a href="#"&天河区&/a&&/li& &li&&a href="#"&越秀区&/a&&/li& &li&&a href="#"&海珠区&/a&&/li& &/ul& &/li& &li&&a href="#"&深圳&/a& &ul& &li&&a href="#"&罗湖区&/a&&/li& &li&&a href="#"&福田区&/a&&/li& &li&&a href="#"&南山区&/a&&/li& &li&&a href="#"&盐田区&/a&&/li& &li&&a href="#"&宝安区&/a&&/li& &li&&a href="#"&龙岗区&/a&&/li& &/ul& &/li& &li&&a href="#"&东莞&/a&&/li& &li&&a href="#"&佛山&/a&&/li& &/ul& &/li& &/ul& &/li& &li&&a href="#"&美国&/a& &ul& &li&&a href="#"&纽约&/a& &ul& &li&&a href="#"&曼哈顿区&/a&&/li& &li&&a href="#"&皇后区&/a&&/li& &/ul& &/li& &li&&a href="#"&华盛顿&/a&&/li& &li&&a href="#"&芝加哥&/a&&/li& &/ul& &/li& &li&&a href="#"&俄罗斯&/a& &ul& &li&&a href="#"&莫斯科&/a&&/li& &li&&a href="#"&圣彼得堡&/a&&/li& &/ul& &/li& &li&&a href="#" onclick="config()"&请联系我们&/a&&/li& &/ul& &/div& &/body& &/html&
大家感兴趣的内容
12345678910
最近更新的内容&ul&中的&li&我点击一个&li&后其它的&li&全变背景色，求JS和CSS代码_百度知道
&ul&中的&li&我点击一个&li&后其它的&li&全变背景色，求JS和CSS代码
&ul&中的&li&我点击一个&li&后其它的&li&全变背景色要图中效果，求JS和CSS代码...
&ul&中的&li&我点击一个&li&后其它的&li&全变背景色要图中效果，求JS和CSS代码
答题抽奖
首次认真答题后
即可获得3次抽奖机会，100%中奖。
&html&&Head&&/Head&&body& &script type=&text/javascript&&
function sel(obj)
var lis=document.getElementsByTagName(&li&);
for(var i=0;i&lis.i++)
if(lis[i]!=obj)
lis[i].style.background=&#00f&;
lis[i].style.background=&#0ff&
}&/script&&ul& &li onclick=&sel(this);&& 1111&/li& &li onclick=&sel(this);&&22222 &/li& &li onclick=&sel(this);&&3333 &/li& &li onclick=&sel(this);&& 44444&/li&&/ul&&/body&&/html&
为你推荐：
其他类似问题
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。看看怎么用CSS去掉ul li前面的黑色小圆点方法-css教程-ab蓝学网
在CSS中经常会使用到li标签，默认情况下使用li时，会在文字前面自动加上一个黑色的小圆点，有时候会觉得这个圆点多余，所以要去掉。下面介绍几种常用的方法。方法一：&ul&&listy...
&在CSS中经常会使用到li标签，默认情况下使用li时，会在文字前面自动加上一个黑色的小圆点，有时候会觉得这个圆点多余，所以要去掉。下面介绍几种常用的方法。
&&& 方法一： &ul& &&&& &li style=&list-style-type:&&百度&/li& &&&& &li style=&list-style-type:&&雅虎&/li& &&&& &li style=&list-style-type:&&新浪&/li& &&&& &li style=&list-style-type:&&谷歌&/li& &/ul&
&&& 方法二： &style& &li {list-style-type:} &/style& &ul& &&&& &li&百度&/li& &&&& &li&雅虎&/li& &&&& &li&新浪&/li& &&&& &li&谷歌&/li& &/ul&
方法三： &style& &.li_style {list-style-type:} &/style& &ul& &&&& &li class=&li_style&&百度&/li& &&&& &li class=&li_style&&雅虎&/li& &&&& &li class=&li_style&&新浪&/li& &&&& &li class=&li_style&&谷歌&/li& &/ul&
上编：下编：
本月热门的内容
12345678910
最近更新的内容列表是HTML里一种很有用的显示方式，可以把相关的并列内容整齐地垂直排列，使网页显得整洁专业，并让浏览者有一目了然的感觉。
列表是HTML里一种很有用的显示方式，可以把相关的并列内容整齐地垂直排列，使网页显得整洁专业，并让浏览者有一目了然的感觉。
样式表为列表增加了一些功能，控制列表的样式包括列表样式、图形符号、列表位置三个部分。
1．列表符号
列表符号是指显示于每一个列表项目前的符号标识。
基本格式如下：
list-style-type：参数
参数取值范围：
&disc：圆形
&circle：空心圆
&square：方块
&decimal：十进制数字
&lower-roman：小写罗马数字
&upper-roman：大写罗马数字
&lower-alpha：小写希腊字母
&upper-alpha：大写希腊字母
&none：无符号显示
参数中的disc是默认选项。
2．图形符号
图形符号指原来列表的项目符号将可以使用图形来代替。
基本格式如下：
list-style-image：URL
URL是用来代替项目符号的图形文件的地址，可以使用相对地址或绝对地址。
3．列表位置
列表位置描述列表在何处显示。
基本格式如下：
list-style-position：参数
参数取值范围：
&inside：在BOX模型内部显示
&outside：在BOX模型外部显示
这里又出现了一个新的概念：BOX模型。BOX是指一种容器，包含了应用样式规则的对象，具体介绍将在后文中给出。 ========================================================================================
使用无序列表：即UL
看一个最简单的例子：
&ul& &li&Item 1&/li& &li&Item 2&/li& &li&Item 3&/li& &li&Item 4&/li&&/ul&
这是一个未加修饰的纵向列表
1：设置列表的边界
#base { border: 1px solid #000; margin: 2 width: 10 padding: 5 }
html中这样写，就会呈现一个带边框的无序列表
&div id="base"&&ul& &li&Item 1&/li& &li&Item 2&/li& &li&Item 3&/li& &li&Item 4&/li&&/ul&&/div&
2：设定列表的图像
可以设定列表的样式为左边带一个图像，样式如下：
ul { list-style-type: list-style-image: url(bullet.gif); list-style-position: }
disc表示实心的圆，list-style-image表示列表用到的小图像，如果这个图像的url
不正确时，disc才会起作用，inside表示列表是在区块内部的。
3：如何在段落中使用列表
样式如下：
#inline-list { border: 1px solid #000; margin: 2 width: 80%; padding: 5 font-family: Verdana, sans- }#inline-list p { display: }#inline-list ul, #inline-list li { display: margin: 0; padding: 0; color: #339; font-weight: }
4：水平导航
#h-contain { padding: 5 border: 1px solid #000; margin-bottom: 25 }
#pipe ul { margin-left: 0; padding-left: 0; display: } #pipe ul li { margin-left: 0; padding: 3px 15 border-left: 1px solid #000; list-style: display: }
#pipe ul li.first { margin-left: 0; border-left: list-style: display: }
#h-contain定一个一个边界为1的区块，水平导航用的也是inline方式，li.first定义第一个
列表元素没有左边那个象素为1的border。
下面的样式是tab方式的水平导航：
#tabs ul { margin-left: 0; padding-left: 0; display: } #tabs ul li { margin-left: 0; margin-bottom: 0; padding: 2px 15px 5 border: 1px solid #000; list-style: display: }
#tabs ul li.here { border-bottom: 1px solid # list-style: display: }
li的class如果为here，则是选中的
阅读(...) 评论()
HTML,DIV+CSS,js,JQ,UI等WEB前端设计经验 友情链接：,,,,,,,,,,,,css 如何控制ul li 每行显示几个并换行 像table效果一样_百度知道
css 如何控制ul li 每行显示几个并换行 像table效果一样
页面显示形如中间得li这样&ul&&li&1&/li&&li&1&/li&&li&1&/li&&li&1&/li&&li&1&/li&&li&1&/li&&li&1&/li&&li&1&/li&&li&1&/li&&/ul&...
页面显示形如中间得li这样&ul&
&li&1&/li&
&li&1&/li&
&li&1&/li&
&li&1&/li&
&li&1&/li&
&li&1&/li&
&li&1&/li&
&li&1&/li&
&li&1&/li&&/ul&
答题抽奖
首次认真答题后
即可获得3次抽奖机会，100%中奖。
采纳数：518
获赞数：1988
可以用float:left让li在一行排列就可以。具体效果看下面代码:&style&ul{overflow:width:100%;}ul&li{width:33.333%;float:}&/style&&ul&&&&li&111&/li&&&&li&222&/li&&&&li&333&/li&&&&li&444&/li&&&&li&555&/li&&&&li&666&/li&&/ul&CSS（层叠样式表）级联样式表是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
Millia米拉
Millia米拉
采纳数：45
获赞数：757
给li加上宽度就可以了.例如:ul{width:500list-style:}ul li{width:100float:margin-right:15line-height:20}这样li的宽度就会像一个个100px大小的块一样在宽度为500px的ul里排列.并且每个li之间间隔15px
本回答被提问者采纳
采纳数：879
获赞数：2569
&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Strict//EN& &&&&html xmlns=&&& &head&
&title&&/title&
&style type=&text/css&&
ul{border:1float:left}
li{float:width:33%;}
&/style& &/head& &body&
&li&1&/li&
&li&1&/li&
&li&1&/li&
&li&1&/li&
&li&1&/li&
&li&1&/li&
&li&1&/li&
&li&1&/li&
&li&1&/li&
&/body&&/html&
为你推荐：
其他类似问题
您可能关注的内容
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。