二级导航

<style>
ul li {
float: left;
list-style: none;
height: 30px;
}

#topnav {
background: url(topnav_s.gif) repeat-x;
overflow: hidden;
text-align: center;
color: #FFFFFF;
width: 1144px;
border: none;
display: flex;
justify-items: center;
align-items: center;

}

ul li>a {
display: block;
color: #FFFFFF;
font-size: 18px;
}

ul li>span {
position: relative;
display: none;
bottom: 13px;
left: 3px;
background: #333;
color: #FFFFFF;
height: 230px;
border-radius: 5px;
}
ul#topnav li span>ul li{
list-style: none;
}
ul#topnav li span a:hover {
text-decoration: underline;
background-color: #333;
}
ul#topnav li ul{
position: absolute;
top: 160px;

}
ul#topnav li ul li{
float: none;
font-size: 16px;
}
ul#topnav li ul li a{
display: inline-block;
}
</style>
<div style="clear: both; display: block; padding-bottom: 20px;">
<ul id="topnav">
<li><a>商会</a>
<ul class="sub-nav">
<li><span style="margin-top: 0px;"> <a href="#"> 商会</a> <a href="#">商会</a> <a href="#"> 商会</a> <a href="#"> 商会</a> <a href="#"> 商会</a> </span></li>
</ul>
</li>
<li><a>商会</a>
<ul class="sub-nav">
<li><span style="margin-top: 0px;"> <a href="#"> 商会</a> <a href="#">商会</a> <a href="#"> 商会</a> <a href="#"> 商会</a> <a href="#"> 商会</a> </span></li>
</ul>
</li>
<li><a>商会</a>
<ul class="sub-nav">
<li><span style="margin-top: 0px;"> <a href="#"> 商会</a> <a href="#">商会</a> <a href="#"> 商会</a> <a href="#"> 商会</a> <a href="#"> 商会</a> </span></li>
</ul>
</li>
<li><a>商会</a>
<ul class="sub-nav">
<li><span style="margin-top: 0px;"> <a href="#"> 商会</a> <a href="#">商会</a> <a href="#"> 商会</a> <a href="#"> 商会</a> <a href="#"> 商会</a> </span></li>
</ul>
</li>
<li><a>商会</a>
<ul class="sub-nav">
<li><span style="margin-top: 0px;"> <a href="#"> 商会</a> <a href="#">商会</a> <a href="#"> 商会</a> <a href="#"> 商会</a> <a href="#"> 商会</a> </span></li>
</ul>
</li>
</ul>
</div>
<p>
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$(function() {
$("ul#topnav li").hover(function() {
$(this).css({});
$(this).find("span").show();
}, function() {
$(this).css({
'background': 'none'
});
$(this).find("span").hide();
});
});
</script>
</p>

posted on 2018-01-09 15:01  Jonne  阅读(116)  评论(0)    收藏  举报

导航