首先看要实现的效果, 主要是关心技术实现, 所以没怎么美化
我也是初学html, 所以写的比较啰嗦
1. 使用列表将内容显示出来
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> /*写css的地方*/ </style> </head> <body> <div id="leftMenu"> <ul> <li><a href="#">一级目录1</a> <ul> <li><a href="#">100001</a></li> <li><a href="#">100002</a></li> </ul> </li> <li><a href="#">一级目录2</a></li> <li><a href="#">一级目录3</a> <ul> <li><a href="#">300001</a></li> <li><a href="#">300002</a></li> </ul> </li> </ul> </div> </body> </html> |
这样会显示如下效果
这里不好看的地方是:
A. 二级目录预想是排在一级目录右边的, 但现在却是在下面的
B. 目录前面的小黑点和小圆圈是不需要的
2. 修改css
<style> *{margin: 0;padding: 0;} /*消除各种浏览器的边距默认值*/ #leftMenu ul{ /*作用于id=leftMenu的元素所有含有的ul*/ width: 100px; /*宽度设置为100*/ background: #DADADA; /*增加背景色方便查看*/ list-style: none; /*去除列表的小圆点*/ } #leftMenu li{ /*作用于id=leftMenu的元素所有含有的li*/ width: 100px; /*宽度设置为100*/ } </style> |
嗯, 这样好看多了, 但是二级目录还是没有排版到一级目录的右边
3. 给ul加上 position:absolute; 使ul脱离文档流, 悬浮在原来文档流的上面
*{margin: 0;padding: 0;} /*消除各种浏览器的边距默认值*/ #leftMenu ul{ /*作用于id=leftMenu的元素所有含有的ul*/ width: 100px; /*宽度设置为100*/ background: #DADADA; /*增加背景色方便查看*/ list-style: none; /*去除列表的小圆点*/ position:absolute; } #leftMenu li{ /*作用于id=leftMenu的元素所有含有的li*/ width: 100px; /*宽度设置为100*/ } </style> |
4. 增加功能: 二级目录默认不显示, 鼠标悬停在一级目录上时, 才显示
<style> *{margin: 0;padding: 0;} /*消除各种浏览器的边距默认值*/ #leftMenu ul{ /*作用于id=leftMenu的元素所有含有的ul*/ width: 100px; /*宽度设置为100*/ background: #DADADA; /*增加背景色方便查看*/ list-style: none; /*去除列表的小圆点*/ position:absolute; } #leftMenu li{ /*作用于id=leftMenu的元素所有含有的li*/ width: 100px; /*宽度设置为100*/ } #leftMenu li>ul{ /*作用于 li的直接子元素ul */ left: 100px; /*一级目录本身宽度100px, 所以二级目录显示的时候要向右偏移100px, 为什么使用的是left呢? 自己学习css吧*/ display: none; /*二级目录默认是不显示的*/ } #leftMenu li:hover>ul /*当鼠标悬停在li上时, li的直接子元素ul就显示出来*/ {display: block;} /*显示出来*/ </style> |
5. 上面的问题是 100001 没有与 一级目录1 同一高度
<style> *{margin: 0;padding: 0;} /*消除各种浏览器的边距默认值*/ #leftMenu ul{ /*作用于id=leftMenu的元素所有含有的ul*/ width: 100px; /*宽度设置为100*/ background: #DADADA; /*增加背景色方便查看*/ list-style: none; /*去除列表的小圆点*/ position:absolute; } #leftMenu li{ /*作用于id=leftMenu的元素所有含有的li*/ width: 100px; /*宽度设置为100*/ position: relative; /*设置为相对位置*/ } #leftMenu li>ul{ /*作用于 li的直接子元素ul */ left: 100px; /*一级目录本身宽度100px, 所以二级目录显示的时候要向右偏移100px, 为什么要用left呢? 自己学习css吧*/ top: 0; /*top的偏移位置相对于父元素为0*/ display: none; /*二级目录默认是不显示的*/ } #leftMenu li:hover>ul /*当鼠标悬停在li上时, li的直接子元素ul就显示出来*/ {display: block;} /*显示出来*/ </style> |
6. 给一个完整界面
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style> *{margin:0;padding:0;} #leftMenu ul{width:100px;position:absolute;background:#DADADA;list-style:none;} #leftMenu li{width:100px;position: relative;} #leftMenu li>ul{left: 100px;top: 0;display: none;} #leftMenu li:hover>ul{display: block;} </style> </head> <body> <div id="leftMenu"> <ul> <li><a href="#">一级目录1</a> <ul> <li><a href="#">100001</a></li> <li><a href="#">100002</a> <ul> <li><a href="#">100021</a></li> <li><a href="#">100022</a></li> </ul> </li> </ul> </li> <li><a href="#">一级目录2</a></li> <li><a href="#">一级目录3</a> <ul> <li><a href="#">300001</a></li> <li><a href="#">300002</a></li> </ul> </li> </ul> </div> </body> </html> |