二级菜单

Posted 2020-12-30 badren

html：
        <ul>
            <li> <a href="#">1-1</a> </li>
            <li> <a href="#">1-2</a> </li>
            <ol>
                <li> <a href="#">1-2-1</a> </li>
                <li> <a href="#">1-2-2</a> </li>
            </ol>
        </ul>
    
    CSS:
        *{
          margin:0;
          padding=:0;
        }
        a{
        text-decoration:none;
        color:red;
        }
        li{
            list-style:none;
            float:left;
            width:200px;
            height:40px;
            line-height:40px;
            text-align:center;
            }    
        ol li{
            display:none;(隐藏二级菜单)
             }
        ul>li:hover ol li{
            display:black;
            background-color:blue;
            }
        ul>li:hover{
            background-color:pink;
            }
        ul>li:hover a{
            color:green;
            }