CSS创建下拉菜单以及遇到的问题

来源：互联网发布：淘宝平面模特怎么找编辑：程序博客网时间：2024/06/01 08:11

方法一:给列表项加相对定位，然后给下拉菜单加绝对定位

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>*{margin: 0;padding: 0;}ul{list-style-type: none;}.list{width: 500px;/*让列表居中*/margin: 0 auto;/*如果加了overflow则下拉效果没有*//*overflow: hidden;*/}.list>li{/*列表项靠左浮动*/float: left;/*给每个列表项定宽*/width: 100px;}ul a{display: block;text-decoration: none;text-align: center;line-height: 30px;padding: 10px 10px;color: #fff;background-color: #ccc;}.dropbtn{/*给第三个列表项设置相对定位*/position: relative;}.dropdown{/*给下拉菜单设置绝对定位*/position: absolute;/*设置绝对定位后,列表项的宽度会改变*/width: 100px;/*隐藏下拉菜单*/display: none;}.dropbtn:hover .dropdown{display: block;}ul a:hover,ul a:focus{background-color: #333;}</style></head><body><nav><ul class="list"><li><a href="#">语文</a></li><li><a href="#">数学</a></li><li class="dropbtn"><a href="#">英语</a><ul class="dropdown"><li><a href="#">过去</a></li><li><a href="#">将来</a></li><li><a href="#">现在</a></li></ul></li><li><a href="#">物理</a></li><li><a href="#">化学</a></li></ul></nav></body></html>

下拉菜单(.dropdown)加绝对定位前:

下拉菜单(.dropdown)加绝对定位后:

方法二:把下拉菜单定位到屏幕之外，然后当鼠标悬停时重新定位它

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>*{margin: 0;padding: 0;}ul{list-style: none;}.list{width: 40em;margin: 0 auto;border: 1px solid green;/*清除浮动*/overflow: hidden;}.list li{/*让列表项浮动并添加宽度*/float: left;width: 8em;background-color: #ccc;}.list a{display: block;padding: 0.3em 1em;text-decoration: none;text-align: center;color: #fff;}.list a:hover,.list a:focus{background-color: #333;}.dropmenu{width: 8em;/*设置绝对定位让其隐藏到屏幕之外*/position: absolute;left: -999em;}.dropbtn:hover .dropmenu{/*让下拉菜单回到正常位置*/left: auto;}</style></head><body><ul class="list"><li><a href="#">语文</a></li><li><a href="#">数学</a></li><!-- 这里dropbtn类智能加在li上才有效果，加在a标签上无效果 --><li class="dropbtn"><a href="#">英语</a><ul class="dropmenu"><li><a href="#">过去</a></li><li><a href="#">将来</a></li><li><a href="#">现在</a></li></ul></li><li><a href="#">物理</a></li><li><a href="#">化学</a></li></ul></body></html>

效果:

总结:使用下拉菜单可以使用:hover伪类结合相对定位、绝对定位来实现

阅读全文

0 0