纯css下拉菜单
纯css下拉菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>下拉菜单</title><style type="text/css">ul { margin:0px; padding:0px;}ul li { float: left; list-style:none; width:100px; height:30px;color:#E8E8E8}ul li a { color: #FFF; text-decoration: none;/*去掉下划线*/ line-height: 29px; width: 91px; margin: 0px; padding: 0px 0px 0px 8px; display: block;/*a标签为块级元素*/ border-right: solid 1px #ccc; border-bottom:solid 1px #ccc; background: #808080;text-align:center;}ul li ul li { height:25px;}ul li ul li a{ line-height:24px; background:#808080}ul li a:hover { background:#666;}ul li ul { visibility:hidden;}ul li:hover ul { visibility:visible;}</style></head><body> <ul> <li> <a href="#">首页</a> </li> <li> <a href="#">产品展示</a> <ul> <li><a href="#">产品A</a></li> <li><a href="#">产品A</a></li> <li><a href="#">产品A</a></li> <li><a href="#">产品A</a></li> </ul> </li> <li><a href="#">项目管理</a> <ul> <li><a href="#">产品B</a></li> <li><a href="#">产品B</a></li> <li><a href="#">产品B</a></li> <li><a href="#">产品B</a></li> </ul> </li> <li><a href="#">产品介绍</a> <ul> <li><a href="#">产品A</a></li> <li><a href="#">产品A</a></li> <li><a href="#">产品A</a></li> <li><a href="#">产品A</a></li> </ul> </li> <li><a href="#">关于我们</a></li> <li><a href="#">联系我们</a></li> </ul></body></html>