zoukankan      html  css  js  c++  java

  • 符合HTML标准的下拉菜单代码

      1<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN"
      2
      3"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      4<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
      5<head>
      6<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
      7<title>css菜单演示</title>
      8
      9
     10<style type="text/css">
     11<!--
     12
     13*{margin:0;padding:0;border:0;}
     14body {
     15    font-family: arial, 宋体, serif;
     16        font-size:12px;
     17}
     18
     19
     20#nav {
     21     line-height: 24px;  list-style-type: none; background:#666;
     22}
     23
     24#nav a {
     25    display: block; width: 80px; text-align:center;
     26}
     27
     28#nav a:link  {
     29    color:#666; text-decoration:none;
     30}
     31#nav a:visited  {
     32    color:#666;text-decoration:none;
     33}
     34#nav a:hover  {
     35    color:#FFF;text-decoration:none;font-weight:bold;
     36}
     37
     38#nav li {
     39    float: left; width: 80px; background:#CCC;
     40}
     41#nav li a:hover{
     42    background:#999;
     43}
     44#nav li ul {
     45    line-height: 27px;  list-style-type: none;text-align:left;
     46    left: -999em; width: 180px; position: absolute;
     47}
     48#nav li ul li{
     49    float: left; width: 180px;
     50    background: #F6F6F6;
     51}
     52
     53
     54#nav li ul a{
     55    display: block; width: 156px;text-align:left;padding-left:24px;
     56}
     57
     58#nav li ul a:link  {
     59    color:#666; text-decoration:none;
     60}
     61#nav li ul a:visited  {
     62    color:#666;text-decoration:none;
     63}
     64#nav li ul a:hover  {
     65    color:#F3F3F3;text-decoration:none;font-weight:normal;
     66    background:#C00;
     67}
     68
     69#nav li:hover ul {
     70    left: auto;
     71}
     72#nav li.sfhover ul {
     73    left: auto;
     74}
     75#content {
     76    clear: left;
     77}
     78
     79
     80-->
     81    </style>
     82
     83<script type=text/javascript><!--//--><![CDATA[//><!--
     84function menuFix() {
     85    var sfEls = document.getElementById("nav").getElementsByTagName("li");
     86    for (var i=0; i<sfEls.length; i++) {
     87        sfEls[i].onmouseover=function() {
     88        this.className+=(this.className.length>0? " ": "") + "sfhover";
     89        }
     90        sfEls[i].onMouseDown=function() {
     91        this.className+=(this.className.length>0? " ": "") + "sfhover";
     92        }
     93        sfEls[i].onMouseUp=function() {
     94        this.className+=(this.className.length>0? " ": "") + "sfhover";
     95        }
     96        sfEls[i].onmouseout=function() {
     97        this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"),
     98
     99"");
    100        }
    101    }
    102}
    103window.onload=menuFix;
    104
    105//--><!]]></script>
    106
    107</head>
    108<body>
    109
    110
    111<ul id="nav">
    112<li><a href="#">产品介绍</a>
    113    <ul>
    114    <li><a href="#">产品一</a></li>
    115    <li><a href="#">产品一</a></li>
    116    <li><a href="#">产品一</a></li>
    117    <li><a href="#">产品一</a></li>
    118    <li><a href="#">产品一</a></li>
    119    <li><a href="#">产品一</a></li>
    120    </ul>
    121</li>
    122<li><a href="#">服务介绍</a>
    123    <ul>
    124    <li><a href="#">服务二</a></li>
    125    <li><a href="#">服务二</a></li>
    126    <li><a href="#">服务二</a></li>
    127    <li><a href="#">服务二服务二</a></li>
    128    <li><a href="#">服务二服务二服务二</a></li>
    129    <li><a href="#">服务二</a></li>
    130    </ul>
    131</li>
    132<li><a href="#">成功案例</a>
    133    <ul>
    134    <li><a href="#">案例三</a></li>
    135    <li><a href="#">案例</a></li>
    136    <li><a href="#">案例三案例三</a></li>
    137    <li><a href="#">案例三案例三案例三</a></li>
    138    </ul>
    139</li>
    140<li><a href="#">关于我们</a>
    141    <ul>
    142    <li><a href="#">我们四</a></li>
    143    <li><a href="#">我们四</a></li>
    144    <li><a href="#">我们四</a></li>
    145    <li><a href="#">我们四111</a></li>
    146    </ul>
    147</li>
    148
    149<li><a href="#">在线演示</a>
    150    <ul>
    151    <li><a href="#">演示</a></li>
    152    <li><a href="#">演示</a></li>
    153    <li><a href="#">演示</a></li>
    154    <li><a href="#">演示演示演示</a></li>
    155    <li><a href="#">演示演示演示</a></li>
    156    <li><a href="#">演示演示</a></li>
    157    <li><a href="#">演示演示演示</a></li>
    158    <li><a href="#">演示演示演示演示演示</a></li>
    159    </ul>
    160</li>
    161<li><a href="#">联系我们</a>
    162    <ul>
    163    <li><a href="#">联系联系联系联系联系</a></li>
    164    <li><a href="#">联系联系联系</a></li>
    165    <li><a href="#">联系</a></li>
    166    <li><a href="#">联系联系</a></li>
    167    <li><a href="#">联系联系</a></li>
    168    <li><a href="#">联系联系联系</a></li>
    169    <li><a href="#">联系联系联系</a></li>
    170    </ul>
    171</li>
    172
    173</ul>
    174
    175</body>
    176</html>
  • 相关阅读:
    计算机硬件发展史
    17.Java8新特性_传统时间格式化的线程安全问题
    13. Java8新特性_Stream API 练习
    12. Java8新特性_Stream_归约与收集
    11.Java8新特性_Stream_查找与匹配
    10.Java8新特性_Stream_排序
    9. Java8新特性_Stream_映射
    8. Java8新特性_Stream_筛选与切片
    CentOS 安装 Python3
    CentOS7安装图形桌面系统（GNOME / KDE / Cinnamon / MATE / Xfce）
  • 原文地址：https://www.cnblogs.com/baddot/p/236794.html
Copyright © 2011-2022 走看看