使用html和css实现元素下拉框的方法

html-css020

使用html和css实现元素下拉框的方法,第1张

以将 下拉菜单嵌入由盒子中 充当的按钮 为例来说明问题，以类选择器为button的盒子当作触发下拉菜单的容器(即是当鼠标移动到该按钮上面出现下拉框)，则必须将hover属性附着在按钮盒子的上一级盒子上，但是通常上一级的盒子比当前盒子大或者里面有多个小盒子，那么鼠标放在按钮外部和上一级盒子的内部仍然可以将下拉带单显示，于是尝试在按钮盒子的上一级加上了一个与按钮大小一样的按钮，并将下拉菜单附着于此。

第一想法就是给未显示（默认隐藏时）的下拉菜单栏添加，其结果就是边框一直处于显示状态，在下拉菜单栏隐藏时无法隐藏。解决方法就是将边框的属性加在hover属性里面，未显示时的边框设置为零。

未显示时属性为（ display: none）显示时属性为（display: block），结果就是能够显示与隐藏，但是动画效果没有表现出来。想不通...

除了使用display的属性之外，还可以使用：下拉菜单栏的隐藏通过使菜单栏的属性overflow: hidden 来实现。

list中（隐藏时）的height设置为零，hover中（显示时）的height设置为110px，使用动画transition属性来过渡。

同样是通过overflow: hidden实现隐藏，但是是通过visibility:visible显示隐藏，动画效果仍然有效。

就是相比方法二将hover里面的属性由display: block改为visibility:visible

以上均为鄙人实践的结果，理解甚微，纰漏繁多，还请斧正。

比如说：下拉菜单收起时的动画没有搞明白怎样控制，而且下拉菜单收起时的动画没有边框；假如使用visibility: hidden和visibility:visible实现隐藏和显示时，会出现动画效果播放完之前，下拉菜单栏内容已经展示出来。

使用HTML和CSS制作下拉菜单的方法如下：

1、编写带有div导航的html代码：

2、使用class=“nav”属性的‘div’标签作为菜单的容器。在截图中，在图示的HTML代码中，一个简单的无序列表（ul）来表示主菜单项。

3、在主菜单区域中添加链接。在本步骤中，在无序列表（ul）每一项上添加链接。

4、在“关于我们（About Us）”下方LI标签内添加一个无序列表，它代表其子菜单的链接。

5、制作导航css：

最好是用JS做，但是非要用CSS呢，也可以。如下是我以前写的一个CSS下拉，你可以参考一下：

<html> <head> <title></title> <style>*{margin:0padding:0} ul,li{ list-style-type:none padding:0 margin:0 } #nav li a{ display:block width:100px text-align:center text-decoration:none color:#ffffff background-color:#000000 } #nav li{ position:relative margin-bottom:2pxfloat:leftmargin-right:5px } #nav li ul{ position:absolute left:10px top:20px display:nonewidth:100px } #nav li:hover ul{ display:block } </style> </head> <body><ul id="nav"><li><a href="#">首页</a></li><li><a href="#">关于我们</a><ul><li>我们的故事</li><li>我们的团队</li></ul></li><li><a href="#">我们的服务</a><ul><li>网页设计</li><li>页面制作</li><li>程序开发</li></ul></li><li><a href="#">联系我们</a><ul><li>团队主力</li><li>团队成员</li></ul></li></ul> </body></html>