css中如何使用ulli实现四层级联菜单

这篇文章主要为大家展示了“css中如何使用ul li实现四层级联菜单”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“css中如何使用ul li实现四层级联菜单”这篇文章吧。

成都创新互联是一家专注于做网站、网站设计与策划设计,新和网站建设哪家好?成都创新互联做网站,专注于网站建设10余年,网设计领域的专业建站公司;建站业务涵盖:新和等地区。新和做网站价格咨询:18982081108

代码如下:

 
 
 
 
 
a 
{ 
color:Black; /*--a标签的默认颜色为黑色--*/ 
text-decoration:none; /*--隐藏超链接的下划线--*/ 
} 
a:hover 
{ 
/**--当鼠标聚焦到a标签的时候文字显示为红色--*/ 
color:Red; 
} 
#div1 ul 
{ 
/*--去掉文字前面的小圆点--*/ 
list-style-type:none; 
} 
#div1 ul li 
{ 
border-style:solid; 
border-width:1px; 
padding:6px; 
width:2.2cm; 
text-align:center; 
background-color:#eeeeee; 
} 
#div1 ul li ul 
{ 
display:none; /*--默认隐藏一级菜单外的其他菜单--*/ 
} 
#div1 ul li:hover ul 
{ 
display:block; 
position:relative; 
left:50px; 
height:0px; 
top:-25px; 
} 
#div1 ul li:hover ul li ul /*--当鼠标聚焦到一级菜单下的li的时候，隐藏三级菜单--*/ 
{ 
display:none; 
} 
#div1 ul li ul li:hover ul /*--当鼠标聚焦到二级菜单下的li的时候，显示三级菜单,并设置菜单显示为block样式--*/ 
{ 
display:block; 
} 
#div1 ul li ul li:hover ul li ul /*--当鼠标聚焦到二级菜单下的li的时候，隐藏四级菜单--*/ 
{ 
display:none; 
} 
#div1 ul li ul li ul li:hover ul /*--当鼠标聚焦到三级菜单下的li的时候，显示四级菜单,并设置菜单显示为block样式--*/ 
{ 
display:block; 
} 
 
 
 
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) { 
return; 
} 
else { 
window.open("http://www.baidu.com"); 
} 
} 
else { 
return; 
} 
} 
 
 
 
 
 
中国 
 
湖南 
 
长沙 
 
芙蓉区
 
天心区
 
雨花县
 
望城区
 
开福区
 
 
 
衡阳 
 
雁峰区
 
朱辉区
 
石鼓县
 
祁东县
 
南岳区
 
 
 
永州 
 
零陵区
 
冷水滩区
 
东安县
 
潇湘区
 
 
 
 
 
北京 
 
朝阳区
 
 
 
广东 
 
广州 
 
天河区
 
越秀区
 
海珠区
 
 
 
深圳 
 
罗湖区
 
福田区
 
南山区
 
盐田区
 
宝安区
 
龙岗区
 
 
 
东莞
 
佛山
 
 
 
 
 
美国 
 
纽约 
 
曼哈顿区
 
皇后区
 
 
 
华盛顿
 
芝加哥
 
 
 
俄罗斯 
 
莫斯科
 
圣彼得堡
 
 
 
请联系我们