纯CSS实现的下拉滑动菜单

添加评论 116 views 2010年1月14日

页面文件的主要部分:可以是.html或者.jsp创建,都可以。
<div id=”navbar”>
<ul> /*主菜单1*/
<li><a>Products</a>
<ul> /*下拉菜单项*/
<li><a>Pagewhacker</a></li>
<li><a>InstaWeb</a></li>
<li><a>BookWriter</a></li>
</ul>
</li>
/*主菜单2*/
<li><a>Support</a>
<ul>
<li><a>Online</a></li>
<li><a>Contact</a></li>
<li><a>Others</a></li>
</ul>
</li>
</ul>
</div>
css控制文件:

@CHARSET “UTF-8″;

#navbar{
margin-left:200px;
}

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

#navbar a{
display:block;
}

#navbar li{
float:left;
width:10em;
}

#navbar li ul{
display:none;
}

#navbar li:hover ul{
display:block;
width:10em;
position:absolut;
}

以上是下拉菜单的最小实现(粗糙原型),主要是设置了项元素的显示方式。

在以上基础上加入个人的美工实现就可以设计出更加美丽的下拉菜单了。

联系邮箱:wuyimin1228@163.com

~~~~      欢迎讨论      ~~~~

  1. 2010年1月19日 at 22:37 | #1

    用的是 navbar li:hover CSS伪类,我好像记得这个在IE6下不起作用吧。。。

  2. 2010年1月19日 at 22:44 | #2

    呵呵,这篇文章是我同学写的,这段css是在IE6下不起作用,太用ff写的

  1. 还没有 trackbacks
订阅评论