.ru { background: red; /*对div进行宽度、高度等进行调整*/ width: 1000px; height: 50px; margin:0 auto; } .ru ul { list-style: none; } .ru ul li ul { display: none; /*隐藏嵌套的ul*/ } .ru ul li:hover ul { display: block; /*鼠标触发显示ul*/ } .ru ul #a1 { float:left; /*使ul中的li在同一行显示*/ } li#a1 { width: 100px; text-align: center; /*对ul中的li进行位置调整*/ margin-top: 1%; } ul#a2 { margin: 0; padding: 0; margin-top: 15px; /*对嵌套的ul进行位置调整*/ } ul#a2 li { border: 1px solid black; border-bottom-style: none; /*对嵌套的ul中li设置边框,并去除底部边框*/ height: 30px; /*一下三句用来设置li的位置等样式*/ line-height: 30px; background: purple; } ul #a2 li:last-child { border: 1px solid black;/*为最后一个li设置边框*/ } ul #a2 li:hover { color: white; /*设置嵌套的ul中的li中的文字触发状态*/ }
这是一个很简单的下拉框实现,代码简介易懂。在编写过程中,采用了无序列表ul,li并结合相应的CSS代码来进行编写。