纯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.111cn.net/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
#nav{ width:500px; margin:0px auto; list-style:none; font-size:12px; text-align:center; line-height:26px;}
#nav li{ width:100px; float:left;}
#nav li a{ display:block; width:99px; border-bottom:#FFFFFF 1px solid; text-decoration:none; background:#333333; height:26px; color:#CCCCCC;}
#nav li a:hover{ background:#CCCCCC; color:#333333;}
#nav li div{ display:none;}
</style>
<title>简单菜单测</title>
</head>

<body>
<ul id="nav">
  <li>
     <a href="#">江苏省</a>
     <div class="child_menu">
          <a href="#">南京</a>
          <a href="#">苏州</a>
          <a href="#">无锡</a>
          <a href="#">常州</a>
          <a href="#">镇江</a>
          <a href="#">徐州</a>
     </div>
  </li>
  <li>
     <a href="#">浙江省</a>
     <div class="child_menu">
          <a href="#">杭州</a>
          <a href="#">宁波</a>
     </div>
  </li>
  <li>
     <a href="#">福建省</a>
     <div class="child_menu">
          <a href="#">厦门</a>
          <a href="#">福州</a>
          <a href="#">泉州</a>
     </div>
  </li>
  <li>
     <a href="#">广东省</a>
     <div class="child_menu">
          <a href="#">广州</a>
          <a href="#">深圳</a>
          <a href="#">东莞</a>
          <a href="#">潮州</a>
     </div>
  </li>
  <li>
     <a href="#">山东省</a>
     <div class="child_menu">
          <a href="#">青岛</a>
          <a href="#">威海</a>
          <a href="#">泰安</a>
          <a href="#">济南</a>
          <a href="#">德州</a>
     </div>
  </li>
</ul>
<script type="text/javascript教程" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
var nav_main=$("#nav>li>a");
var nav_child=$("#nav>li>div");
nav_main.each(function(i){
   $(this).mouseover(function(){
               basic.show(i);
      })
       .mouseout(function(){
         basic.hidden(i);
      });
});
nav_child.each(function(i){
   $(this).mouseover(function(){
               basic.show(i);
      })
       .mouseout(function(){
         basic.hidden(i);
      });
});

var basic={
   show:function(i){nav_child.eq(i).show();},
   hidden:function(i){nav_child.eq(i).hide();}
}
</script>
</body>
</html>

 

时间： 2024-10-01 10:12:01

纯css导航菜单代码的相关文章

css 导航菜单代码

提示:您可以先修改部分代码再运行 css 导航菜单代码 Home Single Level Dropdown Dropline Flyout Support Contact 提示:您可以先修改部分代码再运行

经典css 导航菜单代码

提示:您可以先修改部分代码再运行 经典css 导航菜单代码 Home Single Level Dropdown Dropline Flyout Support Contact 提示:您可以先修改部分代码再运行

纯css导航菜单40例

如果在网站中有什么可以为用户留下第一印象的话,那么一定非创意实用的网站导航菜单莫属吧,在崇尚操作实用,注重体验的Web设计中,导航菜单的作用举足轻重. 如果在网站中有什么可以为用户留下第一印象的话,那么一定非创意实用的网站导航菜单莫属吧,在崇尚操作实用,注重体验的Web设计中,导航菜单的作用举足轻重.它可以引导用户更好地浏览网站内容,让用户更快速地找到感兴趣的内容. 在这篇文章中,整理搜集了40多套优秀的CSS导航菜单实例资源,下载即可使用,修改模板和结构也是非常的方便,应用在你的网站开发过程中

纯css导航菜单效果代码(兼容所有浏览器)

About Me Lorem ipsum dolor Maecenas lacinia sem Suspendisse fringilla Portfolio Lorem ipsum dolor Maecenas dignissim fermentum luctus Suspendisse fringilla Lorem ipsum dolor Maecenas lacinia sem Suspendisse fringilla Clients Lorem ipsum dolor Maecena

一个入门级css导航菜单代码

站长特效网,以质量为核心,以实用为目的,打造一流网页特效站!zzjs.net,站长js特效. 站长特效首页 站长特效一号 站长特效二号 站长特效三号 站长特效四号 站长特效五号

纯CSS实现超简单的二级下拉导航菜单代码

本文实例讲述了纯CSS实现超简单的二级下拉导航菜单代码.分享给大家供大家参考.具体如下: 这是一款纯CSS菜单,二级下拉导航效果,是最简洁的CSS导航菜单,兼容性也很棒,IE7/8.火狐等都支持,而且它还是学习CSS菜单编写的典型教程,让你学会很多CSS技巧. 运行效果截图如下: 具体代码如下:   复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.

纯css实现蓝色圆角效果水平导航菜单代码

         本文实例讲述了纯css实现蓝色圆角效果水平导航菜单代码.分享给大家供大家参考.具体如下:          这是一款可爱的蓝色圆角水平导航菜单,用到几张背景图片,我觉得这款菜单挺实用,特别是用在个人博客中非常合适.在兼容性方面做的也很好,几乎兼容所有的浏览器. 运行效果截图如下: 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org

纯CSS横向二级导航菜单代码

提示:您可以先修改部分代码再运行 纯CSS横向二级导航菜单代码 Home Single Level Dropdown Dropline Flyout Support Contact 提示:您可以先修改部分代码再运行

纯CSS导航条下拉菜单代码

提示:您可以先修改部分代码再运行 纯CSS导航条下拉菜单代码 Home Single Level Dropdown Dropline Flyout Support Contact 提示:您可以先修改部分代码再运行