Heim  >  Artikel  >  Web-Frontend  >  下拉菜单之纯CSS实现_html/css_WEB-ITnose

下拉菜单之纯CSS实现_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:41:59874Durchsuche

最近对一批学员进行网页培训,应他们要求,将这些课堂知识整理出来,供他们参考和回忆。当然,小寻哥是不愿意这么做的,毕竟白天培训+写项目,没有时间整理(当然是意味晚上整理啦)。哎,但是架不住前端美女的要求,答应了就只能照办了。

这里也给其他刚入门的小虾们头参考下吧。(部分整理,毕竟有些机密还是不能外泄的)

 

直接上代码,你们运行下吧

<!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>

  

 

不出意外,明天应该会上多级下拉菜单。

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn