css中的ul li ul li ul li ul li 实现四级菜单

最新推荐文章于 2023-01-31 23:33:26 发布
无盐海
最新推荐文章于 2023-01-31 23:33:26 发布
阅读量4.2k
点赞数 1
分类专栏： CSS
本文链接：https://blog.csdn.net/Fanbin168/article/details/13290763
版权
CSS 专栏收录该内容
16 篇文章 0 订阅
订阅专栏
<!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标签的时候文字显示为红色,当鼠标移出a标签的时候又变回原来的颜色--*/
              color:Red;
             }
            
        #div1 ul
        {   
              /*--去掉文字前面的小圆点--*/
              list-style-type:none;
             
            }
        #div1 ul li  /* 设置id为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="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="#" οnclick="config()">请联系我们</a></li>
   </ul>
</div>


</body>
</html>