Just some sharing about java open source and life

纯CSS实现的下拉滑动菜单

日期:2010-01-14 23:58 | 作者:phoenix | 分类目录:CSS/HTML
346 views

页面文件的主要部分:可以是.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

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

作者:phoenix | 分类目录:CSS/HTML | 标签:
回到顶部

无觅相关文章插件,快速提升流量