纯CSS制作下拉菜单

<style>
body{padding:0;margin:0;width:100%;height:100%;color:#111}
a{color:#111;text-decoration:none}
ul,li{list-style:none;padding:0;margin:0}
.nav{width:1000px;margin:0 auto;height:28px;line-height:28px}
.nav li{width:100px;background:#ccc;border:1px solid #666;height:26px;float:left;position:relative;text-align:center}
.nav li:hover .list{display:block}
.nav .list{width:100px;float:none;position:absolute;top:27px;left:0;display:none}
.nav .list li{height:28px;width:100%;border:none}
</style>

<div class="nav">
        <ul>
            <li><a href="javascript:void(0)">导航一</a>
                <div class="list">
                    <ul>
                        <li><a href="javascript:void(0)">导航1.1</a></li>
                        <li><a href="javascript:void(0)">导航1.2</a></li>
                        <li><a href="javascript:void(0)">导航1.3</a></li>
                        <li><a href="javascript:void(0)">导航1.4</a></li>
                        <li><a href="javascript:void(0)">导航1.5</a></li>
                    </ul>
                </div>
            </li>
            <li><a href="javascript:void(0)">导航一</a>
                <div class="list">
                    <ul>
                        <li><a href="javascript:void(0)">导航1.1</a></li>
                        <li><a href="javascript:void(0)">导航1.2</a></li>
                        <li><a href="javascript:void(0)">导航1.3</a></li>
                        <li><a href="javascript:void(0)">导航1.4</a></li>
                        <li><a href="javascript:void(0)">导航1.5</a></li>
                    </ul>
                </div>
            </li>
            <li><a href="javascript:void(0)">导航一</a>
                <div class="list">
                    <ul>
                        <li><a href="javascript:void(0)">导航1.1</a></li>
                        <li><a href="javascript:void(0)">导航1.2</a></li>
                        <li><a href="javascript:void(0)">导航1.3</a></li>
                        <li><a href="javascript:void(0)">导航1.4</a></li>
                        <li><a href="javascript:void(0)">导航1.5</a></li>
                    </ul>
                </div>
            </li>
            <li><a href="javascript:void(0)">导航一</a>
                <div class="list">
                    <ul>
                        <li><a href="javascript:void(0)">导航1.1</a></li>
                        <li><a href="javascript:void(0)">导航1.2</a></li>
                        <li><a href="javascript:void(0)">导航1.3</a></li>
                        <li><a href="javascript:void(0)">导航1.4</a></li>
                        <li><a href="javascript:void(0)">导航1.5</a></li>
                    </ul>
                </div>
            </li>
        </ul>
    </div>