html5+css3+jquery下拉收缩展开菜单

2024-10-11 21:14:26

1、准备好需要用到的图标。

2、新建html文档。

4、书写css代码。* { margin: 0; padding: 0; font-family: "Microsoft YaHei", Arial, sans-serif; font-size: 14px; }.list_dt { background: #333; color: white; width: 120px; padding: 0 40px 0 20px; height: 34px; line-height: 34px; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; position: relative; border-bottom: 1px solid #464646; }.list_dt:hover { background: #222; }.list_dt:hover ._after { display: block; width: 3px; height: 100%; position: absolute; left: 0; top: 0; background: #4285F4; }#open { background: #222; }#open ._after { display: block; width: 3px; height: 100%; position: absolute; left: 0; top: 0; background: #4285F4; }.list_dt_icon { position: absolute; right: 10px; top: 9px; display: block; width: 16px; height: 16px; background: url("../images/off.png") no-repeat; }#open .list_dt_icon { background: url("../images/open.png") no-repeat; }.list_dd { display: none; }.list_li { background: #4e4e4e; list-style-type: none; color: white; width: 120px; padding: 0 30px; height: 34px; line-height: 34px; cursor: pointer; border-bottom: 1px solid #6b6b6b; }.list_li:hover { background: #4285F4; }

6、代码整体结构。