* { margin: 0; padding: 0 } body { font-size: 12px; } ul, li { list-style: none; } a:link, a:visited { text-decoration: none; } .list { width: 210px; border-bottom: solid 1px #316a91; margin: 40px 0 0 20px; } .list ul li { background-color: #467ca2; border: solid 1px #316a91; border-bottom: 0; } .list ul li a { padding-left: 10px; color: #fff; font-size: 12px; display: block; font-weight: bold; height: 36px; line-height: 36px; position: relative; } .list ul li .inactive { background: url("http://www.jq22.com/img/cs/500x500-1.png") no-repeat 184px center; } .list ul li .inactives { background: url("http://www.jq22.com/img/cs/500x500-2.png") no-repeat 184px center; } .list ul li ul { display: none; } .list ul li ul li { border-left: 0; border-right: 0; background-color: #6196bb; border-color: #467ca2; } .list ul li ul li ul { display: none; } .list ul li ul li a { padding-left: 20px; } .list ul li ul li ul li { background-color: #d6e6f1; border-color: #6196bb; } .last { background-color: #d6e6f1; border-color: #6196bb; } .list ul li ul li ul li a { color: #316a91; padding-left: 30px; }
这款下拉菜单非常简单,样式随意修改。