css中使用ul li ul li ul li ul li 实现四层级联菜单

前端  /  管理员 发布于 7年前   238


复制代码代码如下:
<!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: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;
}
</style>
<script src="https:/css/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) {
return;
}
else {
window.open("http://www.baidu.com");
}
}
else {
return;
}
}
</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>


  • 上一条：
    css3实现图片遮罩效果鼠标hover以后出现文字
    下一条：
    css background-position 用法详细图文介绍

    • 昵称：

    邮箱：

    0条评论 (评论内容有缓存机制,请悉知!)
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客