(div+css特效代码) 导航菜单栏

虾米哥阅读：567 2021-04-01 10:19:47 评论：0
截图效果：
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>
标签:CSS
声明
1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，请转载时务必注明文章作者和来源，不尊重原创的行为我们将追究责任；3.作者投稿可能会经我们编辑修改或补充。