制作下拉表单

第一步设置好初步样式

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>下拉表单</title>
 6 </head>
 7 <body>
 8     <ul class='ul_all'>
 9     <li class='li_1'>
10         <a href="#">标题1</a>
11         <ul class='ul_one'>
12             <li>子1</li>
13             <li>子2</li>
14             <li>子3</li>
15         </ul>
16     </li>
17 
18     <li class='li_2'>
19     <a href="#">标题2</a>
20     <ul class='ul_two'>
21             <li>子1</li>
22             <li>子2</li>
23             <li>子3</li>
24     </ul>
25     </li>
26     <p>这是最底部</p>
27 
28 </ul>
29 </body>
30 </html>

第二步我加了一些框和一些样式

<style type="text/css">
	.ul_all{
		border: 1px solid red;
	}
	.ul_one{
	border: 1px solid black;
	}
	.ul_two{
		border: 1px solid blue;
	}
	a{
		border: 1px solid black;
		height: 20px;
		display: block;
	}

   .li_1,.li_2{
 	border: 1px solid red;
 }

 p{
 	border: 1px solid black;
 }
</style>

效果是这样的

第三步浮动

 li{
 	float: left;
 	list-style-type: none;
 }

效果是这样的

第四部清楚不需要的浮动

.ul_two li,.ul_one li{
     float: none;
 }

效果是这样的

第五部就是要隐藏我们要隐藏的框框

.ul_one,.ul_two{
    display: none;
}

隐藏起来了吧

第六步就是让它再一次出现

.li_1:hover .ul_one,.li_2:hover .ul_two{
    display: block;
}

利用hover实现鼠标不放上去就是隐藏的

最后你会发现因为浮动的影响最后一行需要清除这种影响，使它变成单独一行

 p{
     clear: both;
 }

这时你会发现最后一行会随隐藏的内容上下的浮动，这是因为两个ul的内容还在常规文本流中要让他们脱离出来

.ul_one,.ul_two{
            position: absolute;
}

好了我的理解就是这样，存在错误还望指出。

 

 

　

posted on 2016-07-08 18:37  一梦清水  阅读(205)  评论(0)    收藏  举报

导航