<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
*{margin: 0px;padding: 0px;}
#nav {background: #eee;width: 600px;height: 40px;margin: 0 auto;
}
ul {list-style: none;}
ul li {float: left;line-height: 40px;text-align: center;position: relative;}
a {text-decoration: none;height: 40px; 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 {width: 40px;}
ul li ul li a:hover {background-color: #06f;}
ul li:hover ul {display: block;}
</style>
</head>
<body>
<div id="nav">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">课程大厅</a>
<ul>
<li><a href="#">JavaScript</a></li>
<li><a href="#">jQuery</a></li>
</ul>
</li>
<li><a href="#">学习中心</a>
<ul>
<li><a href="#">JavaScript</a></li>
<li><a href="#">jQuery</a></li>
</ul>
</li>
<li><a href="#">经典案例</a></li>
<li><a href="#">关于我们</a></li>
</ul>
</div>
</body>
</html>
 
 
 
 

下拉菜单  - - css的更多相关文章

  1. 纯CSS实现二级导航下拉菜单--css的简单应用

    思想:使用css的display属性控制二级下拉菜单的显示与否.当鼠标移动到一级导航菜单的li标签时,显示二级导航菜单的ul标签.由于实现起来比较简单,所以在这里直接给出了参考代码. 1.纯CSS二级 ...

  2. 下拉菜单css

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. CSS技巧分享：如何用css制作横排二级下拉菜单

    原文:CSS技巧分享:如何用css制作横排二级下拉菜单 导航菜单是每个网站所必备的功能,也是每个学习制作网站的朋友所必须接触的,如何用css样式制作一个简单漂亮的二级下拉菜单呢,下来小编就一步一步教大 ...

  4. 基于CSS3金属风格下拉菜单

    基于CSS3金属风格下拉菜单,css,金属风格,下拉菜单,CSS3导航. css3按钮:http://www.huiyi8.com/css3/anniu/

  5. 超简洁的CSS下拉菜单

    效果体验:http://hovertree.com/texiao/css/3.htm HTML文件代码: <!DOCTYPE html> <html xmlns="http ...

  6. 纯CSS实现下拉菜单及下拉容器等（纯CSS实现导航条及导航下拉容器）

    虽然网上类似甚至相同的案例有很多,但是我还是写下,以记下笔记,也可供大家参考 希望大家可以指导批评~~ 首先我们以列表ul li 来开始我们菜单也可以说导航条的制作: 在页面中我们首先构建以下XHTM ...

  7. CSS 实现样式下拉菜单

    下拉菜单的实现 脚本: <script type="text/javascript"> function ShowSub(li) { ]; ; subMenu.styl ...

  8. jq+css+html简单实现导航下拉菜单

    相信导航栏下拉菜单是web开发最常见的一个item了.这里就不做介绍了,直接上code. Html部分 <div class="_nav"> <ul id=&qu ...

  9. 形行色色的下拉菜单（HTML/CSS JS方法 jQuery方法实现）

    HTML/CSS方法实现下拉菜单来源:慕课网<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q ...

随机推荐

  1. bat 批量更改文件名的批处理文件

    bat 批量更改文件名的批处理文件 最近下了不少动画,不过文件名都太长,一般都是 [字幕组][名称][集数][语言][分辨率][编码].后缀 这样的格式 我喜欢简单的名字,比如 01.rmvb 之类, ...

  2. SpringMVC TaskExecutor线程池

    一.配置jdbc.properties添加: #------------ Task ------------ task.core_pool_size=5 task.max_pool_size=50 t ...

  3. org.apache.cxf.interceptor.Fault: Unmarshalling Error: 意外的元素 (uri:"", local:"mixornot")。

    三月 09, 2018 3:09:14 下午 org.apache.cxf.phase.PhaseInterceptorChain doDefaultLogging警告: Interceptor fo ...

  4. 每月IT摘录201805

    摘录自互联网的前辈心得: 一.技术:0.精通一个淘汰的技术对你没有任何价值.学习的精力有限,更应该花在值得学的技术上.比如网络.操作系统.数据结构.算法1.工作要有定力,更多的应该是关心问题如何更有效 ...

  5. Treasures and Vikings(两次搜索)

    Treasures and Vikings https://www.luogu.org/problemnew/show/P4668 题意翻译 你有一张藏宝图,藏宝图可视为 N×MN×M 的网格.每个格 ...

  6. 安装使用phpStudy在本机配置php运行环境

    前言: php开发的初学者,强烈推荐使用phpStudy集成环境,一方面这个的确很好用(本人电脑安装了jspStudy,可以同时调试php和jsp),另一方面呢,虽然本人是技术控,但对这些繁杂的安装部 ...

  7. leetcdoe 175. Combine Two Tables

    给定两个表,一个是人,一个是地址,要求查询所有人,可以没有地址. select a.FirstName, a.LastName, b.City, b.State from Person as a le ...

  8. mongo远程登录

    1. 进入数据库: use admin db.addUser("foo","foo"); ps:高版本用db.createUser创建. 2. 改配置 如/et ...

  9. Excel日期格式调整

    3-Aug-2008   自定义格式: [$-809]d-mmm-yyyy;@ Aug-2008   自定义格式: [$-809]mmm-yyyy;@

  10. phpcms中调用外部网站数据

    1.在phpcms后台模块->模块管理->数据源->外部数据源 中 添加外部数据源 2.在phpcms前台模板中,使用get标签获取数据源中数据. {pc:get sql=" ...