html+css下拉菜单

来源：互联网发布：uploadify java 编辑：程序博客网时间：2024/05/17 01:49
<span style="font-size:18px;">    html文件：<html><head><meta charset="utf-8"><title>下拉菜单</title><link rel="stylesheet" type="text/css" href="http://li157053220.blog.163.com/css/menu.css"><!--<style type="text/css"></style>--></head><body><div id="nav"><ul><li><a href="http://li157053220.blog.163.com/#">首页</a></li><li><a href="http://li157053220.blog.163.com/#">课程大厅</a><ul><li><a href="http://li157053220.blog.163.com/">javaScrit</a></li><li><a href="http://li157053220.blog.163.com/"><a href="http://li157053220.blog.163.com/">Jquery</a></li><li><a href="http://li157053220.blog.163.com/">php</a></li></ul></li><li><a href="http://li157053220.blog.163.com/#">学习中心</a><ul><li><a href="http://li157053220.blog.163.com/">学习计划</a></li><li><a href="http://li157053220.blog.163.com/">在线学习</a></li><li><a href="http://li157053220.blog.163.com/"><a href="http://li157053220.blog.163.com/">视频下载</a></li><li><a href="http://li157053220.blog.163.com/">在线提问</a></li></ul></li><li><a href="http://li157053220.blog.163.com/#">关于我们</a></li></ul></div></body></html>   css文件：* {margin:0px;padding: 0px;}#nav {background-color: #eee; width:390px;height: 40;margin: 0 auto;}ul {/*list-style 样式，去除*/list-style: none; }ul li {float: left;/*width: 90px;*/padding: 0 10px;line-height: 40px;text-align: center;position: relative;}a {text-decoration: none;color:#000;display: block;padding: 0 10px;}a:hover {color: #FFF;background-color: #666;}ul li ul li {float: none;background-color: #eee;margin-top: 2px;}ul li ul {position: absolute;left: 0px;top: 40px;display: none;}ul li ul li a:hover{/*color:#FFF;*/background-color:blue;}ul li:hover ul {display: block;}</span>
0 0