前端页面上的下拉列表怎么做？今天用csshover属性写一个简单列表下拉
工具/原料
电脑
代码编辑器（本文用的HBuilder）
方法/步骤
1、在编辑器里新建一个html页面，在body标签里新建一个div,div里面写一个u盟敢势袂l标签，ul标签里放入四个li标签，在style里面写标签的基本属性，如下图所示
2、浏览器里打开页面，看一下效果，此时效果不太理想布局有点乱
3、回到html页面，给ul加上margin和padding属性，li标签加上list-style:none;属性，代码如下图所示
4、再打开页面开一下效果，布局已经对齐
5、列表下拉的效果，一般默认下拉是隐藏，我们现在ul标签样式里写上display:艘绒庳焰none隐藏ul标签，在通过hover属性让ul标签显示出来,代码如下图所示
6、打开页面看一下最终效果
7、具体代码：<!DOCTYPEhtml&g隋茚粟胫t;<html> <head> <metacharset租涫疼迟="utf-8"> <title>hover教程2</title> </head> <style> body{ margin:0; padding:0; } .nav{ width:200px; margin:0auto; height:45px; line-height:45px; font-size:16px; cursor:pointer; background:red; color:#FFFFFF; text-align:center; } .nav:hoverul{ display:block; } .navul{ background:darkred; padding:0; margin:0; display:none; } li{ list-style:none; line-height:35px; font-size:14px; border-bottom:1pxsolidblack; } li:hover{ color:#000000; } </style> <body> <divclass="nav">个人中心 <ul> <li>个人信息</li> <li>个人积分</li> <li>个人记录</li> <li>退出登录</li> </ul> </div> </body></html>