第一步设置好初步样式
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;
}
好了我的理解就是这样，存在错误还望指出。
时间： 2024-08-24 04:44:06