我以为只要找到width，把数值改成1000px就可以了，结果没找到，自己在
.menu {
height: 45px;
display:block;
}
中增加了一句width：1000px，也不起作用。
怎么才能把整个导航框拉长，宽度变成1000px呢？
完整代码如下，我该如何修改达到自己想要的效果？
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="imagetoolbar" content="no" />
<title>Animated Menu Using jQuery | Demo page</title>
<link rel="stylesheet" href="style.css" />
<style>
/** style used for both examples **/
.menu {
height: 45px;
display:block;
}
.menu ul {
list-style: none;
padding: 0;
margin: 0;
}
.menu ul li {
/* width and height of the menu items */
float: left;
overflow: hidden;
position: relative;
text-align: center;
line-height: 45px;
}
.menu ul li a {
/* must be postioned relative */
position: relative;
display: block;
width: 75px;
height: 45px;
font-family: Arial;
font-size: 11px;
font-weight: bold;
letter-spacing: 1px;
text-transform: uppercase;
text-decoration: none;
cursor: pointer;
}
.menu ul li a span {
/* all layers will be absolute positioned */
position: absolute;
left: 0;
width: 75px;
}
.menu ul li a span.out {
top: 0px;
}
.menu ul li a span.over,
.menu ul li a span.bg {
/* hide */
top: -45px;
}
/** 1st example **/
#menu {
background: #EEE;
}
#menu ul li a {
color: #000;
}
#menu ul li a span.over {
color: #FFF;
}
#menu ul li span.bg {
/* height of the menu items */
height: 45px;
background: url('bg_over.gif') center center no-repeat;
}
/** 2nd example **/
#menu2 {
background: #000;
}
#menu2 ul li a {
color: #FFF;
}
#menu2 ul li a span.over {
background: #FFF;
color: #000;
}
</style>
<script type="text/javascript" src="jquery.min.js"></script>
<script language="javascript">
$(document).ready(function() {
/* 1st example */
/// wrap inner content of each anchor with first layer and append background layer
$("#menu li a").wrapInner( '<span class="out"></span>' ).append( '<span class="bg"></span>' );
// loop each anchor and add copy of text content
$("#menu li a").each(function() {
$( '<span class="over">' + $(this).text() + '</span>' ).appendTo( this );
});
$("#menu li a").hover(function() {
// this function is fired when the mouse is moved over
$(".out", this).stop().animate({'top': '45px'}, 250); // move down - hide
$(".over", this).stop().animate({'top': '0px'}, 250); // move down - show
$(".bg", this).stop().animate({'top': '0px'}, 120); // move down - show
}, function() {
// this function is fired when the mouse is moved off
$(".out", this).stop().animate({'top': '0px'}, 250); // move up - show
$(".over", this).stop().animate({'top': '-45px'}, 250); // move up - hide
$(".bg", this).stop().animate({'top': '-45px'}, 120); // move up - hide
});
/* 2nd example */
$("#menu2 li a").wrapInner( '<span class="out"></span>' );
$("#menu2 li a").each(function() {
$( '<span class="over">' + $(this).text() + '</span>' ).appendTo( this );
});
$("#menu2 li a").hover(function() {
$(".out", this).stop().animate({'top': '45px'}, 200); // move down - hide
$(".over", this).stop().animate({'top': '0px'}, 200); // move down - show
}, function() {
$(".out", this).stop().animate({'top': '0px'}, 200); // move up - show
$(".over", this).stop().animate({'top': '-45px'}, 200); // move up - hide
});
});
</script>
</head>
<body>
<div id="content">
<div id="menu" class="menu">
<ul>
<li><a href="javascript:;">首页</a></li>
<li><a href="javascript:;">关于我们</a></li>
<li><a href="javascript:;">新闻动态</a></li>
<li><a href="javascript:;">研发创新</a></li>
<li><a href="javascript:;">市场营销</a></li>
<li><a href="javascript:;">产品展示</a></li>
<li><a href="javascript:;">产品资料</a></li>
<li><a href="javascript:;">加入我们</a></li>
<li><a href="javascript:;">会员中心</a></li>
<li><a href="javascript:;">联系我们</a></li>
</ul>
</body>
</html>
