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

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style type="text/css">

*{margin:0px;padding:0px}

#anv{background-color:#6CF;width:600px;height:40px;margin:0 auto;}

ul{list-style:none;}

ul li{float:left;line-height:40px;width:120px;text-align:center;position:relative}

a{text-decoration:none;color:#000;padding:0 10px;display:block;height:40px}

a:hover{color:#FF0;background-color:#390}

ul li ul li{float:none;background-color:#EEE;margin-bottom:1px;}

ul li ul{position:absolute;left:0px;top:40px;display:none}

ul li ul li a:hover{background-color:#F90}

ul li:hover ul{display:block}

</style>

</head>

<body>

<div id="anv">

<ul>

<li><a href="#">首页</a></li>

<li><a href="#">导航一</a>

  <ul>

    <li><a href="#">PHP</a></li>

    <li><a href="#">JavaScript</a></li>

    <li><a href="#">CSS</a></li>

    <li><a href="#">HTML</a></li>

  </ul>

</li>

<li><a href="#">导航二</a>

   <ul>

    <li><a href="#">PHP</a></li>

    <li><a href="#">JavaScript</a></li>

    <li><a href="#">CSS</a></li>

    <li><a href="#">HTML</a></li>

  </ul>

</li>

<li><a href="#">导航三</a>

 <ul>

    <li><a href="#">PHP</a></li>

    <li><a href="#">JavaScript</a></li>

    <li><a href="#">CSS</a></li>

    <li><a href="#">HTML</a></li>

  </ul>

</li>

<li><a href="#">导航四</a>

  <ul>

    <li><a href="#">PHP</a></li>

    <li><a href="#">JavaScript</a></li>

    <li><a href="#">CSS</a></li>

    <li><a href="#">HTML</a></li>

  </ul>

</li>

</ul>

</div>

</body>

</html>

　　

HTML/CSS方法实现下拉菜单的更多相关文章

  1. 经典的 div + css 鼠标 hover 下拉菜单

    经典的 div + css 鼠标 hover 下拉菜单 效果图: 源码: <html> <head> <meta charset="utf-8"> ...

  2. -第2章 JS方法实现下拉菜单显示和隐藏

    知识点 onmouseover 鼠标经过 onmouseout 鼠标移出 function 关键字 getElementsByTagName 获取一组标签 length 获取对象成员个数 思路 给一级 ...

  3. CSS 实现样式下拉菜单

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

  4. CSS写动态下拉菜单 -----2017-03-27

    动态网站第一步:动态下拉菜单 关键点: overflow:hidden max-height xx:hover {} 设置当鼠标移上之后的效果 transition:   设置过度时间 cursor: ...

  5. 纯css实现横向下拉菜单

    自己最近在捣腾css代码,不光是js能做很多有趣的东西,这货也可以做很多东西,现在把自己的一些作品分享给大家. 做得有点粗糙,大家根据这个思路来,可以自己修改修改. 关于demo:这是一个横向下拉的菜 ...

  6. JavaScript+CSS+DIV实现下拉菜单示例

    <!DOCTYPE html> <html> <head> <title>下拉菜单示例</title> <script languag ...

  7. CSS打造三级下拉菜单

    <html><head><meta http-equiv="Content-Type" content="text/html; charse ...

  8. css制作简单下拉菜单

    要点:定位,隐藏,显示. (一)先建一个两次列表 <ul id="ul1"> <li>首页</li> <li>第二页 <ul& ...

  9. -第1章 HTMLCSS方法实现下拉菜单

    中英文的自动换行问题 把下面代码中的 javascript 改成 子菜单1 试试, 如果英文的话宽度会自动撑开, 用中文不会, 而直接转行下来. <ul> <li><a ...

随机推荐

  1. Sonar常见的审查结果

    格式:问题名字+问题出现的次数 Resources should be closed2 资源未关闭,打开发现有两处用到的IO流没有关闭 Conditions should not unconditio ...

  2. cocos2dx三种定时器的使用以及停止schedule，scheduleUpdate，scheduleOnce。

    今天白白跟大家分享一下cocos2dx中定时器的使用方法. 首先,什么是定时器呢?或许你有时候会想让某个函数不断的去执行,或许只是执行一次,获取你想让他每隔几秒执行一次,ok,这些都可以统统交给定时器 ...

  3. 51nod 1295 XOR key-区间异或最大值-可持久化01Trie树(模板)

    1295 XOR key 2 秒 262,144 KB 160 分 6 级题   给出一个长度为N的正整数数组A,再给出Q个查询,每个查询包括3个数,L, R, X (L <= R).求A[L] ...

  4. Eclipse有助于提高开发速度的快捷键

    用Eclipse已经很长一段时间了,自己常用的几个快捷键也已经很熟,但还是有一些自己不经常在开发中使用,但非常使用的快捷键,记录下来,以后利用来提高开发效率. 1.ctrl + shift + r   ...

  5. 多协议注入工具t50

    多协议注入工具t50   t50是Kali Linux自带的一款网络数据包注入工具.该工具支持15种协议,不仅涵盖常规协议(ICMP.TCP.UDP),还涵盖基础协议和路由协议(GRE.IPSec.R ...

  6. 高效的 itertools 模块(转)

    原文地址:http://python.jobbole.com/87380/ 我们知道,迭代器的特点是:惰性求值(Lazy evaluation),即只有当迭代至某个值时,它才会被计算,这个特点使得迭代 ...

  7. Spring中的设计模式2

    Spring设计模式分析   工厂模式和单态模式 工厂模式:可以将java对象对象的调用者从被调用者的实现逻辑中分离.调用者只关心被调用者必须满足的某种规则,这种规则我们看做是接口,不必关心实例的具体 ...

  8. 【找规律】【DFS】XVII Open Cup named after E.V. Pankratiev Stage 14, Grand Prix of Tatarstan, Sunday, April 2, 2017 Problem A. Arithmetic Derivative

    假设一个数有n个质因子a1,a2,..,an,那么n'=Σ(a1*a2*...*an)/ai. 打个表出来,发现一个数x,如果x'=Kx,那么x一定由K个“基础因子”组成. 这些基础因子是2^2,3^ ...

  9. 找出最小元素的下标 Exercise07_10

    import java.util.Scanner; /** * @author 冰樱梦 * 时间:2018年下半年 * 题目:找出最小元素的下标 * */ public class Exercise0 ...

  10. NOIP2014 解题报告·水渣记

    Day 1: 第一次参加noip.小激动,小紧张,这些正常的情绪就不用说了.唯一值得一提的是 我早上步行去郑大工学院的时候迷路了,直接转进了隔壁的河南农大,绕了半天找不到机房,还给几个同学打了电话可就 ...