下拉框-鼠标经过时出现下拉框

来源：互联网发布：乔纳森.伊夫知乎编辑：程序博客网时间：2024/06/04 22:15

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>* {margin: 0;padding: 0;}ul {list-style: none;   /*去除小圆点*/}a {text-decoration: none;   /*去除链接的下划线*/color: #666;}.mnue {width: 100%;margin-top: 50px;background-color: #eee;border-top: 2px solid #ccc;border-bottom: 2px solid #ccc;}.mnue-tit {margin: 0;width: 250px;height: 29px;margin: 0 auto;background-color: #ddd;border-right: 2px solid #ccc;border-left: 2px solid #ccc;}.mnue-tit a span {/*text-align: center;*/margin-left: 70px;}.mnue-son {display: none;  /*隐藏下拉内容*/width: 250px;height: 130px;padding-top: 5px;background-color: #ddd;}.mnue-tit:hover .mnue-son {display: block;}.mnue-son li {text-align: center; /*显示下拉内容*/padding-top: 10px;}.mnue-son li:hover a {color: #e62310;}.mnue-son ul li,.mnue .mnue-tit span {font-size: 22px;}</style></head><body><div class="mnue"><div class="mnue-tit"><a href="#"><span>Marketing</span></a><em></em><div class="mnue-son"><ul><li><a href="#">L'avion News</a></li><li><a href="#">Previous Events</a></li><li><a href="#">Coming Soon</a></li></ul></div></div></div></body></html>

效果图展示：

阅读全文

0 0