Home > Article > Web Front-end > Pure CSS implementation of drop-down menu_html/css_WEB-ITnose
Pure CSS implementation of drop-down menu_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:41:59868browse
Recently, a group of students were given web page training. At their request, the classroom knowledge was sorted out for their reference and recall. Of course, Brother Xiaoxun is not willing to do this. After all, he is training and writing projects during the day and does not have time to sort it out (of course, this means sorting it out at night). Hey, but I couldn’t resist the request of the front-end beauty, so I had no choice but to comply if I agreed.
Here is also a reference for other little shrimps who are just getting started. (Partially organized, after all, some secrets cannot be leaked)
Just upload the code and run it
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>下拉菜单 启思科技教育</title><meta http-equiv="content-Type" content="text/html;charset=utf-8"><style type="text/css">.navi ul {padding: 0;list-style-type: none;}.navi ul li {text-align: center;float: left;position: relative;width: 200px;background-color: #0F8CFF;}a {color: #086808;text-decoration: none;}.navi ul li a {display: block;border: 1px solid #fff;}.navi ul li ul {display: none;left: 0;}.navi ul li ul li {display: block;}/** 效果监听 */.navi ul li:hover ul {display: block;}.navi ul li:hover ul a {color: yellow;}</style></head><body><div class="navi"><ul ><li class="li_1"><a href="javascript:;" >游戏</a><ul><li><a href="javascript:;" >传奇</a></li><li><a href="javascript:;" >传奇</a></li><li><a href="javascript:;" >传奇</a></li><li><a href="javascript:;" >传奇</a></li><li><a href="javascript:;" >传奇</a></li></ul></li><li class="li_1"><a href="javascript:;" >游戏</a><ul><li><a href="javascript:;" >传奇</a></li></ul></li><li class="li_1"><a href="javascript:;" >游戏</a><ul><li><a href="javascript:;" >传奇</a></li></ul></li><li class="li_1"><a href="javascript:;" >游戏</a><ul><li><a href="javascript:;" >传奇</a></li></ul></li></ul></div></body></html>
As expected, there should be a multi-level drop-down menu tomorrow.