纯css简单的导航下拉菜单

css部分： 

<style>

        * {

            margin: 0; padding: 0;

        }

        li {

            list-style: none;

        }

        a {

            text-decoration: none;

            color: black;

        }

        .nav {

            background-color: cadetblue;

            width: 300px;

            height: 30px;

            margin: 50px auto;

        }

        .nav ul li {

            float: left;

        }

        .nav ul li a {

            display: block;

            line-height: 30px;

            width: 100px;

            height: 30px;

            text-align: center;

        }

        .nav ul li a:hover {

            color: white;

            background-color: tomato;

        }

        .nav ul li ol {

            display: none;

        }

        .nav ul li:hover ol {

            text-align: center;

            display: block;

            height: 30px;

            color: white;

        }

        .nav ul li ol a:hover {

            color: white;

            background-color: teal;

        }

    </style>

html部分

 <div class="nav">

        <ul>

            <li><a href="#">导航一</a>

                <ol><a href="#">子菜单</a></ol>

                <ol><a href="#">子菜单</a></ol>

                <ol><a href="#">子菜单</a></ol>

            </li>

            <li><a href="#">导航一</a></li>

            <li><a href="#">导航一</a></li>

        </ul>

    </div>