因为工作上需要，我就写了一个兼容各个浏览器的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>Kyo_兼容IE个版本的一级下拉导航（你可以自己扩展）</title>
<link href="Css/kyocss.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<!-----Nav----------->
<script type="text/javascript" src="js/Kyo_navs.js"></script>
<!-----NavEnd-------->

<link href="css/css.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="Kyo_Main">
<!----------------KyoMainpage---------------------------->
<div id="KyoMainPage">
<!----------------Kyo_Navs------------------------------->
<div id="Kyo_Navs">

<div class="Kyo_NavTitle">
<a class="P_Titles" href="#">网站首页</a>
<div class="Kyo_NavBody">
<p class="Kyo_NBP"><a href="#">尼玛啊这弄到啥时候了</a></p>
<p class="Kyo_NBP"><a href="#">尼玛啊这弄到啥时候了</a></p>
</div>    
</div>

<div class="Kyo_NavTitle">
<a class="P_Titles" href="#">关于我们</a>
<div class="Kyo_NavBody">
<p class="Kyo_NBP"><a href="#">尼玛啊这弄到啥时候了</a></p>
</div>    
</div>

<div class="Kyo_NavTitle">
<a class="P_Titles" href="#">新闻资讯</a>
<div class="Kyo_NavBody">
<p class="Kyo_NBP"><a href="#">尼玛啊这弄到啥时候了</a></p>
<p class="Kyo_NBP"><a href="#">尼玛啊这弄到啥时候了</a></p>
<p class="Kyo_NBP"><a href="#">尼玛啊这弄到啥时候了</a></p>
<p class="Kyo_NBP"><a href="#">尼玛啊这弄到啥时候了</a></p>
</div>    
</div>

<div style="clear:both"></div>
</div>
<!----------------Kyo_NavsEnd---------------------------->

</div>
<!----------------KyoMainpageEnd------------------------->
</div>
</body>
</html>

 

 

调用一个jq类库我用的是jquery-1.7.1.min.js。然后再调用下面的js如下

$(document).ready(function(){
    $('.Kyo_NavTitle').hover(function(){
        $(this).children('.Kyo_NavBody').show();
        },function(){
        $(this).children('.Kyo_NavBody').hide();    
    })
})

 

然后是CSS

 

* {
    margin: 0px;
    padding: 0px;
}

#KyoMainPage {
    width: 1000px;
    margin-right: auto;
    margin-left: auto;
}

/***********************************************************/
/****Nav******/
/***********************************************************/
#Kyo_Navs {
    height: 38px;
    width: 1000px;
    background-color: #CCCCCC;
}


.Kyo_NavTitle {
    width: 150px;
    float: left;
}


.P_Titles {
    line-height: 38px;
    font-size: 14px;
    font-family: "微软雅黑";
    text-align: center;
    display: block;
    text-decoration: none;
    color: #0099FF;
}

.Kyo_NavBody{
    position:absolute;
    display:none;
    width:150px;
    border:1px solid #dbdbdb;
    background:#fff;
    line-height:21px;
    font-family: "微软雅黑";
    font-size: 12px;
}
.Kyo_NBP {
    text-align: center;
}
.Kyo_NBP a {
    line-height: 25px;
    text-decoration: none;
    display: block;
}
.Kyo_NBP a:hover {
    background-color: #CCCCCC;
}



/***********************************************************/
/****NavEnd******/
/***********************************************************/

 

嗯，给你们一个下载地址：jq一级下拉导航下载

考虑到了扩展性问题，下拉用了div。你们可以自己调整样式来让你的下拉内容更加丰富。

好了。希望能给你们带来方便和启发。

如果发现什么问题也可以及时跟我留言。使这个导航慢慢的变得强大。

多谢支持。祝工作愉快。