Getting web front-end to combat: html foundation - the drop-down menu

Can a website allows users to easily use the site often embodied by the menu bar out, because it provides functionality entrance for most web pages. After a gentle click to display the menu items will be displayed most of the pages and functionality of the site allows users to clearly understand so that users save some time. Next, I teach you to write a command-click menu in the menu bar will appear a drop-down menu.

1.HTML page

<div id="nav">
        <ul>
            <li><a href="">菜单一</a>
                <ul>
                    <li><a href="">子菜单1</a></li>
                    <li><a href="">子菜单2</a></li>
                    <li><a href="">子菜单3</a></li>
                </ul>
            </li>
            <li><a href="">菜单二</a>
                <ul>
                    <li><a href="">子菜单1</a></li>
                    <li><a href="">子菜单2</a></li>
                    <li><a href="">子菜单3</a></li>
                </ul>
            </li>
            <li><a href="">菜单三</a></li>
        </ul>
    </div>

2.css style

/*清除原样式*/ * { margin: 0px; padding: 0px; border: 0px;
} ul { list-style: none;
} a { text-decoration: none;
}
/*一级菜单样式*/ #nav { width: 1000px; height: 40px; margin: 0px auto; background: #f00; font-size: 18px; font-family: 微软雅黑;
} #nav ul li { float: left;
        /*包含块*/ position:relative;
    } #nav ul li a { display: block; width: 160px; height: 40px; line-height: 40px; text-align: center; color: #fff;
        } #nav ul li a:hover { color: #ffd800; background: #970606;
            }
/*二级菜单样式*/ #nav ul li ul { position:absolute; top:40px; left:0px; display:none;
        } #nav ul li ul li { float:none;
            } #nav ul li ul li a{ background:#f00; border-top:1px solid #ccc;
            }
            /*一级菜单悬停时二级菜单可见*/ #nav ul li:hover ul { display:block;
        }
web前端开发学习Q-q-u-n： 784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法
（详细的前端项目实战教学视频，PDF）

The effect is as: