截图效果：
Jsp代码：
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<!--css样式文件 (导航菜单栏)-->
<link href="css/index.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body {
font: 10px normal Verdana, Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
}
h1 {
font: 4.7em normal Georgia, 'Times New Roman', Times, serif;
color: #333;
margin: 0;
padding: 5px 0;
}
h1 small {
font: 0.2em normal Verdana, Arial, Helvetica, sans-serif;
text-transform: uppercase;
letter-spacing: 1.5em;
display: block;
color: #fff;
}
.container {
width: 970px;
margin: 0 auto;
}
ul#topnav {
margin: 0;
padding: 0;
float: left;
width: 970px;
list-style: none;
position: relative;
font-size: 1.2em;
background: url(images/topnav_s.gif) repeat-x;
}
ul#topnav li {
float: left;
margin: 0;
padding: 0;
border-right: 1px solid #555;
}
ul#topnav li a {
padding: 10px 15px;
display: block;
color: #f0f0f0;
text-decoration: none;
}
ul#topnav li:hover {
background: #1376c9 url(images/topnav_a.gif ) repeat-x;
}
ul#topnav li span {
float: left;
padding: 15px 0;
position: absolute;
left: 0;
top: 35px;
display: none;
width: 970px;
background: #1376c9;
color: #fff;
-moz-border-radius-bottomright: 5px;
-khtml-border-radius-bottomright: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-radius-bottomleft: 5px;
-khtml-border-radius-bottomleft: 5px;
-webkit-border-bottom-left-radius: 5px;
}
ul#topnav li:hover span {
display: block;
}
ul#topnav li span a {
display: inline;
}
ul#topnav li span a:hover {
text-decoration: underline;
}
</style>
<!--jquery 核心文件 -->
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/slider.js"></script>
<!--导航菜单栏 js代码 -->
<script type="text/javascript">
$(document).ready(function() {
$("ul#topnav li").hover(function() { //Hover over event on list item
$(this).css({
'background' : '#1376c9 url(topnav_active.gif) repeat-x'
}); //Add background color + image on hovered list item
$(this).find("span").show(); //Show the subnav
}, function() { //on hover out...
$(this).css({
'background' : 'none'
}); //Ditch the background
$(this).find("span").hide(); //Hide the subnav
});
});
</script>
</head>
<body>
<!--导航菜单栏 -->
<div class="container">
<h1></h1>
<div style="clear: both; display: block; padding-bottom: 20px;"> <ul id="topnav">
<li><a href="">首页</a></li>
<li>
<a href="">关于克明</a>
<span>
<a href="">企业介绍</a> |
<a href="">发展历程</a> |
<a href="">组织机构</a> |
<a href="">企业风采</a> |
<a href="">领导关怀</a> |
<a href="">企业荣誉</a>
</span>
</li>
<li>
<a href="">新闻中心</a>
<span>
<a href="">公司新闻</a> |
<a href="">行业资讯</a> |
<a href="">媒体报道</a>
</span>
</li>
<li>
<a href="">克明文化</a>
<span>
<a href="">企业文化</a> |
<a href="">员工风采</a>
</span>
</li>
<li><a href="">克明产品</a>
<span>
<a href="">挂面</a> |
<a href="">调味酱</a>
</span>
</li>
<li><a href="">品牌推广</a>
<span>
<a href="">VI规范</a> |
<a href="">品牌推广</a>
</span>
</li>
<li><a href="">售后服务</a>
<span>
<a href="">售后服务</a> |
<a href="">销售网络</a> |
<a href="">联系我们</a>
</span>
</li>
<li><a href="">投资者服务</a>
<span>
<a href="">投资者互动平台</a>
</span>
</li>
<li><a href="">加入克明</a>
<span>
<a href="">人才战略</a> |
<a href="">职位需求</a> |
<a href="">简历提交</a>
</span>
</li>
<li><a href="">联系我们</a>
</li>
</ul>
</div>
<br><br><br><br>
<div style="text-align:center;clear:both">
</div>
<div class="content_right">
<div class="ad" >
<ul class="slider" >
<li><a href="#"><img src="images/buttom_0.jpg"/></a></li>
<li><a href="#"><img src="images/buttom_1.jpg"/></a></li>
<li><a href="#"><img src="images/buttom_2.jpg"/></a></li>
<li><a href="#"><img src="images/buttom_3.jpg" /></a></li>
</ul>
<ul class="num" >
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</div>
</body>
</html>