IT技术互动交流平台

首页 > 网页设计 > 网页特效教程 > 正文

简单实用的下拉菜单（CSS+jquery）

作者：倍道兼行  发布日期：2013-12-13 22:08:29

没什么可以说的，直接上例子

html+jquery代码

<!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>
<link rel='stylesheet' type='text/css' href='style/comm.css'/>
<link rel='stylesheet' type='text/css' href='style/layout.css'/>
<script type='text/javascript' src='script/jquery-1.4.2.min.js'></script>
<script type='text/javascript'>
$(function(){
    $('#nav>ul>li').hover(function(){
        $(this).children('ul').show();
        },function(){
        $(this).children('ul').hide();    
            
            });
    });
</script>
</head>

<body>
<div id='wrap'>
 
  <div id='nav'>
    <ul>
       <li><a href='#'>网站首页</a>
         <ul>
           <li><a href='#' alt='访问公司博客'>公司博客</a></li>
           <li><a href='#'>公司论坛</a></li>
         </ul>
        </li> 
      <li><a href='#'>关于我们</a>
         <ul>
            <li><a href='#'>公司新闻</a></li>
           <li><a href='#'>我们的宗旨</a></li>
           <li><a href='#' >服务内容</a></li> 
         </ul>     
      </li>
      <li><a href='#'>网站新闻</a>
         <ul>
           <li><a href='#'>行业动态</a></li>
           <li><a href='#'>公司新闻</a></li> 
         </ul>          
       </li>
      <li><a href='#'>作品展示</a>
         <ul>
           <li><a href='#'>网站作品</a></li>
           <li><a href='#'>flash作品</a></li> 
           <li><a href='#'>AI作品</a></li>
           <li><a href='#'>插画设计</a></li> 
         </ul>          
      
      </li>
      <li><a href='#'>项目报价</a>
         <ul>
           <li><a href='#'>网站作品报价</a></li>
           <li><a href='#'>flash作品报价</a></li> 
           <li><a href='#'>AI作品报价</a></li>
           <li><a href='#'>插画设计报价</a></li> 
         </ul>          
      </li>
      <li><a href='#'>联系方式</a>
         <ul>
           <li><a href='#'>站内留言</a></li>
           <li><a href='#'>联网方式</a></li> 
           <li><a href='#'>电话号码</a></li>
           <li><a href='#'>公司地址</a></li> 
         </ul>          
      </li>
  </ul>
  </div>
</div>
</body>
</html>

CSS代码

comm.css(重置一些常规样式)

@charset 'utf-8';
/* CSS Document */
/*
用户重置常规样式
*/
*{margin:0;
padding:0}

body{
    font-size:62.5%;    
    }
    
a{ text-decoration:none;}

ul,ol{ list-style-type:none;}        

table{border-collapse:collapse;border-spacing:0;}

fieldset,img{border:0;}

layout.css(用于布局)

@charset 'utf-8';
/* CSS Document */
#wrap{
    width:1000px;
    margin:0 auto;
    }
#nav{
    font-family:'微软雅黑';
    font-size:1.5em;
    height:30px;
    background:rgb(195,218,249);
    }
#nav ul{width:100%;background:rgb(195,218,249);}
#nav ul li{float:left; position:relative;}
#nav ul li a{display:block;width:120px;height:30px;line-height:30px; text-align:center; background:rgb(195,218,249);color:#000;}    
#nav ul li a:hover{background:rgb(255,229,179);color:#000;}
#nav ul li ul{ position:absolute;top:30px;left:0px; display:none;border:1px solid #ccc;margin-bottom:-3px;width:120px;}
#nav ul li ul li{float:none; border-bottom:1px solid #ccc;}
#nav ul li ul li a{background:rgb(246,246,246);color:#000;display:block;}
#nav ul li ul li a:hover{background:rgb(255,229,179);color:#000;}

上效果图

实例2

实例

延伸阅读：

Tag标签： 简单   实用   下拉  

  • 专题推荐

  • 栏目推荐

HTML/CSS 网页实例教程 酷站欣赏 网页特效教程 CMS教程 DedeCMS PhpCMS Wordpress Discuz PhpWind CMS综合 网页制作软件 DreamWeaver Flash FireWorks SharePoint 网页开发资讯
About IT165 - 广告服务 - 隐私声明 - 版权申明 - 免责条款 - 网站地图 - 网友投稿 - 联系方式
本站内容来自于互联网,仅供用于网络技术学习,学习中请遵循相关法律法规