<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
/* //标签适配器{去掉li标签前的点；内边距10px}*/
div,li{list-style: none;padding: 10px}
/* id适配器*/
#main1{border: 2px red solid}
/* id 适配器下的div标签*/
#main1 div{width: 100px;height: 30px}
/* 鼠标滑动过的效果*/
#main1 div:hover{width: 100px;height: 100px;border: 1px solid red}
#main2{border: 1px solid blue}
/* ul li 进行标签隐藏*/
#main2 li ul{
display: none;
}
#main2 li:hover ul{
display: block;
border: 1px solid orange;
}
</style>
</head>
<body>
<div id="main1">
<div>项目一</div>
<div>项目二</div>
<div>项目三</div>
<div>项目四</div>
</div>
<ul id="main2">
<li>
<a>项目一</a>
<ul>
<li>项目一 1</li>
<li>项目一 2</li>
<li>项目一 3</li>
<li>项目一 4</li>
</ul>
</li>
<li>
<a>项目二</a>
<ul>
<li>项目二 1</li>
<li>项目二 2</li>
<li>项目二 3</li>
<li>项目二 4</li>
</ul>
</li>
<li>
<a>项目三</a>
<ul>
<li>项目三 1</li>
<li>项目三 2</li>
<li>项目三 3</li>
<li>项目三 4</li>
</ul>
</li>
<li>
<a>项目四</a>
<ul>
<li>项目四 1</li>
<li>项目四 2</li>
<li>项目四 3</li>
<li>项目四 4</li>
</ul>
</li>
</ul>
</body>
</html>*强调内容*
扫一扫
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
