惜晴

导航

导航动态显示效果

<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;
background:#3B5998;
height:18px;
}
#navigation ul li {
float:left;
margin-right:14px;
position: relative ;
z-index:100;
}
#navigation ul li a {
display:block;
padding:0 8px;
background:#EEEEEE;
font-weight:700;
}
#navigation ul li a:hover {
background:none;
color:#fff;
}
#navigation ul li ul{
background-color: #88C366;
position: absolute;
width: 80px;
overflow:hidden;
display:none;
}
#navigation ul li ul li{
border-bottom: 1px solid #BBB;
text-align: left;
width: 100%;
}
</style>
</head>
<body>
<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("fast");
},function(){
// 隐藏子菜单 - slideUp
$(this).children("ul").slideUp("fast");
});
</script>

posted on 2017-09-06 11:21  惜晴  阅读(188)  评论(0)    收藏  举报