一个Web二级菜单的实现(俺新手随便写的)

任务描述
一、整体要求：

1、要求页面整洁、美观，与提供的页面效果图、结构保持一致，文字、背景的颜色不统一要求
2、要求HTML代码和CSS代码书写、命名符合规范

二、 具体要求
1、鼠标移入一级菜单时，二级菜单显示，鼠标移出一级菜单时，二级菜单隐藏
（1）元素显示使用display:block属性，隐藏使用display:none属性

2、二级菜单显示在一级菜单的右侧
（1）给一级菜单和二级菜单共同的父元素设置相对定位（position: relative）
（2）给二级菜单设置绝对定位（position: absolute），并设置左侧位移（left）的值为一级菜单的宽度，上放位移（top）的值为0
3、一级菜单的文字和二级菜单的文字水平居中显示
4、一级菜单的文字和二级菜单的文字垂直居中显示
5、一级菜单的每一项和二级菜单的每一项有下边框，边框为点线（dotted）
6、一级菜单的最后一项和二级菜单的最后一项没有下边框（可以使用li:last-child选中最后一项，并设置border:none）
7、每一个菜单项的宽度和高度不做统一要求

思路分析:

评分标准是什么？
规范
1、要求页面整洁、美观，与提供的页面效果图、结构保持一致，文字、背景的颜色不统一要求
2、要求HTML代码和CSS代码书写、命名符合规范

整体
1、鼠标移入一级菜单时，二级菜单显示，鼠标移出一级菜单时，二级菜单隐藏
2、二级菜单显示在一级菜单的右侧

一级菜单
1、一级菜单的文字水平居中显示
2、一级菜单的文字垂直居中显示
3、一级菜单的每一项有下边框，边框为点线（dotted）
4、一级菜单的最后一项没有下边框

二级菜单
1、二级菜单的文字水平居中显示
2、二级菜单的文字垂直居中显示
3、二级菜单的每一项有下边框，边框为点线（dotted）
4、二级菜单的最后一项没有下边框

效果

    


        * {
            margin: 0px;
            padding: 0px;
        }

        .list {
            position: relative;
        }

        ul {
            width: 200px;
            height: 29px;
            list-style: none;    /* 去掉无序列表的项目符号 */
        }

        ul>li {
            border-bottom: 1px dotted white;
            /* 处理文本内容溢出后的情况 */
            overflow: hidden;
            text-overflow: ellipsis;
            background-color: black;
            width: 200px;
            height: 28px;
            text-align:center /*为了使里面的文字居中*/ 
        }

        ul>li#last {
            border-bottom: 0px;
        }

        .list>ul>li>a {
            display:inline-block; /*设置为内联元素*/
            line-height: 28px; /*设置行高为父布局的高度, 为了垂直居中*/ 
            width: 100%;
            color: white;
            text-decoration: none;             /* 去掉链接元素文本内容的下划线 */
            white-space: nowrap;             /* 强制文本内容在一行显示 */
        }

        .list>ul>li:hover>ol {
            display: block;
        }

        ul>li>ol {
            display: none;
            position: absolute;
            left: 200px;
            top:0px;
            list-style: none;    /* 去掉无序列表的项目符号 */
        }

        ul>li>ol>li {
            border-bottom: 1px dotted white;
            /* 处理文本内容溢出后的情况 */
            overflow: hidden;
            text-overflow: ellipsis;
            background-color: #727272;
            width: 200px;
            height: 28px;
            line-height: 28px;
            text-align:center; /*为了使里面的文字居中*/
            top: 0px;
            color: white;
        }
        ul>li>ol>li:last-child {
            border-bottom: 0px;
        }
    

        


                前端开发
                

HTML/CSS
                    
Javascript
                    
Vue.js
                    
ReactJS
                    
小程序
                    
Node.js
                

        

    

        


                后端开发
                

Java
                    
sprint boot
                    
spring cloud
                    
python
                    
爬虫
                    
PHP
                

        

    

        


                移动开发
                

android
                    
iOS
                    
reative native
                    
weex
                

        

    

        


                算法/数学
                

算法与数据结构
                    
数学
                    
算法
                

        

    

        


                前沿技术
                

微服务
                    
区块链
                    
以太坊
                    
人工智能
                    
机器学习
                    
深度学习
                    
计算机视觉
                    
自然语言处理
                    
数据处理/数据挖掘
                

        

    

        


                运维测试
                

运维
                    
自动化运维
                    
算法
                    
中间件
                    
linux