效果截图(颜色有点丑,请无视):

  

 

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            * {
                margin: 0;
                padding: 0;
                outline: 0;
            }
            
            ul,
            li {
                list-style: none;
            }
            
            a {
                text-decoration: none;
            }
            
            .nav {
                content: '';
                display: table;
                clear: both;
                box-sizing: border-box;
                padding: 50px;
            }
            
            .nav li.list-li {
                position: relative;
                float: left;
                width: 120px;
                height: 40px;
                line-height: 40px;
                font-weight: bold;
                border: 1px solid #486b02;
                border-right: 0;
                background-color: #27AE60;
                text-align: center;
                box-sizing: border-box;
            }
            
            .nav>li.list-li:last-child {
                border-right: 1px solid #486B02;
            }
            
            .nav li.list-li ul {
                display: none;
                position: absolute;
                top: 39px;
                left: -1px;
                width: 120px;
                border: 1px solid #8BD400;
                border-top: 0px;
                border-right: 0;
                cursor: pointer;
                box-sizing: border-box;
            }
            
            .nav li.list-li ul.ul-last {
                border-right: 1px solid #8BD400;
            }
            
            .nav .list-li:hover ul {
                display: block;
                background-color: aquamarine;
                color: #fff;
            }
            
            .nav .list-li a {
                display: block;
            }
            
            .nav li a:hover {
                color: #fff;
                background-color: blue;
            }
            
        </style>
    </head>

    <body>
        <ul class="nav">
            <li class="list-li">
                <a href="javascript:;">home</a>
                <ul>
                    <li>
                        <a>desgin1</a>
                    </li>
                    <li>
                        <a>desgin</a>
                    </li>
                    <li>
                        <a>desgin</a>
                    </li>
                </ul>
            </li>
            <li class="list-li">
                <a href="javascript:;">home</a>
                <ul>
                    <li>
                        <a>desgin2</a>
                    </li>
                    <li>
                        <a>desgin</a>
                    </li>
                    <li>
                        <a>desgin</a>
                    </li>
                </ul>
            </li>
            <li class="list-li">
                <a href="javascript:;">home</a>
                <ul>
                    <li>
                        <a>desgin3</a>
                    </li>
                    <li>
                        <a>desgin</a>
                    </li>
                    <li>
                        <a>desgin</a>
                    </li>
                </ul>
            </li>
            <li class="list-li">
                <a href="javascript:;">home</a>
                <ul class="ul-last">
                    <li>
                        <a>desgin4</a>
                    </li>
                    <li>
                        <a>desgin</a>
                    </li>
                    <li>
                        <a>desgin</a>
                    </li>
                </ul>
            </li>
        </ul>
    </body>

</html>

 

有需要的朋友可以领取支付宝到店红包,能省一点是一点