Css菜单

时间：2022-07-02 15:42:10 编辑：袖梨来源：一聚教程网

提示：您可以先修改部分代码再运行

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>VISA-2level</title>
<link rel="stylesheet" type="text/<a href="http://www.111com.net/cssdiv/css.html" target="_blank">css</a>" href="globalnav.css" media="screen" />
</head>
<style>
body {font:12px/1.22 Verdana,Arial,Helvetica,clean,sans-serif;*font-size:small;*font:x-small; color:#636363;}
a {
	color:#959595;
	text-decoration:none;	
}
a:hover {	
	text-decoration:underline;
}
.globalnav { 
	margin-left:20px; 
	
	*overflow:hidden;
}
.globalnav ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}
.globalnav ul li {
	float: left;
	background: url(images/globalnav_bg.gif) repeat-x 0 0;
	_
}
.globalnav ul li span, .globalnav ul li.first span, .globalnav ul li.last span  {
	display: block;
	background: url(images/globalnav_l.gif) no-repeat left top;
	padding-left:30px;
	line-
	_line-
}
.globalnav ul li.last span { }
.globalnav ul li.first span { background-position: left -32px;}
.globalnav ul li.last span { background-position: left -64px;}
.globalnav ul li a, .globalnav ul li .sub a, .globalnav ul li .sub a:hover {
	font-size:15px;
	color:#636363;
	font-weight:bold;
	background: url(images/globalnav_r.gif) no-repeat right top;
	padding-right:10px;
	display: block;
	
}
.globalnav ul li a:hover { 
	text-decoration:none;
}
.globalnav ul li .sub a { 
	padding-right:30px;
	background-position: right -32px;
}
.globalnav ul li .sub a:hover{
	padding-right:30px;
	background-position: right -64px;
}
.globalnav ul li.last a, .globalnav ul li.last a:hover{
	background: url(images/globalnav_last_r.gif) no-repeat right top;
	color:#fff;
}
.globalnav ul li.last .sub a {
	background-position: right -32px;
}
.globalnav ul li.last .sub a:hover {
	padding-right:20px;	
	background-position: right -64px;
}

.globalnav ul ul {
	position: absolute;
	left: 0;
	top: 32px;
	_left:-30px;
	visibility: hidden;
	border:6px solid #d9d9d9;
}
.globalnav ul .last ul {
	border:6px solid #b32929;
	
	overflow-y:auto; 
	overflow-x:hidden;
}

.globalnav ul :hover ul {
	visibility: visible;
}
.globalnav ul ul li {
	background:#fff none;
	display:block;
	
}
.globalnav ul li ul a, .globalnav ul li .sub ul a, .globalnav ul li.last ul a { 
	background:#fff none; 
	font-size:12px; 
	font-weight:normal;
	color:#636363;
	padding:0 10px;
	display: block;
	line-
	
}
.globalnav ul li ul a:hover, .globalnav ul li .sub ul a:hover, .globalnav ul li.last ul a:hover {
	font-size:12px;
	font-weight:normal;
	background:#ffc3c4 none;
	color:#636363;
	line-
	
}
.globalnav table { /* style the table so that it takes no part in the layout - required for IE to work */
	border-collapse: collapse;
	height: 0;
	margin: -1px;
	padding: 0;
	width: 0;
}
.globalnav ul li:hover, .globalnav ul li .sub a:hover {
	position: relative;
}
.globalnav ul li:hover .sub > a {
	background:url(images/globalnav_r.gif) no-repeat right -64px;
}
.globalnav ul li.last:hover .sub > a {
	background:url(images/globalnav_last_r.gif) no-repeat right -64px;
}
/*.globalnav ul li ul {
	background:#e1e1e1 url(images/globalnav_home_bg.gif) repeat-x left bottom;
}
.globalnav ul li.last ul {
	background:#b32929 url(images/globalnav_offer_bg.gif) repeat-x left bottom;
}

</style>
<body>
  <div class="globalnav">
    <ul>
      <li class="first"><span class="sub"><a href="#">Home
        
        </a></span>
        
        
        <ul>
          <li><a href="#">Campaigns</a></li>
          <li><a href="#">Publishers</a></li>
          <li><a href="#">Campaigns</a></li>
          <li><a href="#">Publishers</a></li>
        </ul>
        
      </li>
      <li><span><a href="#">Inventory 1</a></span></li>
      <li><span class="sub"><a href="#">Tab
        
        </a></span>
        
        
        <ul>
          <li><a href="#">list 01</a></li>
          <li><a href="#">list 02</a></li>
		  <li><a href="#">list 02</a></li>
		  <li><a href="#">list 02</a></li>
		  <li><a href="#">list 02</a></li>
		  <li><a href="#">list 02</a></li>
        </ul>
        
      </li>
      <li class="last"><span class="sub"><a href="#">Offer
        
        </a></span>
        
        
        <ul>
          <li><a href="#">Offer 01 Offer 01 Offer 01</a></li>
          <li><a href="#">Offer 02</a></li>
          <li><a href="#">Offer 03</a></li>
          <li><a href="#">Offer 04</a></li>
          <li><a href="#">Offer 05</a></li>
          <li><a href="#">Offer 06</a></li>
          <li><a href="#">Offer 05</a></li>
          <li><a href="#">Offer 06</a></li>
          <li><a href="#">Offer 01</a></li>
          <li><a href="#">Offer 02</a></li>
          <li><a href="#">Offer 03</a></li>
          <li><a href="#">Offer 04</a></li>
          <li><a href="#">Offer 05</a></li>
          <li><a href="#">Offer 06</a></li>
          <li><a href="#">Offer 05</a></li>
          <li><a href="#">Offer 06</a></li>
        </ul>
        
      </li>
    </ul>
  </div>
</body>
</html>

提示：您可以先修改部分代码再运行

推荐专题

最新下载

热门教程

Css菜单

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程