Maison > interface Web > tutoriel HTML > 下拉菜单之纯CSS实现_html/css_WEB-ITnose

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

WBOY
Libérer: 2016-06-24 11:41:59
original
918 Les gens l'ont consulté

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

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

 

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

<!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>
Copier après la connexion

  

 

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

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal