css二级下拉菜单

 代码如下 复制代码

<!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=gb2312" />
    <title>css二级下拉菜单</title>
    <link href="style/index.css" type="text/css" rel="stylesheet">
 <script type=text/网页特效><!--//--><![cdata[//><!--
 function menufix() {
  var sfels = document.getelementbyid("nav").getelementsbytagname("li");
  for (var i=0; i<sfels.length; i++) {
   sfels[i].onmouseo教程ver=function() {
   this.classname+=(this.classname.length>0? " ": "") + "sfhover";
   }
   sfels[i].onmousedown=function() {
   this.classname+=(this.classname.length>0? " ": "") + "sfhover";
   }
   sfels[i].onmouseup=function() {
   this.classname+=(this.classname.length>0? " ": "") + "sfhover";
   }
   sfels[i].onmouseout=function() {
   this.classname=this.classname.replace(new regexp("( ?|^)sfhover\b"),
 
 "");
   }
  }
 }
 window.onload=menufix;
 //more javascript from http://
 //--><!]]></script>

</head>
<body>
    <div id="container">                                                       
        <div class="outframe_header">
   <div class="jmlogo">
    <a href="http://www.111cn.net"><img src="images/logo.gif" /></a>
   </div>
   <div class="box">
    <div class="part01">                                     
     <div class="jmsubnav">
      <a href="http://www.111cn.net">返回首页</a><a href="http://www.111cn.net">加入收藏</a><a href="http://www.111cn.net" class="last">网站地图</a>
     </div>
     <div class="jmsearch" name="gsearcharea">
      <input type="hidden" class="url" value="" />
      <button type="button" name="submit">
       搜索
      </button>
      <input type="text" class="searchitem" title="请输入搜索标题" />
      
     </div>
    </div>
    <div class="jmnav">
     <ul id="nav">
      <li class="top"><a href="http://www.111cn.net">网聚传播</a>
        <ul>
         <li class="top01"></li>
         <li><a href="http://www.111cn.net">广州新怡</a></li>
         <li><a href="http://www.111cn.net">捷成汽配</a></li>
         <li><a href="http://www.111cn.net">东莞汽配</a></li>

         <li class="bot01"></li>
        </ul>
      </li>
      <li class="top"><a href="http://www.111cn.net">广州简美</a>
       <ul>
         <li class="top01"></li>
         <li><a href="http://www.111cn.net">广州新怡</a></li>
         <li><a href="http://www.111cn.net">广州新怡</a></li>
         <li><a href="http://www.111cn.net">广州新怡 </a></li>
         <li><a href="http://www.111cn.net">广州新怡</a></li>
          <li><a href="http://www.111cn.net">捷成汽配</a></li>
         <li><a href="http://www.111cn.net">东莞汽配</a></li>
         <li><a href="http://www.111cn.net">东莞汽配</a></li>
         <li class="bot01"></li>
        </ul>
      </li>
      <li class="top"><a href="http://www.alixixi.com">阿里西西</a>
       <ul>
         <li class="top01"></li>
         <li><a href="http://www.alixixi.com">同城团购</a></li>
         <li><a href="http://www.alixixi.com">同城团购</a></li>
         <li><a href="http://www.alixixi.com">同城团购</a></li>
         <li><a href="http://www.alixixi.com">同城团购</a></li>
         <li class="bot01"></li>
        </ul>
      </li>
      <li class="top topa"><a href="http://www.111cn.net">脚本之家</a>
       <ul>
         <li class="top01"></li>
         <li><a href="http://www.111cn.net">脚本之家</a></li>
         <li><a href="http://www.111cn.net">脚本之家</a></li>
         <li><a href="http://www.111cn.net">脚本之家</a></li>
         <li><a href="http://www.111cn.net">脚本之家</a></li>
         <li class="bot01"></li>
        </ul>
      </li>
      
      <li class="top topb"><a href="http://www.111cn.net">广州网页制作</a>
       <ul>
         <li class="top01 top02"></li>
         <li><a href="http://www.111cn.net">网页制作</a></li>
         <li><a href="http://www.111cn.net">网页设计</a></li>
         <li><a href="http://www.111cn.net">网页制作</a></li>
         <li><a href="http://www.111cn.net">网页设计</a></li>
         <li class="bot01"></li>
        </ul>
      </li>
     
     </ul>
    </div>
   </div>
        </div>
    </div>
</body>
</html>

源码下载地址
http://down.111cn.net/js/css/2010/0928/20963.html
效果预览地址
http://g.111cn.net/javascript/code/20100927/css1/

 

时间： 2024-09-22 07:23:19

css二级下拉菜单的相关文章

导航菜单-简洁的纯CSS二级下拉菜单

菜单1 菜单1-1 菜单1-2 菜单1-3 菜单2 菜单2-1 菜单2-2 菜单2-3 菜单3 菜单3-1 菜单3-2 菜单3-3

js+css实现超简洁的二级下拉菜单效果代码_javascript技巧

本文实例讲述了js+css实现超简洁的二级下拉菜单效果代码.分享给大家供大家参考.具体如下: 这是一个很简洁的CSS+JavaScript二级菜单,没有使用过多的修饰素材,尽量不调用外部图片,简洁大方,而且便于二级开发完善,最初是一个政府网站上的菜单. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-simple-2jxl-menu-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//

Android编程实现二级下拉菜单及快速搜索的方法_Android

本文实例讲述了Android编程实现二级下拉菜单及快速搜索的方法.分享给大家供大家参考,具体如下: 一.我们要做什么? 上面有个搜索框,下面是一个二级下拉菜单. 输入查询内容,下面列表将显示查询结果. 二.界面设计 (1)这是主框架(部分属性已经省去,请看源码),从上至下分别是文本框,列表,二级列表. <?xml version="1.0" encoding="utf-8"?> <LinearLayout> <LinearLayout

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

原文:CSS技巧分享:如何用css制作横排二级下拉菜单 导航菜单是每个网站所必备的功能,也是每个学习制作网站的朋友所必须接触的,如何用css样式制作一个简单漂亮的二级下拉菜单呢,下来小编就一步一步教大家来制作横排二级下拉菜单,让我共同来学习吧. 首页我们打看dreamweaver或其它编辑器,创建一个名为nav的导航菜单 <div class="nav"> <ul> <li><a href="#">栏目一</a&

&amp;#106avascript+xml实现二级下拉菜单，不会被任何标签或元素遮住

xml|菜单|下拉 一.简单说明 该菜单最大的优点是可以跨过网页上任何标签,甚至是框架,(一般的菜单会被select,object,flash等挡住)所以如果你有这方面的需要,那么这个菜单是个很好的选择. 总体而言,它有如下特性:(1)菜单的样式和数据都是通过xml配置(2)菜单的样式可以随心所欲修改,如: <base>     <background-color>#DDDDDD</background-color>     <background-image&g

javascript+xml实现二级下拉菜单，不会被任何标签或元素遮住

一.简单说明 该菜单最大的优点是可以跨过网页上任何标签,甚至是框架,(一般的菜单会被select,object,flash等挡住)所以如果你有这方面的需要,那么这个菜单是个很好的选择. 总体而言,它有如下特性:(1)菜单的样式和数据都是通过xml配置(2)菜单的样式可以随心所欲修改,如: <base>     <background-color>#DDDDDD</background-color>     <background-image>url(menu

基于jQuery实现二级下拉菜单效果_jquery

本文通过代码实例详细介绍一下简单的二级下拉菜单是如何实现的,当然还有更为复杂的二级菜单,不过先学会如何制作简单的,分享给大家供大家参考,具体内容如下 代码如下: <html> <head> <meta charset=" utf-8"> <title>下拉菜单</title> <style type="text/css"> nav a{ text-decoration:none; } nav&g

jQuery实现二级下拉菜单效果_jquery

大家都知道jQuery是一个框架,它对JS进行了封装,使其更方便使用.前面两篇博文分别是用CSS样式和JS实现的,那么这篇就用jQuery来实现二级下拉式菜单. 使用JQuery实现需要用到的知识有:        1)使用$(function(){...})获取到想要作用的HTML元素.        2)通过使用children()方法寻找子元素.        3)通过使用show()方法来显示HTML元素.        4)通过使用hide()方法来隐藏HTML元素.        5

jQuery实现简单二级下拉菜单_jquery

html代码 <div class="UpLayer"> <dl> <dt> <a href="javascript:void(0)"></a></dt> <dd> <a href="http://www.demo.com/js/">特效</a> <a href="http://www.demo.com/Tutorials/