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

1) 纵向导航菜单

<styletype="text/css">

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; }

</style>

 

<body>

<divid="menu">

<ul>

<li><ahref="@#">首页</a></li>

<li><ahref="#">网页版式布局</a></li>

</ul>

</div>

</body>

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

ul{list-style:none;}

img{border-style=none;}

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

 

2) 二级弹出菜单

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

<style type="text/css">

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

img { border-style: none; }

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

a:hover { color: #F00; }

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

#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;position:relative; }

#menu ul li ul { display:none;position: absolute; left: 100px; top: 0px; width:100px;

border:1px solid #ccc;border-bottom:none; }

#menu ul li.current ul {display:block;}

#menu ul li:hover ul {display:block;}

 

</style>

<div id="menu">

<ul>

<li><ahref="#">首页</a></li>

<li><ahref="#">视频教程</a>

<ul>

<li><ahref="#">工具</a></li>

<li><ahref="#">书签</a></li>

</ul>

</li>

<li><ahref="#">资料下载</a>

<ul>

<li><ahref="#">医院</a></li>

<li><ahref="#">学校</a></li>

</ul>

</li>

</ul>

</div>

 

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

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

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


展开阅读全文
博主设置当前文章不允许评论。

没有更多推荐了,返回首页