<!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. STL模板整理 Binary search(二分查找)

    前言: 之前做题二分都是手动二分造轮子,用起来总是差强人意,后来看到STL才发现前辈们早就把轮子造好了,不得不说比自己手动实现好多了. 常用操作 1.头文件 #include <algorith ...

  2. FZU 2297 Number theory【线段树/单点更新/思维】

    Given a integers x = 1, you have to apply Q (Q ≤ 100000) operations: Multiply, Divide. Input First l ...

  3. HZAU 1199 Little Red Riding Hood（DP）

    Little Red Riding Hood Time Limit: 1 Sec  Memory Limit: 1280 MBSubmit: 853  Solved: 129[Submit][Stat ...

  4. 【数据结构】 最小生成树（二）——kruskal算法

    上一期说完了什么是最小生成树,这一期咱们来介绍求最小生成树的算法:kruskal算法,适用于稀疏图,也就是同样个数的节点,边越少就越快,到了数据结构与算法这个阶段了,做题靠的就是速度快,时间复杂度小. ...

  5. 2017 Multi-University Training 1 解题报告

    Add More Zero Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 131072/131072 K (Java/Others)T ...

  6. hdu 3547 (polya定理 + 小高精）

    DIY CubeTime Limit: 2000/2000 MS (Java/Others)    Memory Limit: 65535/32768 K (Java/Others)Total Sub ...

  7. 【BFS】【余数剪枝】Multiple

    [poj1465]Multiple Time Limit: 1000MS   Memory Limit: 32768K Total Submissions: 7731   Accepted: 1723 ...

  8. HDU 6053 TrickGCD（分块）

    [题目链接] http://acm.hdu.edu.cn/showproblem.php?pid=6053 [题目大意] 给出一个数列每个位置可以取到的最大值, 问这个可以构造多少个数列,使得他们的最 ...

  9. Problem D: 零起点学算法83——数组中删数

    #include<stdio.h> int main(void) { int n,i,t,x,flag; while(scanf("%d",&n)!=EOF) ...

  10. Codeforces Round #344 (Div. 2) B. Print Check 水题

    B. Print Check 题目连接: http://www.codeforces.com/contest/631/problem/B Description Kris works in a lar ...