首页 > 代码库 > css 下拉列表，图片背景，竖版，取消注释为横版
css 下拉列表，图片背景，竖版，取消注释为横版
<!DOCTYPE html><html><head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <link href="style/style.css" rel="stylesheet" type="text/css"/> <script type="text/javascript" src="js.js"></script> <style type="text/css"> </style> <script type="text/javascript"> </script></head><body><div> <ul> <li><a href="#">张三</a> <ul class="liUl"> <li><a href="#">张三一</a></li> <li><a href="#">张三二</a></li> <li><a href="#">张三三</a></li> <li><a href="#">张三四</a></li> </ul> </li> <li><a href="#">李四</a> <ul class="liUl"> <li><a href="#">李四一</a></li> <li><a href="#">李四二</a></li> <li><a href="#">李四三</a></li> <li><a href="#">李四四</a></li> </ul> </li> <li><a href="#">王五</a> <ul class="liUl"> <li><a href="#">王五一</a></li> <li><a href="#">王五二</a></li> <li><a href="#">王五三</a></li> <li><a href="#">王五四</a></li> </ul> </li> <li><a href="#">赵六</a> <ul class="liUl"> <li><a href="#">赵六一</a></li> <li><a href="#">赵六二</a></li> <li><a href="#">赵六三</a></li> <li><a href="#">赵六四</a></li> </ul> </li> </ul></div></body></html>
===============================
CSS所需图片
===============================
ul { list-style-type: none;}ul li ul li { float: none;}ul li a, ul li ul li a { text-decoration: none; display: block; width: 100px; height: 40px; line-height: 40px; color: #000; font-weight: bold; text-indent: 40px; background: url("../images/button.jpg") no-repeat left center;}ul li a:hover { background: url("../images/button.jpg") no-repeat right center; color: #FFF;}ul li .liUl { display: none;}ul li:hover > ul { display: block; /*display: inline;*/}ul li { /*float: left;*/}ul li ul { /*padding: 0;*/}
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。