动态导航栏

最新推荐文章于 2024-06-06 10:02:59 发布

yc520376

最新推荐文章于 2024-06-06 10:02:59 发布

阅读量657

点赞数 1

文章标签： css jquery

本文链接：https://blog.csdn.net/yc520376/article/details/77417362

版权

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>导航动态显示效果</title>
<script src=js/jquery.min.js></script>
<style rel="stylesheet">
* {
margin: 0;
padding: 0;
word-wrap: break-word;
word-break: break-all;
}

body {
background: #FFF;
color: #333;
font: 12px/1.6em Helvetica, Arial, sans-serif;
}

a {
color: #0287CA;
text-decoration: none;
}

a:hover {
text-decoration: underline;
}

ul, li {
list-style: none;
}

img {
border: none;
}

h1, h2, h3, h4, h5, h6 {
font-size: 1em;
}

html {
overflow: -moz-scrollbars-vertical;/* 在Firefox下始终显示滚动条*/
}

#navigation {
width:784px;
padding:8px;
margin:8px auto;

height:18px;
display: inline-block;
}
#navigation ul li {
float:left;
width: 100px;
height: 30px;
margin-right:20px;
position: relative ;
z-index:100;
background: url(./images/nav-logo.PNG) no-repeat;
}
#navigation ul li a {
display:block;
padding:0 8px;
color:#000;
font-weight:700;
}
#navigation ul li a:hover {
background:none;
color:#000;
}
#navigation ul li ul{

position: absolute;
width: 80px;
overflow:hidden;
display:none;
}
#navigation ul li ul li{
border-bottom: 1px solid #BBB;
text-align: left;
width: 100%;
}
img{
display: inline-block;

}
</style>
</head>
<body>
<img src="images/header-logo.png" alt="">
<div id="navigation">
<ul>
<li><a href="#">首页</a></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="#">公司历史</a></li>
<li><a href="#">公司精神</a></li>
<li><a href="#">公司发展</a></li>
</ul>
</li>
<li><a href="#">联系我们</a></li>
</ul>
</div>

<script>
/*
* 使用鼠标悬停事件效果
* * mouseover和mouseout
* * hover(over,out) - 模拟一个鼠标悬停事件
* * over - 用于模拟mouseover事件(处理函数)
* * out - 用于模拟mouseout事件(处理函数)
*/
$("#navigation>ul>li").hover(function(){
// 显示子菜单 - slideDown
$(this).children("ul").slideDown();
},function(){
// 隐藏子菜单 - slideUp
$(this).children("ul").slideUp("fast");
});
</script>
</body>
</html>