首页 > 代码库 > 下拉列表的制作
下拉列表的制作
圣诞节后上课就是不在状态,一整天都在神游,还感觉特别累,本来想休息休息的,结果某人看不惯我一直吃东西,非得把电脑给我打开,让整理今天所学的内容,想了一下,确实上午讲的用无序列表<ul>做的下拉列表还不熟练,之前一直都是在用<div>做的,下面是用<ul>做的示例:
<style> *{ margin:0px; padding:0px;} .a{ margin: auto; height:50px; width:460px; position:relative; background-color:#396;} .aa{ height:50px; width:90px; float:left; text-align:center; line-height:50px; border:1px solid red; cursor:pointer; overflow:hidden;} //还可以做延迟的特效:transition要考虑各个浏览器的兼容性 .aa:hover{ background-color:#909; overflow:visible;} .aa li:hover{ background-color:#F00;} </style> <body> <div class="a"> <div class="aa">第一个导航 <ul style="list-style:none; background-color:#036"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </div> <div class="aa">第二个导航</div> <div class="aa">第三个导航</div> <div class="aa">第四个导航</div> <div class="aa">第五个导航</div> </div> </body>
我重新做了一遍,发现这种方法比较简单一些,如果单纯用无序列表来做,有点乱,我自己都糊涂了。。。ps:为了清楚一些,边框线没有去掉,以后看的时候不会傻眼,哈哈。。。
下拉列表的制作
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。