重复下拉列表的制作、first-child

来源：互联网发布：js 数组排序编辑：程序博客网时间：2024/05/17 00:18

1.html代码

<!doctype html><html lang="en"><head><meta charset="UTF-8"><title>stock list webpage</title><link rel="stylesheet" type="text/css" href="stocklist.css"></head><body><div id="nav"><ul><li class="navli"><a href="#">news1<div id="angle"></div></a><ul><li><a href="#">css1</a></li><li><a href="#">css2</a></li><li><a href="#">css3</a></li><li><a href="#">css4</a></li><li><a href="#">css5</a></li><li><a href="#">css6</a></li></ul></li><li class="navli"><a href="#">news2</a><ul><li><a href="#">css1</a></li><li><a href="#">css2</a></li><li><a href="#">css3</a></li><li><a href="#">css4</a></li><li><a href="#">css5</a></li><li><a href="#">css6</a></li></ul></li></ul></div></body></html>

2.css代码

* {margin: 0px;padding: 0px;text-decoration: none;}#nav {width: 800px;height: auto;margin: 50px auto;}ul {list-style: none;}.navli, .navli ul li {width: 100px;height: 30px;margin-left: 4px;background: #eee;line-height: 30px;text-align: center;float: left;position: relative;}.navli a {color: #000;}/* 二级菜单 */.navli ul {position: absolute;top: 30px;left: -4px;}.navli ul li {background: gray;}.navli ul li:first-child {border-top: 2px solid red;}.navli ul li a {color: #fff;}#angle {width: 0px;height: 0px;border-style: solid;border-width: 4px 4px 0 4px;border-color: red transparent;position: absolute;bottom: 1px;right: 1px;}

3. 效果图

说明：(1) 到时候可以添加代码，单击自动展开和隐藏。 (2) 直接用emmet代码写代码。

0 0