div+css 纵向导航菜单及二级菜单弹出

1） 纵向导航菜单

body { font-family: Verdana;font-size: 12px; line-height: 1.5; }

a { color: #000;text-decoration: none; }

a:hover { color: #F00; }

#menu { width: 100px; border:1px solid #CCC; }

#menu ul { list-style: none;margin: 0px; padding: 0px; }

#menu ul li { background:#eee; padding: 0px 8px; height: 26px; line-height: 26px;

border-bottom: 1px solid #CCC; }

 

• 首页
• 网页版式布局

    默认样式是指，ul标签默认样式前面原点，加载图片带边框等，去掉默认样式方法：

ul{list-style:none;}

img{border-style=none;}

    css派生选择器：有助于节约大量class的定义。#menu ul和#menu ul li即为派生选择器，只对id为menu的ul生效，属性可以被id为menu下的li继承。

 

2） 二级弹出菜单

当鼠标放到一级菜单上后，弹出相应的二级菜单，移去鼠标后自动消失。

• 首页
• 视频教程

  • 工具
  • 书签

• 资料下载

  • 医院
  • 学校

 

#menu ul li:hover ul { display:block;}代表当鼠标放置到一级菜单时，二级菜单显示。display属性none表示元素隐藏；block表示显示。

    position定位属性，值relative表示如果对一个元素进行相对定位，首先它将出现在它所在的位置，然后相对于原始起点进行水平或垂直的移动。无论是否移动，元素仍然占据原来的空间；  值absolute表示绝对定位，依据浏览器左上角开始计算，绝对定位使元素脱离文档流，因此不占据空间，普通文档流中元素的布局就像绝对定位的元素不存在一样，绝对定位的元素与文档流无关，可以覆盖页面上其他元素，可通过z-index来控制层级次序，值越高显示越在上层。

    父容器使用相对定位，子元素使用绝对定位后，子元素不再相对于浏览器左上角，而是相对于父容器左上角。相对定位和绝对定位需要配合top、right、bottom、left来定位具体位置。