个人练习：使用HTML+CSS制作二级菜单
最近一直在学习HTML+CSS，刚看完如果制作下拉菜单部分，就想着做一个练练手。 先上成品图： 就是上面这个效果，横向菜单选项能点击，鼠标放在上面也能展开二级菜单，二级菜单也能点击，点击后就会在底下的<iframe>中打开网站链接。（可能这里会有人好奇"为什么不点开哔哩哔哩你不是都放在上面了嘛！"，实际上我这边点开哔哩哔哩它会跳转两次，先在<iframe>中打开一次，然后又会在当前页面转到哔哩哔哩，你得后退一次才能看到在<iframe>中打开的哔哩哔哩_(:з」∠)_） 那么不废话了直接切入正题。 我的设想是创建两个<div>，宽度都是占100%，顶上的<div>放菜单栏，下面的<div>专门放<iframe>（这里先给两个区域设置背景颜色好分辨）： 1 <!-- 顶部div区域，存放横向导航栏 --> 2 < div class ="topMenu" > 3 4 </ div > 5 6 <!-- 主要内容的div区域，存放网站页面的框架 --> 7 < div class ="mainContent" > 8 9 </ div > HTML部分 底端的<div>区域我希望高度是除去顶端元素后剩余的所有部分，这里就用到了CSS3中的一个函数calc()。： 1 /* 清除文档内外边距，让<div>区域能够紧贴浏览器边缘 */ 2 body { 3 padding : 0px ;