首先看要实现的效果, 主要是关心技术实现, 所以没怎么美化
![左侧多级菜单栏效果图[3]](https://images2015.cnblogs.com/blog/781286/201704/781286-20170409103330160-236787269.gif "左侧多级菜单栏效果图[3]")
我也是初学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加上 使ul脱离文档流, 悬浮在原来文档流的上面
|
*{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>
|
4. 增加功能: 二级目录默认不显示, 鼠标悬停在一级目录上时, 才显示
|
<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*/
}
#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; /*去除列表的小圆点*/
}
#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;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>
|
![左侧多级菜单栏效果图[3]](http://images2015.cnblogs.com/blog/781286/201704/781286-20170409103329660-1055584910.gif "左侧多级菜单栏效果图[3]")
